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);
}
});
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);
}
});
- Element IDs should always be unique throughout the document. – PM 77-1 Commented May 19, 2017 at 17:40
- 1 Can you explain why you want to assign id's ? It's possible that your end goal is better achieved another way. – devlin carnate Commented May 19, 2017 at 17:40
-
@devlincarnate I provided a solution that adds a class rather than
ID. I agree that assigning ID's is not the best idea. – blackandorangecat Commented May 19, 2017 at 17:53 - I would like to set up anchor links to go to specific slides when clicked on – kma1289 Commented May 19, 2017 at 18:35
- @Dambr7 : you probably can use DOM traversal to do this. It also looks like you would benefit from using classes for CSS styling rather than all that inline style ;) – devlin carnate Commented May 19, 2017 at 20:46
4 Answers
Reset to default 14Get 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));
});
This does what you are asking. It finds all elements with the owl-item class and then adds the appropriate ID to that element. I might suggest using my second example - adding a class rather than 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 adds a class rather than an ID. I think this is a better 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));
});
I would do something like this:
$(document).ready(function() {
$(".owl-item").each(function(i) {
$(this).attr('id', "owl-item" + (i + 1));
});
});
Should output unique ID selectors for you to use, such as:
#owl-item1,
#owl-item2,
#owl-item3 {
color: $pink; // sample
}
Your code works, although, you're using a wrong selector (#sample_slider div).
You need to target .owl-item instead.
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./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>You should also use .prop() instead of .attr().