jQuery附加.each

Question

var positions = [ "00", "01", "02", "03", "04", "05" ];
jQuery.each( positions, function(players) {
var playerNotesContent = document.createElement('div');
playerNotesContent.setAttribute('id', 'player_stats_block'+this);
$("#player_stats_block" + this).append (columns); 
})

我想知道,为什么.append命令不起作用+this,但在创建div时它起作用.我究竟做错了什么？对不起我的英语不好,并提前多多感谢!

更新了!

var positions = [ "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18" ];

jQuery.each( positions, function(players, value) {

var player_id = $("#ctl" + value).attr("href").match(RegExp('players/([^/]+)/details.php$'))[1];
var playerlink = document.getElementById("ctl" + value);

GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.test.com/players/item/' + player_id,
onload: function(responseDetails) 
{
            var page = jQuery(responseDetails.responseText);
            var columns = jQuery('div.columns',page);
            var playerNotesContent = document.createElement('div');
            playerNotesContent.setAttribute('id', 'player_stats_block'+value);
            playerlink.parentNode.insertBefore( playerNotesContent, playerlink.nextSibling  );
            $('#player_stats_block00').append (columns); 
}
});
});

像这样所有值都会附加在#player_stats_block00中!我尝试了几个你的答案,但我不能将它们附加到正确的#player_stats_blockXX.对不起,我的英文不好,谢谢大家的帮助!

Answer 1

您的代码是创建一个div并设置其id,然后试图查找该div由该ID.查找将失败,因为div尚未在任何地方添加到DOM.

var positions = [ "00", "01", "02", "03", "04", "05" ];

jQuery.each( positions, function(players) {
    // Here you're creating the div
    var playerNotesContent = document.createElement('div');

    // ...and setting its `id` (btw, you can just do playerNotesContent.id = value;)
    playerNotesContent.setAttribute('id', 'player_stats_block'+this);

    // ...and here trying to look it up
    $("#player_stats_block" + this).append (columns); 
});

如果你试图将div附加到columns,你可能想要这而不是你的最后一行:

columns.append(playerNotesContent);

(注意,append将内容添加到您调用它的容器中.)

假设columns是一个jQuery对象.除此以外:

$(playerNotesContent).appendTo(columns);

要么

$(columns).append(playerNotesContent);

(注意,appendTo将您调用它的内容添加到您提供的参数中;它与之相反append.)

同样值得注意的是,创建的div没有内容,所以除非你设计它们,否则它们将没有任何尺寸,并且在页面上很难找到.:-)

这是一个假设columns是jQuery对象的示例,并给div一些内容,以便您可以看到它们:Live copy | 资源

HTML:

<div id="columns"></div>

JavaScript的:

jQuery(function($) {

  var columns = $("#columns");
  var positions = [ "00", "01", "02", "03", "04", "05" ];

  jQuery.each( positions, function(players) {
    var playerNotesContent = document.createElement('div');
    playerNotesContent.innerHTML = "Player Stats";
    playerNotesContent.id = 'player_stats_block'+this;
    columns.append(playerNotesContent);
  });  

});