Question

我正在尝试使用“owl-item”类为每个div添加一个唯一的ID。如果可能的话，我希望ID从<div id="slide-1"...开始按顺序排列，依此类推。我似乎无法定位“owl-item”div，但只有“owl-item”内部的div没有分配ID或类。如何修改我的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);
    }
});

Answer 1

在ID为owl-item的容器中获取所有带有sample_slider类的div。使用jQuery循环到所有这些元素并将slide-前缀和当前index + 1设置为属性，如果你想从1开始，如果你想从0开始则删除+1

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

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()。

Answer 3

这就是你所要求的。它使用 owl-item 类查找所有元素，然后将相应的ID添加到该元素。我可能会建议使用我的第二个例子 - 添加一个类而不是ID。

＆＃xA;＆＃xA;

  //使用'owl-item'＆＃迭代每个元素xA; $（'。owl-item'）。each（function（eachCounter）{＆＃xA;＆＃xA; //为每个元素添加一个ID（slide-＃）（eachCounter从0开始，所以加1） ＆＃xA; $（this）.attr（“id”，“slide  - ”+ parseInt（eachCounter + 1））;＆＃xA;}）;＆＃xA;

＆＃xA ;＆＃xA;

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

＆＃xA;＆＃xA;

  //使用'owl-item'＆＃xA; $（'。owl）类遍历每个元素-item'）。each（function（eachCounter）{＆＃xA;＆＃xA; //为每个元素添加一个类（slide-＃）（eachCounter从0开始，所以加1）＆＃xA; $（这个）.addClass（ “幻灯片 - ” + parseInt函数（eachCounter + 1））;＆＃XA;}）;＆＃XA;

＆＃XA;

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
}

如何使用JQuery

4 个答案: