How to access elements in an unordered list using jquery

Question

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>

Roko C. Buljan · Accepted Answer · 2020-06-23 18:12:35Z

1

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>

edited Jun 23, 2020 at 18:12

answered Jun 23, 2020 at 18:07

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Madison320 Over a year ago

That works but it's going to take me awhile to digest that code. Burp. :)

Roko C. Buljan Over a year ago

@Madison320 it's a single line of code const $inp = $(this).find(":checkbox");. What part is giving your trouble with the above? I hope you know what console.log() is. What Tempate Literals are, what $inp.val() is or $inp.prop("checked"). Or...?

Roko C. Buljan Over a year ago

Don't confuse JavaScript Template literal's dollars `Hello ${ variableWorld }` with jQuery $() . In Template Literals the ${} is used to insert a variable inside a String :) developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Madison320 Over a year ago

I'm pretty new to jquery so there was a bunch of stuff I've never seen before: => ` const console.log were all new to me.

Roko C. Buljan Over a year ago

@Madison320 As I mentioned in my answer => are Arrow Functions developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

|

aron.duby · Accepted Answer · 2020-06-23 18:06:51Z

1

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

answered Jun 23, 2020 at 18:06

aron.duby

2,3222 gold badges17 silver badges25 bronze badges

1 Comment

Madison320 Over a year ago

That was close. It worked for the checkbox but not the label. I think it has something to do with certain types of elements not showing up in the children function?

Collectives™ on Stack Overflow

How to access elements in an unordered list using jquery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related