如何使用JQuery为具有特定类的所有div分配唯一ID？

Question

我正在尝试为每个类名为“owl-item”的div添加唯一的ID。如果可能的话，我希望ID按顺序排列，从<div id="slide-1"...开始。但是我似乎无法针对“owl-item” div进行操作，只能针对未分配ID或类的“owl-item”内部的div进行操作。如何修改我的javascript代码以实现此目的？我不能修改html。

HTML

<div id="sample_slider" class="owl-carousel owl-pagination-true autohide-arrows owl-theme" style="opacity: 1; display: block;">
   <div class="owl-wrapper-outer">
      <div class="owl-wrapper" style="width: 5456px; left: 0px; display: block;">

         <div class="owl-item" style="width: 682px;">
            <div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            </div>
         </div>

         <div class="owl-item" style="width: 682px;"><div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            <div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            </div>
         </div>

         <div class="owl-item" style="width: 682px;"><div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            <div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            </div>
        </div>

         <div class="owl-item" style="width: 682px;"><div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            <div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&quot;&quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); ">
            </div>
         </div>
      </div>
   </div>
</div>

jQuery

$('#sample_slider div').each(function(eq, el) {
    el = $(el);
    if(typeof(el.attr('id')) === "undefined") {
        el.attr('id', 'div-' + eq);
    }
});

- kma1289

---

元素ID在整个文档中应该是唯一的，这是必须要遵守的。 - PM 77-1

你能解释一下为什么你想要分配ID吗？也许你的最终目标可以通过其他方式更好地实现。 - devlin carnate

@devlincarnate，我提供了一个添加类而不是ID的解决方案。我同意分配ID并不是最好的想法。 - blackandorangecat

我想设置锚点链接，以便在单击时转到特定幻灯片。 - kma1289

@Dambr7：你可能可以使用DOM遍历来完成这个任务。此外，使用类来进行CSS样式设置会比所有的内联样式更加有益;) - devlin carnate

Answer 1

获取id为sample_slider的容器内所有类为owl-item的

元素。 使用jQuery的each方法循环遍历这些元素，并设置属性为slide-前缀和当前索引+1（如果想从1开始则保留+1，如果想从0开始则去掉+1）。

$.each($('#sample_slider div.owl-item'), function(ind) {
   $(this).attr('id', 'slide-' + parseInt(ind + 1));
});

- quirimmo

---

@不错。我不知道如何访问$.each函数的索引。谢谢。 - blackandorangecat

不得不将代码包裹在 $(window).load(function() 中，现在可以正常工作了 :) 谢谢 - kma1289

抱歉，我正在吃晚饭。是的，我确定你已经在那里编码了。尝试使用$(document).ready(function() {});。它也应该有效，并且最好使用该事件。 - quirimmo

Answer 2

你的代码可以运行，但是你使用了错误的选择器（#sample_slider div）。

你需要改为选择 .owl-item。

所以，你应该像这样做：

$('div.owl-item').each(function(eq, el) {
  el = $(el);
  if (typeof(el.attr('id')) === "undefined") {
    el.prop('id', 'div-' + eq);
    console.log(el.prop('id'));
  }
});

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

</div>
<div class="owl-item">

</div>
<div class="owl-item">

</div>
<div class="owl-item">

</div>
<div class="owl-item">

</div>
<div class="owl-item">

</div>

你应该使用 .prop() 而不是 .attr()。

- apires

Answer 3

这个代码会完成你的要求。它会找到所有带有 owl-item 类的元素，并为该元素添加适当的ID。我建议使用我的第二个示例 - 添加一个类而不是ID。

//Iterate through each element with the class of 'owl-item'
$('.owl-item').each(function(eachCounter){

    //Add an ID to each element (slide-#) (eachCounter starts at 0, so add 1)
    $(this).attr("id", "slide-"+parseInt(eachCounter+1));
});

这个例子添加了一个类而不是ID。我认为这是一个更好的解决方案。

//Iterate through each element with the class of 'owl-item'
$('.owl-item').each(function(eachCounter){

   //Add a class to each element (slide-#) (eachCounter starts at 0, so add 1)
   $(this).addClass("slide-"+parseInt(eachCounter+1));
});

- blackandorangecat

Answer 4

我会这样做：

$(document).ready(function() {
    $(".owl-item").each(function(i) {
        $(this).attr('id', "owl-item" + (i + 1));
    });
});

应该为您输出唯一的ID选择器，例如：

#owl-item1,
#owl-item2,
#owl-item3 {
   color: $pink; // sample
}

- Coastal-Cam