jquery 中查找函数parent ，parents，find和children的一点研究

周六的时候做一个类似于微博的那个评论的效果，应该说是很简单的一个效果。



<ul>
		<li class="top1">
			<div class="box_input">我是来测试的1
				<a href="javascript:void(0);" class="show">收起</a><a href="javascript:void(0);" class="reply">回复</a>
			</div>
			<div class="box_input">我是来测试的2</div>
			<div class="box_output">我是来测试的3
				<br />回复:<input class="input_show" type="text"/>
			</div>
		</li>
	</ul>

结构大致如上，点击回复的时候class为box_output的那个div框会出来，里面是一个textarea框，可以输入信息，点击收起这个div就收起来。应该说是一个很简单的效果。好吧，我就来谈一下这几个函数在这个制作的过程中给我带来的困扰。

$(".show").click(function(){
				alert($(this).parents(".box_input").attr("class"));
			})
$(".show").click(function(){
				alert($(this).parent(".box_input").attr("class"));
			})




上面俩执行的结果都是box_input，没有问题，这是离show最近的父元素。来看看再上一级的父元素

$(".show").click(function(){
				alert($(this).parent(".top1").attr("class"));
			})
这个结果是undefined


$(".show").click(function(){
				alert($(this).parents(".top1").attr("class"));
			})

这个结果是top1。来看一下手册是怎么说的，parent取得一个包含着所有匹配元素的唯一父元素的元素集合；parents取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。parent找不到top1，我是不是可以认为是他的父级元素超过一，也就是不唯一了，所以选择器不能找到。所以结论如下：
如果要找最近一级的父元素可以parent和parents，祖父级以上只能用parents。（有点废话了，parent就是一个嘛，呵呵，不试验不知道）
下面是find和children，

$(".show").click(function(){
				alert($(this).parents(".top1").find(".box_output").attr("class"));
			})

$(".show").click(function(){
				alert($(this).parents(".top1").children(".box_output").attr("class"));
			})
这俩个正如我们期待的结果一样都是box_output


$(".show").click(function(){
				alert($(this).parents(".top1").children(".input_show").attr("class"));
			})

这个结果是undefined

$(".show").click(function(){

alert($(this).parents(".top1").find(".input_show").attr("class"));

})


这个结果是input_show。先来看一下手册，children取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，还特别注明——parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素；find搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。看完手册也很明确了，结论：
如果要查找最近一级的子元素可以用children和find，后代元素只能用find，当然find还有别的用途。
当然也不能说children和parent这俩个函数没用了，如果只查找最近一级的子元素和父级元素，就可以用他们。
写的比较简陋，大家见谅