jQuery遍历--祖先、后代、同胞

jQuery遍历

祖先
1、parent()—返回所有被选元素的直接父元素。
2、parents()—返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。html也算。
3、parentsUntil—返回介于两个给定元素之间的所有祖先元素。不包含两个给定的元素
  下面的例子返回介于<span> 与<div> 元素之间的所有祖先元素:

   $(document).ready(function(){
 		 $("span").parentsUntil("div");
	 });

后代
1、children()–返回被选元素的所有儿子
2、find(参数)—返回被选元素里含符合参数的元素(算上子孙了)
   实例:

  <script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素)
	<span>儿子元素</span>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
</body>

同胞
1、siblings()—返回被选元素的所有同胞元素。可以用参数过滤(上下的同胞都包含)
   实例:

$(document).ready(function(){
  $("h2").siblings();
});

//使用参数来过滤
//属于 <h2> 的同胞元素的所有 <p> 元素:
   $(document).ready(function(){
  $("h2").siblings("p");
});

2、next()—返回被选元素的下一个同胞元素
   实例:

//()里加参数无效。也没有实际意义。
 $(document).ready(function(){
      $("h2").next();
    });

3、nextAll()—返回被选元素的下面所有跟随的同胞元素。
   实例:

//()里加参数无效。也没有实际意义。
$(document).ready(function(){
  $("h2").nextAll();
});

4、nextUntil()—返回介于两个给定参数之间的下面所有跟随的同胞元素。
   实例:

//返回h2下面到h6的所有元素:
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

5、prev()----返回被选元素的上一个同胞元素
   实例:

 //()里加参数无效。也没有实际意义。
     $(document).ready(function(){
          $("h2").prev();
        });

6、prevAll()—返回被选元素的上面所有跟随的同胞元素。
   实例:

 //()里加参数无效。也没有实际意义。
    $(document).ready(function(){
      $("h2").prevAll();
    });

7、prevUntil()----返回介于两个给定参数之间的上面所有跟随的同胞元素。
   实例:

//返回h2之前到p截止所有元素
<script>
    $(document).ready(function(){
    	$("h2").prevUntil("p").css({"color":"red","border":"2px solid red"});
    });
    </script>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值