jquery-parent - PHPABC.CN

jquery中我们很多时候都需要用电脑parent。

一下内容来自文档：
取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。
返回值

jQuery
参数

expr (String) : (可选)用来筛选的表达式
示例

查找每个段落的父元素

<div><p>Hello</p><p>Hello</p></div>
</pre >
<pre lang="JavaScript">
$("p").parent()
</pre >
结果:
<pre lang="html">
[ <div><p>Hello</p><p>Hello</p></div>]

查找段落的父元素中每个类名为selected的父元素。

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

$("p").parent(".selected")

[ <div class="selected"><p>Hello Again</p></div> ]

自己总结：那么父集的父集就是.parent().parent() ;

那么现在有个一个table

<table width="968" border="0" cellspacing="1" cellpadding="" bgcolor="#CCCCCC" id="beiju">  
  <tr>  
    <TD><span class="zengmore" >...全部</span>  
                     <div class="more" >  
                     交易  　交易<br />  
                     续费　  续费</div></td>  
    <TD> <span  class="zengmore" >...全部</span>  
                     <div class="more">  
                     交易  　交易<br />  
                     续费　  续</div></td>  
  </tr>  
  <tr>  
    <TD><span  class="zengmore" >...全部</span>  
                     <div class="more">  
                     交易  　交易<br />  
                     续费　  续费</div></td>  
    <TD> <span  class="zengmore">...全部</span>  
                     <div class="more">  
                     交易  　交易<br />  
                     续费　  续费</div></td>  
  </tr>  
</table>

我要点击同一个tr内其中任意一个全部，让其同行的class=zengmore的div都打开，点击折叠的时候让其都折叠，那么我们就应该在点击一个span的时候就要找到改span所在行的所有div，这时候就要用到parent了，而且是.parent().parent(),然后找到div当然我们就用find（）了，我们来看看js code。

<script src="js/jquery.js" type="text/javascript"></script>   
<script type="text/javascript">   
jQuery(function($){   
    $('#beiju .zengmore').toggle(   
        function(){$(this).parent().parent().find('span').html("折叠").parent().parent().find('div').fadeIn();},   
        function(){$(this).parent().parent().find('span').html("展开").parent().parent().find('div').fadeOut();}   
        //$(this).parent().parent().find('span').html("。。。收起").parent().parent().find('div').slideToggle('normal');   
    //});   
    );   
});   
 
</script>

大家有兴趣的不妨把代码复制下来试试！

发表评论 取消回复

发表评论取消回复