This is a migrated thread and some comments may be shown as answers.

Can not get the children nodes by using JQuery

1 Answer 155 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
matthew
Top achievements
Rank 1
matthew asked on 10 Sep 2012, 06:04 AM
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>

1 Answer, 1 is accepted

Sort by
0
Nohinn
Top achievements
Rank 1
answered on 10 Sep 2012, 07:07 AM
$(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.
Tags
TreeView
Asked by
matthew
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
Share this question
or