我们如何动态地编写一个 jquery 选择器？

Question

我想在名为 activity-div 的主 div 中使用 jQuery 添加一些 div，然后为每个 div 添加一个列表。但是每个 div 的列表项都不相同。所以我认为我需要为每个 div 提供 id，然后使用该 id 我可以访问 div 并将列表项放入该 div 中。我正在使用这个 jQuery 代码：

 for (i=0;i<obj.length;i++){
     $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>');

      }

假设 obj.length 为 5。那么将添加 5 个 div。他们的 id 将是 area1、area2、area3、area4 和 area5。我的问题是如何使用循环通过 id 获取这些 div。我知道可以使用以下方式访问 div：

   ('#area1').append('<ul><li></li></ul>');

我想访问我使用循环创建的所有 div，然后在其中添加列表。我怎样才能做到这一点？那将是什么语法？我试过了

 ('#area'+i).append('<ul><li></li></ul>');

但它没有工作。我是 jQuery 新手，找不到任何在线帮助。提前致谢。

Answer 1

$('#area'+i).append(); 应该可以工作！

您的代码确实有错误：

append('<div class="area" id="area"'+i+'><h3>

应该是：

append('<div class="area" id="area'+i+'"><h3>

Answer 2

问题出在您的for 循环中，id 属性未正确添加数值。

使用您当前的代码，它会出现id="area"1 而不是id="area1"

这是正确的代码：

$('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>');

还只是为了添加更多内容，您在底部的附加行缺少 jQuery $ 标识符，应该看起来像

$('#area1').append('<ul><li></li></ul>');

Answer 3

最好将 DOM 插入构建到字符串中并同时添加它们。您的代码中也有一个错误，其中将 ID 添加到 DIV。试试这个：

var insertion = "";
for (i=0;i<obj.length;i++){
    insertion += '<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>';
}
$('#activity-div').append( insertion );

Answer 4

完全跳过 id，只按类和索引选择：

$("#activity-div .area").eq(i).append("<ul><li></li></ul>");

或者，更好的是，跳过不必要的 jQuery 查找，只保留对元素的引用。

var areas = [];
for (i=0;i<obj.length;i++) {
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
    $('#activity-div').append(area);
    areas.push(area);
}

然后按索引访问该区域：

areas[i].append("<ul><li></li></ul>");

如果可以将您的循环合并为一个，那将是理想的：

for (i=0;i<obj.length;i++) {
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
    area.append("<ul><li></li></ul>");
    $('#activity-div').append(area);
}

但是，这些解决方案都没有真正为您服务 - 您实际上没有在任何地方添加列表项。我会使用$.each 迭代obj，然后将列表项附加到同一个循环中，避免循环两次。这个怎么样，假设你的列表项也包含在obj[i]中：

$.each(obj, function () {
    var list = $('<div class="area"><h3><a href="#">'+this.name+'</a></h3><ul></ul></div>')
        .appendTo("#activity-div")
        .find("ul");
    $.each(this.listItems, function () {
        list.append("<li>" + this.Name + "</li>");
    });
});

Answer 5

您还可以使用 jQuery 选择器选择所有 id=area<num> div：

$('div[id^="area"]').append('<ul><li></li></ul>');

这会选择所有 id 以“area”开头的div 元素，并在其上附加一个ul 元素。

jQuery 选择器的文档可以在这里找到：http://api.jquery.com/category/selectors/

Answer 6

假设 obj.length 为 5。那么将添加 5 个 div。他们的 id 将是 area1、area2、area3、area4 和 area5...

不正确。在此处查看您的代码：

for (i=0;i<obj.length;i++){
  $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>');
}

如果有5个objects，它们将按照i进行编号。在 for 循环中，您将获得值 0、1、2、3 和 4，因为 i++ 直到循环重复之前的最后一步才会发生（即，i<obj.length 的评估发生在循环之前，i++ 出现在之后）。

除非您的 id="area"'+i+'（这应该是 id="area'+i+'"）有问题，如果您期望值从 1 到 5，请相应地调整您的 for 循环：

for( i=1; i<=obj.length; i++ ) {
  $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
} 

如果你想添加列表，你可以这样做：

for( i=1; i<=obj.length; i++ ) {
  $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
  $('#area'+i).append('<ul><li></li></ul');
}

没有真正的理由创建第二个 for 循环，并且该展示位置应仅在创建后尝试附加到 $('#area'+i)。如果您遇到问题，将 firefox 与 firebug 结合使用可能会有所帮助。您可以添加如下行：

console.log( i );

到for 循环以跟踪 i 的值，因为它在各个阶段中递增。