风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-1 22

jquery-parent

Category:jquery学习 View: Author:燕子

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

一下内容来自文档：

取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。

返回值

jQuery

参数

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

示例

查找每个段落的父元素

HTML 代码:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

$("p").parent()

结果:

[ <div><p>Hello</p><p>Hello</p></div>]

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

HTML 代码:

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

jQuery 代码:

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

结果:

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

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

那么现在有个一个table

XML/HTML代码
  1. <table width="968" border="0" cellspacing="1" cellpadding="" bgcolor="#CCCCCC" id="beiju">  
  2.   <tr>  
  3.     <TD><span class="zengmore" >...全部</span>  
  4.                      <div class="more" >  
  5.                      交易  　交易<br />  
  6.                      续费　  续费</div></td>  
  7.     <TD> <span  class="zengmore" >...全部</span>  
  8.                      <div class="more">  
  9.                      交易  　交易<br />  
  10.                      续费　  续</div></td>  
  11.   </tr>  
  12.   <tr>  
  13.     <TD><span  class="zengmore" >...全部</span>  
  14.                      <div class="more">  
  15.                      交易  　交易<br />  
  16.                      续费　  续费</div></td>  
  17.     <TD> <span  class="zengmore">...全部</span>  
  18.                      <div class="more">  
  19.                      交易  　交易<br />  
  20.                      续费　  续费</div></td>  
  21.   </tr>  
  22. </table>  

 

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

JavaScript代码
  1. <script src="js/jquery.js" type="text/javascript"></script>   
  2. <script type="text/javascript">   
  3. jQuery(function($){   
  4.     $('#beiju .zengmore').toggle(   
  5.         function(){$(this).parent().parent().find('span').html("折叠").parent().parent().find('div').fadeIn();},   
  6.         function(){$(this).parent().parent().find('span').html("展开").parent().parent().find('div').fadeOut();}   
  7.         //$(this).parent().parent().find('span').html("。。。收起").parent().parent().find('div').slideToggle('normal');   
  8.     //});   
  9.     );   
  10. });   
  11.   
  12. </script>  

 

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

 

本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/jquery-parent.html

jquery   评论(0)

相关文章:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。