Question

<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div> 
<div class="leaflet-marker-icon"></div>

这些是地图生成的div，它包含相同的类为leaflet-marker-icon。对于每个div，我想添加一个id属性，其中包含唯一的Ex {id=0，id=1，id=2，id=3};

我的代码是：

var length = $('.leaflet-marker-icon').length;
for (var x = 0; x < length; x++) {
    $('.leaflet-marker-icon').attr('id', x);
}

在for循环中，它总是采用相同的id，因为$('.leaflet-marker-icon').attr('id', x)是一个类。任何人都可以建议如何在课堂上添加唯一的ID。

Answer 1

继续您的解决方案:( 我不知道为什么人们会尝试展示他们所知道的并且不会纠正您）

试试这个：

var _=$('.leaflet-marker-icon'); //let's cache the array
 var length = _.length; //let's cache the  length
    for(var x=0; x<length; x++) {
        _.eq(x).prop('id', x);
    }

示例：http://jsbin.com/vuzuhe/2/edit

Answer 2

在for循环中使用:eq选择器。

$('.leaflet-marker-icon:eq(' + x + ')').attr('id', x);

Answer 3

由于您的选择器是类，因此您应该知道它返回一个集合。所以在你的情况下你可以使用它：

$('.leaflet-marker-icon').attr('id', function(i) {
  return i;
});

当您使用jquery并为元素设置唯一ID时，可以使用.attr('attribute', fn)。

$('.leaflet-marker-icon').attr('id', function(i) {
  return i;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leaflet-marker-icon">leaflet-marker-icon1</div>
<div class="leaflet-marker-icon">leaflet-marker-icon2</div>
<div class="leaflet-marker-icon">leaflet-marker-icon3</div>
<div class="leaflet-marker-icon">leaflet-marker-icon4</div>

Answer 4

您可以使用.each()迭代元素并使用元素上下文（this）来设置其属性值：

$('.leaflet-marker-icon').each(function(i){
  this.id=i;
});

Working Demo

Answer 5

您应该在动态添加id时添加div，这样可以减少工作量。但如果你不能这样做，那么试试下面的代码

var count = 1;
$('.leaflet-marker-icon').each(function(){
  $(this).attr('id',count);
  count++;
});

根据Royi Namir的建议，以下是实现解决方案的另一种方法

$('.leaflet-marker-icon').each(function(i,n){
      $(this).attr('id',i);
 });

Answer 6

创建变量并将其设置为零。使用each()函数，添加等于此变量的id属性，并将变量增加1，以便分配给下一个元素。

检查div元素的结果：

＆＃13;

$(document).ready(function() {
  //var i = 0;
  $('.leaflet-marker-icon').each(function(i) {
    $(this).attr('id', i);
    //i++;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leaflet-marker-icon">1</div> 
 <div class="leaflet-marker-icon">2</div> 
 <div class="leaflet-marker-icon">3</div> 
<div class="leaflet-marker-icon">4</div>

＆＃13;

使用jquery动态地将div id添加到class元素

6 个答案:

Working Demo