Question

I have a basic string variable which stores HTML content.

The html in the string is a complex list like the following:

<ul>
<li>One
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</li>
<li>Two
  <ul>
    <li>d</li>
    <li>e</li>
    <li>f
      <ul>
        <li>g</li>
        <li>h</li>
        <li>i</li>
      </ul>
    </li>
  </ul>
</li>
<li>Three</li>

The above is a simplified example, but as you can see, the are an unknown number of list elements. A list element can contain another list. There is an unknown number of levels (a list element can have unknown (probably max 9) parent <ul>‘s.

Now when I turn this string into HTML I do the following:

var obj = $(myHTMLString);

However, this only returns the first level of list elements – So in the following for loop, only the first level is searched. I know how to search children elements (in the else section on the code), but I would require to do this for all levels of the list – which is unknown.

for (var i=0; i<obj.length;i++) {
    if ( obj[i].id == someOtherVariable ) {
        //we have found it
    }
}

Is there a way to search my html variable (obj) for all list elements?

I would like to add that when I console.log( $(myHTMLString) ); It looks like this:

Answer 1

Yes:

var lis = $(myHTMLString).find("li");

to iterate through them:

lis.each(function(index, li){
   //do your thing. i is the index in the array, li is the li element
})