A summary of commonly used traversal function usages in jquery _jquery

The examples in this article summarize the usage of traversal functions commonly used in jquery. Share to everyone for your reference. Specifically as follows:

1. Children () function

The children () function is used to select the child elements of each matching element and return in the form of a jquery object.
You can also use selectors to further narrow the filter and filter out the elements that match the specified selector.

Examples of usage are as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
Match element
var $n 1 = $ ("#n1") with ID N1;
Matches all child elements of N1
var $menu _li = $n 1.children ();
Document.writeln (Gettagsinfo ($menu _li)); Li#n2,li#n7,li#n13
//Match N1
var $active _menu_li = $n 1.children (". Active") for all child elements containing the class name active;
Document.writeln (Gettagsinfo ($active _menu_li)); LI#N2
//matches all span child element var $span of each element $menu_li
= $menu _li.children ("span");
Document.writeln (Gettagsinfo ($span)); Span#n3,span#n8,span#n14

2. Filter () function

The filter () function filters out elements that match the specified expression and returns in the form of a jquery object.
The expressions here include selectors (strings), Dom elements (element), jquery objects, functions.

Examples of usage are as follows:

/* $ ("li") matches N4, N5, N6 3 elements//
/filter out all elements with an even (ordinal number) index, that is, N4, N6
Document.writeln ($ ("Li"). Filter (": even"). length); 2
//filter out the element containing the class name Foo, that is, N5
Document.writeln ($ ("Li"). Filter ($ (". Foo")). length);//1
//filter out all elements with class attributes , namely N5, N6
Document.writeln ($ ("Li"). Filter ("[Class]"). length);//2/
* $ ("input") match N8, N9 two elements */
/ Filter out the selected element, that is, N9
Document.writeln ($ ("input"). Filter (": Checked"). length);//1
var input = Document.getelementsbyname ("Codeplayer");
Filters out all input elements, namely N8, N9
Document.writeln ($ ("input"). Filter (Input). length);//2
//$ ("div") matches N1, N2, N7 these 3 elements
//filter out the elements that are equal to the ID and class attributes, namely N2, N7
var $result = $ ("div"). Filter (function (index, Element) {
  // this = = element in the function return
  this.id = = this.classname;
Document.writeln ($result. length); 2

3. Not () function

The not () function is used to remove elements that match the specified expression from the matching element and to return the reserved element as a jquery object.
The expressions here include selectors (strings), Dom elements (element), jquery objects, functions.
Relative to the function is the Add () function, which is used to add elements that match the specified expression to the current matching element.

Examples of usage are as follows:

/* $ ("li") match N4, N5, N6 these 3 elements *
//exclude N6, leaving 2 elements n4, N5 Document.writeln
($ ("Li"). Not ("#n6"). length);//2
// Excludes the element with class name Foo, leaving N4, N6
Document.writeln ($ ("Li"). Not ($ (". Foo")). length);//2
//Exclude all elements with class attributes, leaving the N4
Document.writeln ($ ("Li"). Not ("[Class]"). length); 1
/* $ ("input") matches N8, N9 these two elements
///excludes selected elements, leaving N8
Document.writeln ("input"). Not (": Checked"). length ); 1
var input = document.getelementsbytagname ("input");
Excludes all input elements, returning an empty jquery object
Document.writeln ($ ("input"). Not (input). length);//0/
* $ ("div") matches N1, N2, N7 these 3 elements//
/excludes elements equal to the ID and class attributes, leaving the N1
var $result = $ ("div"). Not (a function (index, Element) {
  // = = = Element return
  this.id = = This.classname; 
};
Document.writeln ($result. length); 1

4. Add () function

The Add () function is used to add elements that match the specified expression to the current matching element and return in the form of a jquery object.
The expressions here include selectors (strings), HTML content (strings), Dom elements (element), and jquery objects.
Relative to this function is the not () function, which removes the element that matches the specified expression from the current matching element.

Examples of usage are as follows:

Returns an array of identity information for all matching elements of the jquery object
//each element such as: #id
function Gettagsinfo ($doms) {return
  $doms. Map (function () { return
    "#" + this.id;
  }). Get ();
}
Matches all of the P elements, plus all the label elements
var $elements 1 = $ ("P"). Add ("label");
Document.writeln (Gettagsinfo ($elements 1)); #n1, #n4, #n9, #n11
var $matches = $ ("span.active"). Add (document.getElementsByTagName ("label"));
Document.writeln (Gettagsinfo ($matches)); #n4, #n8, #n11, #n12
var $elements 2 = $ ("label"). Add ($ ("strong"));
Document.writeln (Gettagsinfo ($elements 2)); #n4, #n7, #n11
var $elements 3 = $ ("span.active"). Add ("Label", $ ("#n9"));
Document.writeln (Gettagsinfo ($elements 3)); #n8, #n11, #n12
var $elements 4 = $ ("P"). Add (". Active"). Add ("Span:only-child");
Document.writeln (Gettagsinfo ($elements 4)); #n1, #n3, #n6, #n7, #n8, #n9, #n12

5. Slice () function

The slice () function is used to select a contiguous element in a matching element and return it as a jquery object.
This function belongs to the jquery object (instance).

Examples of usage are as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
/* $ ("li") matches N4, N5, N6, N7, n8 these 5 elements */
var $li = $ ("li");
Select the 2nd element
var $sub 1 = $ ("li"). Slice (1, 2);
Document.writeln (Gettagsinfo ($sub 1)); LI#N5
//select 4th, 5 element
var $sub 2 = $ ("li"). Slice (3);
Document.writeln (Gettagsinfo ($sub 2)); LI#N7,LI#N8
//select 1th to 4th element
//StartIndex = length + ( -5) = 0,endindex = length + ( -1) = 4
var $sub 3 = $ ("L I "). Slice ( -5,-1);
Document.writeln (Gettagsinfo ($sub 3)); Li#n4,li#n5,li#n6,li#n7

6. Parent () function

The parent () function is used to select the parents of each matching element and return in the form of a jquery object.
You can also use selectors to further narrow the selection and filter out the elements that match the specified selector.
This function belongs to the jquery object (instance).

Examples of usage are as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
var $n 2 = $ ("#n2");
Gets the N2 's parent element
var $parents 1 = $n 2.parent ();
Document.writeln (Gettagsinfo ($parents 1)); Div#n1
var $p = $ ("P");
Gets the parent element of all P elements
var $parents 2 = $p. Parent ();
Document.writeln (Gettagsinfo ($parents 2)); Div#n1,div#n5
//Gets the parent element
var $parents 3 = $p. Parent (". Bar") containing the class name "bar" for all p elements;
Document.writeln (Gettagsinfo ($parents 3)); Div#n5
var $foo = $ (". Foo");
Gets the parent element of all elements containing the class name "foo"
var $parents 4 = $foo. Parent ();
Document.writeln (Gettagsinfo ($parents 4)); P#n3,div#n5

7. Parents () function

The parents () function selects the ancestor element of each matching element and returns as a jquery object.
You can also use selectors to further narrow the selection, selecting only those elements that match the specified selector.
This function belongs to the jquery object (instance).

Examples of usage are as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
var $n 4 = $ ("#n4");
Gets the ancestor element of N4
var $parents 1 = $n 4.parents ();
Document.writeln (Gettagsinfo ($parents 1)); P#n3,div#n1,body,html
var $p = $ ("P");
Gets the ancestor element of all P elements
var $parents 2 = $p. Parents ();
Document.writeln (Gettagsinfo ($parents 2)); div#n5,div#n1,body,html
//Gets the ancestor element
var $parents 3 = $p. Parents (". Bar") of all p elements containing the class name "bar";
Document.writeln (Gettagsinfo ($parents 3)); Div#n5
var $foo = $ (". Foo");
Gets the div element
var $parents 4 = $foo. Parents ("div") in the ancestor element of all elements containing the class name "foo";
Document.writeln (Gettagsinfo ($parents 4)); Div#n5,div#n1

8. Siblings () function

The siblings () function is used to select all sibling elements (excluding themselves) for each matching element, and to return in the form of a jquery object.
You can also use selectors to further narrow the selection and filter out the elements that match the specified selector.
This function belongs to the jquery object (instance).

Examples of usage are as follows:

Returns an array of identity information for all matching elements of the jquery object
//each element such as: #id
function Gettagsinfo ($doms) {return
  $doms. Map (function () { return
    "#" + this.id;
  }). Get ();
}
var $n 4 = $ ("#n4");
All sibling elements that match N4 (sibling elements will not include N4 themselves, below)
var $elements = $n 4.siblings ();
Document.writeln (Gettagsinfo ($elements)); #n2, #n5, #n7, #n8
//matching N4 all peer span element
var $matches = $n 4.siblings ("span");
Document.writeln (Gettagsinfo ($matches)); #n2, #n5, #n8
var $label = $ ("label");
Matches the sibling element var $actives of all label elements containing the class name "active"
= $label. Siblings (". Active");
Document.writeln (Gettagsinfo ($actives)); #n7, #n8, #n12

9. Prev () and Prevall () functions

The prev () function filters the sibling elements immediately preceding each matching element and returns as a jquery object.
You can also use the specified selector to further narrow the scope of the filter to filter out the elements that match the specified selector.
Relative to this function is the next () function, which is used to filter the sibling elements immediately after each matching element.

The Prevall () function is used to select all sibling elements before each matching element and to return in the form of a jquery object.
You can also use selectors to further narrow the selection and filter out the elements that match the specified selector.
Relative to this function is the Nextall () function, which selects all sibling elements after each matching element.

The prev () Usage example is as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
Matches all span elements: E2, E3, E4, E5, E7, E9
var $span = $ ("span");
Matches the sibling elements immediately preceding all SPAN elements: E3, E2, E8
//e2 => None "has no previous sibling element, because it is the first sibling element, the same as"
//e3 => no
//e4 =>
//e5 => E2
//e7 => no
//e9 => E8
var $span _prev = $span. Prev ();
Document.writeln (Gettagsinfo ($span _prev)); Span#e3,span#e2,a#e8
//matches the peer span element
var $span _prev_span = $span. Prev ("SPAN") immediately before all span elements;
Document.writeln (Gettagsinfo ($span _prev_span)); Span#e3,span#e2

The Prevall () Usage example is as follows:

Returns an array of identity information for all matching elements of the jquery object
//each element such as: #id
function Gettagsinfo ($doms) {return
  $doms. Map (function () { return
    "#" + this.id;
  }). Get ();
}
var $n 6 = $ ("#n6");
Match N6 all sibling element
var $n 6_prevall = $n 6.prevAll ();
Document.writeln (Gettagsinfo ($n 6_prevall)); #n5, #n4, #n2
//Match N6 before all sibling strong elements
var $n 6_prevall_strong = $n 6.prevAll ("strong");
Document.writeln (Gettagsinfo ($n 6_prevall_strong)); #n4
var $label = $ ("label");
The sibling element
var $label _prevall_active = $label. Prevall (". Active")
preceded by all the label elements containing the class name "active" Document.writeln (Gettagsinfo ($label _prevall_active)); #n10, #n5, #n4

The next () function and the Nextall () function

The next () function filters the sibling elements immediately after each matching element and returns as a jquery object.
You can also use the specified selector to further narrow the scope of the filter to filter out the elements that match the specified selector.
Relative to this function is the prev () function, which is used to filter the sibling elements immediately preceding each matching element.

The Nextall () function is used to select all sibling elements after each matching element, and to return in the form of a jquery object.
You can also use selectors to further narrow the selection and filter out the elements that match the specified selector.
Relative to this function is the Prevall () function, which is used to select all sibling elements before each matching element.

The next () Usage example is as follows:

Returns an array of identifying information for all matching elements of the jquery object
//Each element form: tagname or Tagname#id (if there is an ID)
function gettagsinfo ($doms) {return
  $ Doms.map (function () {return
    This.tagname + this.id? "#" + this.id: "");
  Get ();
}
Matches all span elements: E2, E3, E4, E5, E7, E9
var $span = $ ("span");
The next sibling element that matches all span elements: E5, E4, E8//E2, which is E5//E3, is E4//E4
not (because it is the last of the sibling elements, the same below)
/ E5 no
//E7 is E8
//E9 no
var $span _next = $span. Next ();
Document.writeln (Gettagsinfo ($span _next)); Span#e5,span#e4,a#e8
//matches the next sibling span element
var $span _next_span = $span. Next ("span") immediately after all SPAN elements;
Document.writeln (Gettagsinfo ($span _next_span)); Span#e5,span#e4

The Nextall () Usage example is as follows:

Returns an array of identity information for all matching elements of the jquery object
//each element such as: #id
function Gettagsinfo ($doms) {return
  $doms. Map (function () { return
    "#" + this.id;
  }). Get ();
}
var $n 4 = $ ("#n4");
Match N4 all sibling element
var $n 4_nextall = $n 4.nextAll ();
Document.writeln (Gettagsinfo ($n 4_nextall)); #n5, #n7, #n8
//Match N4 after all sibling strong elements
var $n 4_nextall_strong = $n 4.nextAll ("strong");
Document.writeln (Gettagsinfo ($n 4_nextall_strong)); #n7
var $label = $ ("label");
var $label _nextall_active = $label. Nextall (". Active");
Document.writeln (Gettagsinfo ($label _nextall_active)); #n7, #n8, #n12

I hope this article will help you with your jquery programming.