title: How can I assign a unique ID to all div's that have a specific class using JQuery
body: <p>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 <code>&lt;div id="slide-1"...</code> 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. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="sample_slider" class="owl-carousel owl-pagination-true autohide-arrows owl-theme" style="opacity: 1; display: block;"&gt;
     &lt;div class="owl-wrapper-outer"&gt;
        &lt;div class="owl-wrapper" style="width: 5456px; left: 0px; display: block;"&gt;
  
           &lt;div class="owl-item" style="width: 682px;"&gt;
              &lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div class="owl-item" style="width: 682px;"&gt;&lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div class="owl-item" style="width: 682px;"&gt;&lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
           &lt;div class="owl-item" style="width: 682px;"&gt;&lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;div style="padding:5% 5%; margin:0px 0%; min-height:100px; background-image:url(&amp;quot;&amp;quot;); background-position:left top; background-size:contain; background-repeat:no-repeat; background-color:rgb(248, 248, 248); "&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  JQuery</p>
  
  <pre><code>$('#sample_slider div').each(function(eq, el) {
      el = $(el);
      if(typeof(el.attr('id')) === "undefined") {
          el.attr('id', 'div-' + eq);
      }
  });
  </code></pre>