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.
<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;" /> <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;" /> <a href="#" class="bootstrap-custom-link1">Instance 2</a></li>
</ul>
</li>
</ul>
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);
});
// 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;" /> <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;" /> <a href="#" class="bootstrap-custom-link1">Instance 2</a></li>
</ul>
</li>
</ul>