CODEWITHSUNDEEP
jquery
Eyal
Eyal

Reputation: 4763

Jquery, Cannot get the each li in Div

I have multiple <div class='ms-drop'> with many <li> items inside them. I am trying reach each <li> item.

I was trying several ways, this is what I got:

 $(function() {
       var counter = 0;
        $('.ms-drop').each(function() { // loop each div
            counter++;
            $(this).attr('id','ms-drop-' + counter); // here I am giving each div a it's own id > $(this) did not work!
            var id = $(this).attr('id');

            $('#ms-drop-' + id + ' il').each(function() {
                console.log("li"); // it does not reach here !
            });                        
        });
 });

HtML

<div class="ms-drop bottom" style="display: block;">
     <ul style="max-height: 250px;">           
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="60"><span>ABC</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="38"><span>DEF</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="45"><span>GHI</span></label></li>
        <li class=" " style="false"><label class=""><input type="checkbox" data-name="selectItem" value="2863"><span>JKL</span></label></li>
    </ul>
</div>


ABC DEF GHI JKL

Upvotes: 1

Views: 281

Answers (4)

Tibrogargan
Tibrogargan

Reputation: 4603

I believe this is perhaps a working version of your code:

$(function() {
    var counter = 0;
    $('.ms-drop').each(function() {
        $(this).attr('id','ms-drop-'+(counter++))
               .find('li')
               .each(function() {
                   console.log("li");
               });
    });
});

Upvotes: 0

rustygb
rustygb

Reputation: 306

You could simply use 'find()' to get array of li elements within each div.

$(function() { var counter = 0; $('.ms-drop').each(function() { // loop each div $(this).find('li').each(function(liElement){ console.log(liElement); });
}); });

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

You are attempting to target <il> elements instead of <li> elements within your function on account of a likely typo. Simply change the il to li and it should target the appropriate child <li> elements as seen below :

$('#ms-drop-' + id + ' li').each(function(){
      console.log("li");
});

Another issue here is that when you are actually setting your ID attribute and then appending that same value to "#ms-drop-" within your selector :

// This sets your ID to 'ms-drop-{counter}'
$(this).attr('id','ms-drop-' + counter);
// Now when you reference this, you'll get '#ms-drop-ms-drop-{counter} li'
$('#ms-drop-' + id + ' li').each(function(){ ... });

An easier approach since you already have the element in context, would simply be to use jQuery's context selector to target all of the li elements beneath your current "drop" :

$(this).attr('id','ms-drop-' + counter);
// Now when you reference this, you'll get '#ms-drop-ms-drop-{counter} li'
$('li',this).each(function(){ ... });

You could also consider using the find() function as well, which would work similarly :

$(this).find('li').each(function(){ ... });

Example

$(function() {
        var counter = 0;
        $('.ms-drop').each(function() {
            // Increment your counter
            counter++;
            // Set your ID
            $(this).attr('id','ms-drop-' + counter);
            $('li',this).each(function() {
                // Output the text (for example purposes)
                console.log($(this).text().trim()); 
            });                        
        });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-drop bottom" style="display: block;">
  <ul style="max-height: 250px;">
    <li class=" " style="false">
      <label class="">
        <input type="checkbox" data-name="selectItem" value="60"><span>ABC</span>
      </label>
    </li>
    <li class=" " style="false">
      <label class="">
        <input type="checkbox" data-name="selectItem" value="38"><span>DEF</span>
      </label>
    </li>
    <li class=" " style="false">
      <label class="">
        <input type="checkbox" data-name="selectItem" value="45"><span>GHI</span>
      </label>
    </li>
    <li class=" " style="false">
      <label class="">
        <input type="checkbox" data-name="selectItem" value="2863"><span>JKL</span>
      </label>
    </li>
  </ul>
</div>

Upvotes: 1

Sascha
Sascha

Reputation: 635

I removed the console.log-part, because I don't understand why you want to look up for them, when you aren't finished to create them.

$(function() {
       var counter = 0;
        $('.ms-drop ul li').each(function() { // loop each div
            counter++;
            $(this).attr('id','ms-drop-' + counter); // here I am giving each div a it's own id > $(this) did not work!
        });
});

Upvotes: 0

Related Questions