jQuery.each - Getting li elements inside an ul

Question

I have this HTML on my page:

<div class="phrase">     <ul class="items">         <li class="agap"><ul><li>TEXT1</li></ul></li>         <li class="agap"><ul>  </ul></li> <!-- empty ul -->         <li class="aword">TEXT2</li>         ..     </ul> </div>  <div class="phrase"> ... </div> 

I would like to get for each "phrase" all the elements in "items" in a text variable, like this:

var string = "TEXT1 - BLANK - TEXT2"; 

I currently have this javascript code:

<script> $(function() {     $('.phrase .items').each(function(){         var myText = "";          // At this point I need to loop all li items and get the text inside         // depending on the class attribute          alert(myText);      }); }; </script> 

How can I iterate all <li> inside .items?

I was trying different ways but I didn't get good results.

Answer 1

First I think you need to fix your lists, as the first node of a <ul> must be a <li> (stackoverflow ref). Once that is setup you can do this:

// note this array has outer scope var phrases = [];  $('.phrase').each(function(){         // this is inner scope, in reference to the .phrase element         var phrase = '';         $(this).find('li').each(function(){             // cache jquery var             var current = $(this);             // check if our current li has children (sub elements)             // if it does, skip it             // ps, you can work with this by seeing if the first child             // is a UL with blank inside and odd your custom BLANK text             if(current.children().size() > 0) {return true;}             // add current text to our current phrase             phrase += current.text();         });         // now that our current phrase is completely build we add it to our outer array         phrases.push(phrase);     });     // note the comma in the alert shows separate phrases     alert(phrases); 

Working jsfiddle.

One thing is if you get the .text() of an upper level li you will get all sub level text with it.

Keeping an array will allow for many multiple phrases to be extracted.

---

EDIT:

This should work better with an empty UL with no LI:

// outer scope var phrases = [];  $('.phrase').each(function(){     // inner scope     var phrase = '';     $(this).find('li').each(function(){         // cache jquery object         var current = $(this);         // check for sub levels         if(current.children().size() > 0) {             // check is sublevel is just empty UL             var emptyULtest = current.children().eq(0);              if(emptyULtest.is('ul') && $.trim(emptyULtest.text())==""){                 phrase += ' -BLANK- '; //custom blank text                 return true;                } else {              // else it is an actual sublevel with li's              return true;                }         }         // if it gets to here it is actual li         phrase += current.text();     });     phrases.push(phrase); }); // note the comma to separate multiple phrases alert(phrases); 

Answer 2

$(function() {     $('.phrase .items').each(function(i, items_list){         var myText = "";          $(items_list).find('li').each(function(j, li){             alert(li.text());         })          alert(myText);      }); };