jQuery traversal - filtering

jQuery traversal - filtering

Abbreviation range of search elements

The three most basic filtering methods are: first(), last() and eq() , they allow you to select a specific element based on its position within a set of elements.

Other filtering methods, such as filter() and not() allow you to select elements that match or do not match a specified criterion.

jQuery first() method

first() method returns the first element of the selected element.

The following example selects the first <p> element inside the first <div> element:

Example

$(document).ready(function(){
  $("div p").first();
});

jQuery last() method

last() method returns the last element of the selected element.

The following example selects the last <p> element in the last <div> element:

Example

$(document).ready(function(){
  $("div p").last();
});

jQuery eq() method

eq() method returns the element with the specified index number among the selected elements.

The index number starts from 0, so the index number of the first element is 0 instead of 1. The following example selects the second <p> element (index number 1):

Example

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() method

filter The () method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.

The following example returns all <p> elements with the class name "intro":

Example

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() method

not() method returns all elements that do not match the criteria.

Tip: The not() method is the opposite of filter().

The following example returns all <p> elements without the class name "intro":

Example

$(document).ready(function(){  
$("p").not(".intro");
});


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div p").first().css("background-color","green"); }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <div> <p>我是div中的一个段落。</p> </div> <div> <p>我是另外一个div中的一个段落。</p> </div> <p>我是一个段落。</p> </body> </html>
submitReset Code