Clever Geek Handbook

How can I assign a unique id to all divs that have a specific class using JQuery

I am trying to add a unique id for each div with the "owl-item" class. I would like the id to be in order of quantity, if possible, starting from <div id="slide-1"...

and so on. I can't seem to target the "owl-item" div, but only the divs inside the "owl-item" that have no id or class. How can I change my javascript to achieve this? I cannot change the 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);
    }
});
+3


source to share


4 answers


Get all divs with class owl-item

inside container with id sample_slider

. Use jQuery to cycle through all of these elements and set the attribute to prefix slide-

and current index + 1

, if you want to start at 1, remove +1 if you want to start at 0



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


source


Your code works, although you are using the wrong selector ( #sample_slider div

).

Instead, you need to set up targeting .owl-item

.

So, you should do something like this:



$('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>
Run codeHide result


You should also use .prop()

instead .attr()

.

0


source


This does what you ask. It finds all the elements of a class owl-item

and then adds the corresponding ID to that element. I might suggest using my second example - adding a class, not an 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));
});

This example has added a class, not an identifier. I think this is the best solution.

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


source


I would do something like this:

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

Unique identifiers should be displayed for you, for example:

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


source






More articles:


All Articles