先理解一下jquery中.parent()和.parents()的区别:
我们直接看例子来来说明一下这三个方法的使用区别:
<ul id="menu" style="width:100px;"> <li> <ul> <li> <a href="#">Home</a> </li> </ul> </li> <li>End</li> </ul>
接下来,分别看看这三个方法:
//点击Home时 $("#menu a").click(function() { $(this).parent("ul").css("background", "yellow"); //0 $(this).parent("li").parent("ul").css("background", "yellow"); //1 $(this).parents("ul").css("background", "yellow"); //2 $(this).closest("ul").css("background", "yellow"); //3 return false; });
1.parent()方法从指定类型的直接父节点开始查找,在"0"中,<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>,接着找到<ul>,并将它的背景色设置为yellow。parent()返回一个节点。
2.parents()方法查找方式同parent()方法类似,不同的一点在于,当它找到第一的父节点时并没有停止查找,而是继续查找,最后返回多个父节点,如在"2"中,使得id为menu的ul整个背景色变成了yellow。
3.closest()方法查找时从包含自身的节点找起,它同parents()很类似,不同点就在于它只返回一个节点如在"3"中,实现的功能同1相同。但它使得代码量减小,同"2"相比又只返回单一的一个节点。可见,closest()方法在项目中的使用频率是比较大的。
以上内容转自:http://blog.163.com/xujunyan2008@126/blog/static/1205516201172821347594/然后我想实现treeview和checkbox的绑定,如下代码:
html:
<div class="appList" id="@("role" + role.Id)" style="border-left:1px solid #cfcfcf;border-right:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;">
<ul class="qx_01">
<li><span><input type="checkbox" value="1" name="p" >1111</input></span>
<ul class="qx_02">
<li><span><input type="checkbox" value="10" name="cc">101010</input></span><div class="clear"></div>
<ul class="qx_03">
<li><input type="checkbox" value="20" name="c" >202020</input></li>
<li><input type="checkbox" value="21" name="c" >212121</input></li>
<li><input type="checkbox" value="22" name="c" >222222</input></li>
</ul>
<div class="clear"></div>
</li>
<li><span><input type="checkbox" value="11" name="cc">111111</input></span><div class="clear"></div></li>
<li><span><input type="checkbox" value="12" name="cc">121212</input></span><div class="clear"></div></li>
</ul>
<div class="clear"></div>
</li>
<li><span><input type="checkbox" value="2" name="p" >2222</input></span></li>
<li><span><input type="checkbox" value="3" name="p" >3333</input></span></li>
</ul>
</div>
$(".appList input[type='checkbox']").click(function () {
//子目录
var c = $(this).parent().parent('li').children('ul').find("input");
var b = $(this).attr('checked');
c.each(function () {
if (b == "checked") {
$(this).attr('checked', b);
} else {
$(this).attr('checked', false);
}
});
//父目录
var p = $(this).parents('li'); //父目录
p.each(function () {
var m = $(this).children('ul').find('input');
var count = 0;
m.each(function () {
if ($(this).attr('checked') == "checked") {
count++;
}
});
var o = $(this).find('input');
if (count > 0) {
o[0].checked = true;
} else {
o[0].checked = b == "checked" ? b : false;
}
});
if (b == "checked") {
$(this).attr('checked', b);
} else {
$(this).attr('checked', false);
}
});