概述jQuery的元素筛选

2020-05-27 18:00:36易采站长站整理

  </div>

 十二、closest()  从当前元素开始,返回最先匹配到的符合条件的父元素


  $("span").closest("p","div");
  <div>                   //不会被选中,被P抢了先机
    <p>我是第一个P            //P会被选中,因为P符合条件,而且是最先匹配到的,虽然div也符合条件了,但是div不是最先匹配到的。因此div不会被选中。
      <span>我是P里的span</span>
    </p>
  </div>  

十三、find()    从指定元素中查找子元素

   语法:find(expr|obj|ele)  expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素


  $("div").find(".p2");    
  <div>
    <p>我是第一个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2
    <p class="p2">我是第二个P</p>  //会被选中,我既是p的子元素,又有class=p2
    <p>我是第三个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2
    <p>我是第四个P</p>         //不会被选中,虽然我是div的子元素,但是我没class=p2
  </div>  

十四、next()    获取指定元素的下一个兄弟元素

   语法:next(expr)  expr:可选,筛选条件,如果下一个兄弟元素不符合改条件,则返回空。


  $(".p2").next();    //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。      
  <div>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p> 
    <p>我是第三个P</p>        //我是.p2的next
    <p class="p4">我是第四个P</p>
  </div>  

十五、nextAll()    获取其后的所有兄弟元素

    语法:nextAll(expr)  expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素


  $(".p2").nextAll();  //如果筛选条件改为 $(".p2").nextAll(".p4");  则只有我是第四个P会被选中
  <div>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p> 
    <p>我是第三个P</p>        //会被选中,是.p2后面的兄弟元素