Can not get the children nodes by using JQuery

[matthew]

Hi,

I have a very simple tree view by using html tags as below:

I try to use jQuery to loop through the data for each level.

When I called the chidlren("li") function, it's supposed to return the nodes in next level.

But it returned null.
 

        // loop the second level
        // second level 2
        $("ul#treeview > li > ul > li").each(function () {

            var parentId = "parentId";
            var parentText = $(this)[0].firstChild.textContent;
            
            // go down to the next level    <-- the method children("li") return null, but it's supposed to return the li element in the next level
            $(this).children("li").each(function () {
                //alert($(this).text());
                var subId = "ChildId";
                var subText = $(this).text();
               // alert(subId + " " + subText);
                
                var subItem = { id: subId, name: subText };
                // add the item into array
                subData.push(subItem);
            });


           // var subItems = subData;
            var item = { id: parentId, name: parentText, items: subData };


            data.push(item);
        });

    <ul id="treeview">
        <li data-expanded="true">
            <span class="k-sprite folder"></span>Active Adapters
                <ul>
                    <li data-expanded="true">
                        <span class="k-sprite folder"></span>Adapter 1
                                <ul>
                                    <li><span class="k-sprite html"></span>
                                        <input type="checkbox" id="1" style="margin-bottom: 5px;" /><a href="#" class="bootstrap-custom-link1">Sub1</a></li>
                                    <li><span class="k-sprite html"></span>
                                        <input type="checkbox" id="2" style="margin-bottom: 5px;" /><a href="#" class="bootstrap-custom-link1">Sub2</a>   </li>
                                </ul>
                    </li>
                    <li data-expanded="true">
                        <span class="k-sprite folder"></span>Adapter 2
                                <ul>
                                    <li><span class="k-sprite html"></span>
                                        <input type="checkbox" id="3" style="margin-bottom: 5px;" />&nbsp;<a href="#" class="bootstrap-custom-link1">Instance 1</a></li>
                                    <li><span class="k-sprite html"></span>
                                        <input type="checkbox" id="4" style="margin-bottom: 5px;" />&nbsp;<a href="#" class="bootstrap-custom-link1">Instance 2</a></li>
                                </ul>
                    </li>
    </ul>

[Nohinn]

$(this).children("li").each(function () {

               //alert($(this).text());

               var subId = "ChildId";

               var subText = $(this).text();

              // alert(subId + " " + subText);

                

               var subItem = { id: subId, name: subText };

               // add the item into array

               subData.push(subItem);

           });

$(this) makes reference to the 2nd level li element. The children method just goes down 1 level through the dom tree, so it is trying to find an li element inside another li element.

$(this).children('ul').children('li')

This would look for ul elements inside the 2nd level li elements and for their li children elements.