CODEWITHSUNDEEP
jquery
Madison320
Madison320

Reputation: 257

How to access elements in an unordered list using jquery

I'm trying to figure out how to access elements using jquery's .each function.

I have an unordered list of checkboxes and labels and I want to be able to access the data so I can do various things like check all the boxes or get the values in the selected labels.

I'm assuming I can rig it so that I can use the ID property to do this but I thought it would be more versatile if I actually knew how the .each statement works. :)

Primarily I'm interested in putting the selected label values into an array but any generic info would be appreciated.

$(document).on("click", "#test-button", function() {

  $("#test-ul li").each(function(i, item) {

    alert(item.children[0].value); //works
    alert(item.children(".label")[0].value); //doesnt work

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='test-ul'>
  <li>
    <input type='checkbox' id='1' class='checkbox' value='111' />
    <label class='label' for='1' value='aaa'>aaa</label>
  </li>
  <li>
    <input type='checkbox' id='2' class='checkbox' value='222' />
    <label class='label' for='2' value='bbb'>bbb</label>
  </li>
  <li>
    <input type='checkbox' id='3' class='checkbox' value='333' />
    <label class='label' for='3' value='ccc'>ccc</label>
  </li>
</ul>

<button id="test-button">Test</button>

Upvotes: 0

Views: 417

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Inside the <li>'s .each() use: $(this).find(":checkbox")

$(document).on("click", "#test-button", function() {

  $("#test-ul li").each(function() {

    const $inp = $(this).find(":checkbox");
    const $lab = $(this).find("label");
    
    console.log(`Value: ${$inp.val()} Checked: ${$inp.prop("checked")} Label: ${$lab.text()}`); 

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='test-ul'>
  <li>
    <input type='checkbox' id='1' class='checkbox' value='111' />
    <label class='label' for='1' value='aaa'>aaa</label>
  </li>
  <li>
    <input type='checkbox' id='2' class='checkbox' value='222' />
    <label class='label' for='2' value='bbb'>bbb</label>
  </li>
  <li>
    <input type='checkbox' id='3' class='checkbox' value='333' />
    <label class='label' for='3' value='ccc'>ccc</label>
  </li>
</ul>

<button id="test-button">Test</button>

Otherwise you could use the second Element parameter .each(index, Element) which is also useful if you'd like to use Arrow Functions:

$(document).on("click", "#test-button", () => {

  $("#test-ul li").each((i, item) => {
  
    // `this` will not work here since it's not the expected scope
    // so we can use the second argument `item` Element
    
    const $inp = $(item).find(":checkbox");
    console.log(`Value: ${$inp.val()} Checked: ${$inp.prop("checked")}`); 

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='test-ul'>
  <li>
    <input type='checkbox' id='1' class='checkbox' value='111' />
    <label class='label' for='1' value='aaa'>aaa</label>
  </li>
  <li>
    <input type='checkbox' id='2' class='checkbox' value='222' />
    <label class='label' for='2' value='bbb'>bbb</label>
  </li>
  <li>
    <input type='checkbox' id='3' class='checkbox' value='333' />
    <label class='label' for='3' value='ccc'>ccc</label>
  </li>
</ul>

<button id="test-button">Test</button>

Upvotes: 1

aron.duby
aron.duby

Reputation: 2261

item is the raw dom element, not jquery, that's why the first one works and the second doesn't. Change the second one to $(item) and it will work

Upvotes: 1

Related Questions