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，然后尝试按该ID查找<{em} div。查找将失败，因为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 | source

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);
  });  

});

Answer 2

我会改变一些事情。回调提供值作为第二个参数，而不是第一个参数。您拨打append的电话后跟一个空格 - 该空格会中断。我不确定您是要将columns添加到新的div，还是反过来。

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

$.each( positions, function( index, value ) {
  $( "<div>", { id : 'player_stats_block' + value } )
    .appendTo( "#columns" );
});

如果columns是对dom元素开头的合法引用，则可以将其重新置于主线末尾的$.appendTo()调用中。目前还不清楚这个变量在原帖中的含义。

Answer 3

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

jQuery.each( positions, function(index, value) {
   $('<div id="player_stats_block'+ value +'"></div>').append(columns);
});

Answer 4

将此替换为$（this） - ＆gt;

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); 
})