Eyal Eyal - 4 months ago 8
Javascript Question

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


Answer

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>

Comments