Question

我有两个div具有相同的class名称，所以当通过为id创建div来附加元素时，我会获得元素{{1两个id s中的元素的名称相同。

示例：

div

我使用<div class="nav"> <div class="example" id="example_1"> </div> </div> <div class="nav"> <div class="example" id="example_2"> </div> </div>语法

jquery

其中$(".nav").append(example)递增。

如何使用example_i制作不同的id？

Answer 1

$('.nav').each(function(i,v){


$(this).append('<div id=example_'+i+'>example_'+i+'</div>')//use index of each .nav index starts at zero so if you need to start at 1 add 1 to index

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">

</div>
<div class="nav">

</div>

Answer 2

如果你不添加简单的html字符串，你可以使用这样的东西。首先使example成为jQuery对象，如果它还不是。然后，您可以轻松操纵属性。

var $example = $(example),
    idPre = 'example_',
    count = 1;
$(".nav").each(function() {
    $(this).append($example.clone().attr('id', idPre + count));
    count++;
})

Answer 3

简化guradio的答案，append()也可以采用一个函数，该函数根据当前索引返回元素。这样可以避免额外的each()循环并重新创建$(this)。

$('.nav').append(function(i,v){

    //use index of each .nav index starts at zero so if you need to start at 1 add 1 to index
    return $('<div id=example_'+i+'>example_'+i+'</div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">

</div>
<div class="nav">

</div>

Answer 4

这是真实的答案，我自己测试过。如果不添加简单的html字符串，则可以使用类似的方法。首先将示例作为jQuery对象（如果尚未创建）。然后，您可以轻松地操纵属性。

var $example = $(example),
    idPre = 'example_',
    count = 1;
$(".nav").each(function() {
    $(this).append($example.clone().attr('id', idPre + count));
    count++;
});

如何使用jquery为相同的类元素生成不同的id

4 个答案: