“parent”是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
“parents”则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
使用区别:
[html] view plain copy
<ul id="menu" style="width:100px">
<li>
<ul>
<li> <a href="#">Home</a> </li>
</ul>
</li>
<li>End</li>
</ul>
接下来,分别看看这三个方法:
<script type="text/javascript">
//点击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
})
</script>
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()方法在项目中的使用频率是比较大的。
css的parent样式如何用directly?)
一般来说,当我们有一些应该一起设置样式的子元素时,我们应该将该样式放到父级并让继承工作,还是给孩子们自己? 例如,如果我们有如下结构:
<div class="foo">
<p>should be 2em</p>
<ul>
<li>should be 2em</li>
<li>should be 2em</li>
</ul>
</div>
然后我应该这样做:
.foo {font-size: 2em}
或类似的东西?:
.foo p, .foo li {font-size: 2em}
我认为这个问题非常基本,但很抱歉我找不到任何好的谷歌搜索结果。
Generally speaking, when we have some child elements that should be styled together, should we put that style to the parent and let the inheritance work, or to the children themselves? For example, if we have a structure as below:
<div class="foo">
<p>should be 2em</p>
<ul>
<li>should be 2em</li>
<li>should be 2em</li>
</ul>
</div>
then should I make it as this:
.foo {font-size: 2em}
or something like this?:
.foo p, .foo li {font-size: 2em}
I think this question is very basic, but sorry I couldn't find any good google result.