How can I assign a unique ID to all div's that have a specific class using JQuery

Question

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(&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

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