Can not get the children nodes by using JQuery

2 posts, 0 answers
  1. matthew
    matthew avatar
    10 posts
    Member since:
    Feb 2007

    Posted 10 Sep 2012 Link to this post

    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>
  2. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 10 Sep 2012 Link to this post

    $(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.
Back to Top