jquery forEach 函数用于显示/列出动态元素答案

【问题标题】：jquery forEach function used to show / list dynamic elementsjquery forEach 函数用于显示/列出动态元素
【发布时间】：2019-10-06 09:08:33
【问题描述】：

我创建了 3 个具有类属性的动态按钮，并希望在单击一个时将它们列出。只显示一个而不是全部三个。

<script>
var hyperlink;

$(function() {
    var y = 2;

    for(var i = 0; i <= 2; i++ ) {
         drawRow( i,  y );
    }
});

function drawRow( x, y ) {

    if(x == 0)
        row = $("<tr />")

    else {

        var btnName = "btn" + x;
        console.log("ln62 btnName: " + btnName);
        hyperlink = document.createElement("button");
        hyperlink.setAttribute('id', btnName);          
        hyperlink.setAttribute('class', 'btnCL');      //  class set for button
        hyperlink.innerHTML = x;

        $("#DataTable").append(row);
        row.append($("<td></td>").append(hyperlink));
        var btnName2 = "#btn" + x;
    }
}

$(document).on("click", '.btnCL', function() {

    console.log("inside doc.on ln73");
    //console.log("hyperlink: " + hyperlink.getAttribute("id"));
    $(hyperlink).each(function( i ) {
           console.log("ln76 " + i + ": " + hyperlink.getAttribute("id"));           
    });

});

</script>

结果： ln62 btn名称：btn1 ln62 btn名称：btn2 ln62 btnName: btn3

ln73 内部文档 ln76 0: btn3 // 仅列出一 (1) 个？？ s/b 3

我们将不胜感激。

【问题讨论】：

查看本教程：stackoverflow.com/help/how-to-ask。我想帮助你，但你的代码有很多错误。放置一个工作代码。

标签： javascript jquery

【解决方案1】：

这是因为hyperlink 是一个变量而不是一个数组。这一行hyperlink = document.createElement("button"); 将始终使用最后创建的按钮更新hyperlink 变量。

您可以使用event 对象并获取目标，而不是使用each

var hyperlink;

$(function() {
  var y = 2;

  for (var i = 0; i <= 2; i++) {
    drawRow(i, y);
  }
});

function drawRow(x, y) {

  if (x == 0)
    row = $("<tr />")

  else {

    var btnName = "btn" + x;
    console.log("ln62 btnName: " + btnName);
    hyperlink = document.createElement("button");
    hyperlink.setAttribute('id', btnName);
    hyperlink.setAttribute('class', 'btnCL'); //  class set for button
    hyperlink.innerHTML = x;

    $("#DataTable").append(row);
    row.append($("<td></td>").append(hyperlink));
    var btnName2 = "#btn" + x;
  }
}

$(document).on("click", '.btnCL', function(e) {
  console.log("inside doc.on ln73");
  console.log(e.target.getAttribute("id"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DataTable"></table>

【讨论】：

e.target.getAttribute("id")可以简化为this.id

【解决方案2】：

主要问题是循环的每次迭代，您都会为变量hyperlink重新分配一个新值

你真正需要做的就是遍历类集合，你根本不需要全局变量

$(document).on("click", '.btnCL', function() {
   // current button is `this`
   console.log('Current id:', this.id);

   // loop over the class instead to see them all 
    $('.btnCL').each(function( i, el ) {
           console.log("ln76 " + i + ": " + el.id); // or this.id          
    });    
});

【讨论】：