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

问题出在您的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 2

$('#area'+i).append();应该有效！

您的代码确实有错误：

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

应该是：

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

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

但是，这些解决方案都没有真正为您做到 - 您实际上没有添加列表项。我使用obj迭代$.each，然后将列表项追加到同一个循环中，避免循环两次。假设您的列表项也包含在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个obj，则会根据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的值，因为它在阶段中递增。

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

6 个答案: