[英]Select All except Parents in Jquery
I Have Following codes: 我有以下代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$("#ThisClick").anycommand();
</script>
</head>
<body>
<ul id="TopUl">
<li>First<ul>
<li>One<ul>
<li>liA1</li>
<li>liA2</li>
</ul>
</li>
<li>Two<ul>
<li id="ThisClick">liB1</li>
<li>liB2</li>
</ul>
</li>
</ul>
</li>
<li>Second<ul>
<li>li1<ul>
<li>liF1</li>
<li>liF2</li>
</ul>
</li>
<li>li2</li>
</ul>
</li>
</ul>
</body>
</html>
I need collaps all UL's that are not parents of liB1 (#ThisClick) when clicking. 单击时,我需要折叠不是liB1(#ThisClick)父母的所有UL。 In other words by click on liB1 I want have following code:
换句话说,通过单击liB1,我想要以下代码:
<ul id="TopUl">
<li>First<ul>
<li>One<ul style="display:none">
<li>liA1</li>
<li>liA2</li>
</ul>
</li>
<li>Two<ul>
<li id="ThisClick">liB1</li>
<li>liB2</li>
</ul>
</li>
</ul>
</li>
<li>Second<ul style="display:none">
<li>li1<ul style="display:none">
<li>liF1</li>
<li>liF2</li>
</ul>
</li>
<li>li2</li>
</ul>
</li>
</ul>
Then Jquery may collapse all not parented UL tags. 然后,jQuery可能折叠所有未父代的UL标签。 What is the solution?
解决办法是什么? how can I do for this propose?
我该怎么办?
This icky looking selector should work: 这个看起来不错的选择器应该可以工作:
$("ul :not(:has(#ThisClick))").hide();
References: :not()
and :has()
参考::
:not()
和:has()
So, this bit of code will make all the elements that are not parents of the element you clicked, hide. 因此,这段代码将隐藏所有不是您单击的元素的父元素。 Change the first selector (
$("#ThisClick")
) as needed, right now it only works on the <li>
that you've specified the ThisClick
ID on, and you can only use an ID once. 根据需要更改第一个选择器(
$("#ThisClick")
),现在它只能在您指定了ThisClick
ID的<li>
上使用,并且只能使用一次ID。
$("#ThisClick").click(function() {
$("ul :not(:has(this))").hide();
});
To make this work on all <li>
s that are in your <ul>
, you could do this: 如果要对所有这些工作
<li>
S中的在<ul>
你可以这样做:
$("#TopUl li").click(function() {
$("ul :not(:has(this))").hide();
});
This adds the click event to all <li>
s in your list. 这会将click事件添加到列表中的所有
<li>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.