jquery 过滤器~查找方法-526互联

过滤方法，指的是对所选元素进一步地筛选。查找方法，主要是以当前所选元素为基点，找到这个元素的父元素、子元素或兄弟元素。

在jQuery中，对于查找方法，我们可以分为以下3种情况。

（1）查找祖先元素。
（2）查找后代元素。
（3）查找兄弟元素。

1.查找祖先元素

在jQuery中，如果想要查找当前元素的祖先元素（父元素、爷元素等），有以下3种方法。

（1）parent() 方法用来查找当前元素的“父元素”。注意，元素只有一个父元素。
（2）parents()
（3）parentsUntil()

（1）parent()

语法：$.parent(selector)

说明：selector是一个可选参数，它是一个选择器，用来查找符合条件的父元素。当参数省略，表示父元素不需要满足任何条件；当参数不省略时，表示父元素需要满足条件。

举例：不带参数的parent()

$(function(){
    $("td").hover(function () {
        $(this).parent().css("background-color", "silver");
    }, function () {
        $(this).parent().css("background-color", "white");
    })
})

分析：$(this).parent()表示选取当前td元素的父元素（tr），但是爷元素（table）不会被选中。

举例：带参数的parent()

$(function(){
    $("td").hover(function () {
        $(this).parent(".select").css("background-color", "silver");
    }, function () {
        $(this).parent(".select").css("background-color", "white");
    })
})

分析：$(this).parent(".select")表示选取当前td元素的父元素（tr），并且父元素必须含有类名“select”。

当鼠标移到class="select"的td元素上时，此时预览效果如下图所示。

（2）parents()

在jQuery中，我们可以使用parents()方法来查找当前元素的“祖先元素”。注意，元素可以有多个祖先元素

parent()和parents()这两个方法很好区分。其中，parent()是单数，因此查找的元素只有一个，那就是父元素。parents()是复数，因此查找的元素有多个，那就是所有的祖先元素（包括父元素、爷元素等）。

语法：$().parents(selector)

说明：selector是一个可选参数，它是一个选择器，用来查找符合条件的祖先元素。当参数省略，表示祖先元素不需要满足任何条件；当参数不省略时，表示祖先元素需要满足条件。

$(function(){
    var parents = $("span").parents();
    var result = [];
    $.each(parents, function(){
        var item = this.tagName.toLowerCase();
        result.push(item);
    });
    console.log(result.join(","));
})

控制台输出结果如下图所示。

分析：

("span").parents()返回的是一个jQuery对象集合，在这个例子中，我们使用.each()来遍历span元素的所有祖先元素。有些小伙伴们就会问了：“获取元素的标签名，不是应该使用$(this).tagName吗？为什么这里使用的是this.tagName呢？”

$(this)是jQuery对象，它调用的是jQuery的方法或属性，例如click()、keyup()等。this是DOM对象，它调用的是DOM对象的方法或属性，例如this.id、this.value等。由于tagName属性是属于DOM对象的，所以我们这里使用的是this.tagName。

（3）parentsUntil()

在jQuery中，parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元素，相当于在parents()方法返回的集合中截取一部分。

语法：$().parentsUntil(selecotr)

说明：selector是一个可选参数，它是一个选择器，用来选择符合条件的祖先元素。

$(function(){
    var parents = $("span").parentsUntil("div");
    var result = [];
    $.each(parents, function(){
        var item = this.tagName.toLowerCase();
        result.push(item);
    });
    console.log(result.join(","));
})

控制台输出结果如下图所示。

分析：

在实际开发中，我们一般只会用到parent()方法和parents()这两个，极少用到parentsUntil()。因此对于parentsUntil()方法，我们了解一下就行。

2.查找后代元素

在jQuery中，如果想要查找当前元素的后代元素（子元素、孙元素等），我们有以下3种方法：

（1）children()
（2）find()
（3）contents()

（1）children()

在jQuery中，我们可以使用children()方法来查找当前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

语法：$().children(selector)

说明：selector是一个可选参数，它是一个选择器，用来查找符合条件的子元素。当参数省略，表示选择所有子元素；当参数不省略时，表示选择符合条件的子元素。

分析：$(this).children(".select")表示获取当前元素下的class="select"的子元素。我们可以发现，class="select"的孙元素却不会被选中。

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

（2）find()

在jQuery中，我们可以使用find()方法来查找当前元素的“后代元素”。注意，find()方法不仅能查找子元素，还能查找其他后代元素。

语法：$().find(selector)

说明：selector是一个可选参数，它是一个选择器，用来查找符合条件的后代元素。当参数省略，表示选择所有后代元素；当参数不省略时，表示选择符合条件的后代元素。

分析：$(this).find(".select")表示不仅会选取当前元素下的class="select"的子元素，还会选取class="select"的孙元素。

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

（3）contents()

在jQuery中，我们可以使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery对象中不仅包含子元素，还包含文本内容。而children()方法返回的jQuery对象中只会包含子元素，不包含文本内容。

在实际开发中，我们极少会用到contents()方法，因此不需要深入了解，这里简单认识一下即可。

3.向前查找兄弟元素

向前查找兄弟元素，指的是查找某个元素之前的兄弟元素。在jQuery中，对于向前查找兄弟元素，我们有以下3种方法。

（1）prev() 。查找某个元素的前一个“相邻”的兄弟元素
（2）prevAll() 。查找某个元素前面“所有”兄弟元素。注意，prev()只会查找前面相邻的兄弟元素，而prevAll()则会查找前面所有的兄弟元素
（3）prevUntil() 。是prevAll()方法的一个补充，它可以查找元素前面“指定范围”的所有兄弟元素，相当于在prevAll()方法返回的集合中截取一部分。

其中，兄弟元素，指的是该元素在同一个父元素下的同级元素。

（1）prev()

语法：$().prev() 查找某个元素的前一个“相邻”的兄弟元素

说明：大多数情况下，prev()方法是不需要参数的。

举例：$("#lvye").prev()表示选取id="lvye"元素前面相邻的兄弟元素，即“<li>黄：yellow</li >”这一项。

（2）prevAll()

语法：$().prevAll(selector) 查找某个元素前面“所有”兄弟元素。注意，prev()只会查找前面相邻的兄弟元素，而prevAll()则会查找前面所有的兄弟元素

说明：selector是一个可选参数，它是一个选择器，用来查找符合条件的兄弟元素。当参数省略，表示选择前面所有兄弟元素；当参数不省略时，表示选择前面满足条件的兄弟元素。

举例：$("#lvye").prevAll()表示选取id="lvye"的元素前面所有的兄弟元素。

（3）prevUntil()

在jQuery中，prevUntil()方法是prevAll()方法的一个补充，它可以查找元素前面“指定范围”的所有兄弟元素，相当于在prevAll()方法返回的集合中截取一部分。

语法：$().prevUntil(selector)

说明：selector是一个可选参数，它是一个选择器，用来选择符合条件的前面的兄弟元素。

举例：

分析：$("#lvye").prevUntil("#end")表示以id="lvye"的元素为基点，向前找到id="end"的兄弟元素，然后选取这个范围之间的所有兄弟元素。

4.向后查找兄弟元素

（1）next() 。查找某个元素的后一个“相邻”的兄弟元素。$("#lvye").next().css("color", "red");
（2）nextAll() 。查找某个元素后面“所有”兄弟元素。注意，next()只会查找后面相邻的兄弟元素，而nextAll()则会查找后面所有的兄弟元素。
（3）nextUntil() 。查找元素后面“指定范围”的所有兄弟元素，相当于在nextAll()方法返回的集合中截取一部分。 $("#lvye").nextUntil("#end").css("color", "red");

http://www.lvyestudy.com/jquery/backward-finding-brother

下面两组方法都是相似的，小伙伴们应该多加对比，这样更好地理解和记忆：

向前查找兄弟元素：prev()、prevAll()、prevUntil()

向后查找兄弟元素：next()、nextAll()、nextUntil()