Each loop with jQuery data attributes not working properly

Question

<ul class='list-container'>
<li class='list-item' data-level='parent_level'>
    <ul>
        <li data-level='child_level'> Child 1</li>
        <li data-level='child_level'> Child 2</li>
    </ul>
</li>

<li class='list-item' data-level='parent_level'>
    <ul>
        <li data-level='child_level'> Child 3</li>
        <li data-level='child_level'> Child 4</li>
    </ul>
</li>

This is my HTML code.

I want to print each element in child list. I want to use data-attributes for the same. I tried fetching elements with class. It's working fine.

var list = $('list-container');
list.each(function(){console.log($(this).html())});

With this code I got Following HTML content in output.

 <li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 1</li>
    <li data-level="child_level"> Child 2</li>
  </ul>
</li>


<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 3</li>
    <li data-level="child_level"> Child 4</li>
  </ul>
</li>

When I tried same thing using data attributes as follow:

var list= $.find("[data-level='parent_level']");
list.forEach(function(){console.log($(this).html())});

Output of log is 'undefined'.

Replacing '.forEach' with '.each' giving error as '.each is not a function'.

list.each(function(){console.log($(this).html())});

Did you try using $("[data-level='parent_level']").each(...)? — 31piy
– 31piy, Commented May 30, 2017 at 11:15
$("[data-level='parent_level']").each(...) worked for me. Thanks :) — kavita jadhav
– kavita jadhav, Commented May 30, 2017 at 15:16

Super User · Accepted Answer · 2017-05-30 12:08:32Z

1

You have some selector issues in your script, check updated snippet below..

var list = $('.list-container');
list.each(function(){console.log($(this).html())});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-container'>
<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 1</li>
    <li data-level="child_level"> Child 2</li>
  </ul>
</li>
</ul>


<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 3</li>
    <li data-level="child_level"> Child 4</li>
  </ul>
</li>

edited May 30, 2017 at 12:08

answered May 30, 2017 at 11:15

Super User

9,6623 gold badges34 silver badges48 bronze badges

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

1 Comment

Jamiec Over a year ago

You've missed out the ul with the actual css class you're targetting - so no output from console.log

Carsten Løvbo Andersen · Accepted Answer · 2017-05-30 11:16:32Z

You dont need to use .find() just call it like var list = $("[data-level='parent_level']");

Even better, $("[data-level='parent_level']").each() will save you a line.

If you don't want the ul that it currently prints, just write: $("[data-level='parent_level'] ul")

var list = $("[data-level='parent_level']");


list.each(function() {
  console.log($(this).html())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-container'>
  <li class='list-item' data-level='parent_level'>
    <ul>
      <li data-level='child_level'> Child 1</li>
      <li data-level='child_level'> Child 2</li>
    </ul>
  </li>

  <li class='list-item' data-level='parent_level'>
    <ul>
      <li data-level='child_level'> Child 3</li>
      <li data-level='child_level'> Child 4</li>
    </ul>
  </li>
</ul>

Collectives™ on Stack Overflow

Each loop with jQuery data attributes not working properly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related