JQuery for loop over embedded elements in a HTML string

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:

screenshot

Adriano Carneiro · Accepted Answer · 2012-11-14 15:34:53Z

3

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
})

answered Nov 14, 2012 at 15:34

Adriano Carneiro

58.8k12 gold badges94 silver badges123 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2012-11-14 15:36:23Z

1

You can use a selector as you normally would, just using the HTML string as a context. Try this:

$('li', $(myHTMLString)).each(function() {
    // do something with the li
});

answered Nov 14, 2012 at 15:36

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Magus · Accepted Answer · 2012-11-14 15:34:45Z

0

You can find all li in your list :

var liElements= $(myHTMLString).find('li');

answered Nov 14, 2012 at 15:34

Magus

15.1k4 gold badges40 silver badges52 bronze badges

Comments

Vogel612 · Accepted Answer · 2012-11-14 15:44:20Z

0

well as it is not only li elements i guess i would walk down the child nodes

function searchli(object){
for each element in $(this).children()
{
if $(this) is li
{
add to selection;
}
call searchli($('this'));
}
next element;
return selection;
};

call searchli($('#list'))

i would select via assigning class select or attribute select and querying this in "main" again. so this is basically a recursive function that walks through every child node of the initial selection, even though it will most probably not work exactly that way

answered Nov 14, 2012 at 15:44

Vogel612

5,6535 gold badges54 silver badges79 bronze badges

Collectives™ on Stack Overflow

JQuery for loop over embedded elements in a HTML string

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related