Menu
I am trying to add a unique ID to each div with the class of "owl-item". I would like the ID's to go in number order if possible starting with <div id="slide-1"... and so on. I can't seem to target the "owl-item" div's but only the div's inside of "owl-item" that have no ID or class assigned. How can I modify my javascript to achieve this? I cannot modify 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(""); 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(""); 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(""); 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(""); 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(""); 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(""); 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(""); 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);
}
});
359
Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.
Yes, any HTML element (like div, input, nav, body, etc) can have both “id” and “class” together and at the same time. The only difference here is that “id” can have only one unique value and “class” can have more than one.
Using The id AttributeThe value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
Use the id attribute in HTML to add the unique id of an element.
Get all the div with class owl-item inside the container with id sample_slider.
Use jQuery each to cycle to all these elements and set as attribute the slide- prefix and the current index + 1 if you want to start from 1, remove the +1 if you want to start from 0
$.each($('#sample_slider div.owl-item'), function(ind) {
$(this).attr('id', 'slide-' + parseInt(ind + 1));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
