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

我会改变的东西很少。回调将值作为第二个参数提供，而不是第一个。您对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 2

您的代码正在创建一个 div 并设置其 id，然后尝试通过该 ID 查找 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 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) 替换这个 -->

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