Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > body text

Summary of commonly used traversal function usage examples in jQuery_jquery

WBOY

Release： 2016-05-16 15:41:13

Original

1060 people have browsed it

The examples in this article summarize the usage of commonly used traversal functions in jQuery. Share it with everyone for your reference. The details are as follows:

1. children() function

The

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

Usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
// 匹配id为n1的元素
var $n1 = $("#n1");
// 匹配n1的所有子元素
var $menu_li = $n1.children();
document.writeln( getTagsInfo( $menu_li ) ); // LI#n2,LI#n7,LI#n13
// 匹配n1所有含有类名active的子元素
var $active_menu_li = $n1.children(".active");
document.writeln( getTagsInfo( $active_menu_li ) ); // LI#n2
// 匹配$menu_li每个元素的所有span子元素
var $span = $menu_li.children("span");
document.writeln( getTagsInfo( $span ) ); // SPAN#n3,SPAN#n8,SPAN#n14

Copy after login

2. filter() function

The filter() function is used to filter out elements that match the specified expression and return it in the form of a jQuery object.
The expressions here include: selector (string), DOM element (Element), jQuery object, and function.

Usage examples are as follows:

/* $("li") 匹配n4、n5、n6这3个元素 */
//筛选出所有索引为偶数(序号为奇数)的元素，即n4、n6
document.writeln( $("li").filter( ":even" ).length ); // 2
//筛选出包含类名foo的元素，即n5
document.writeln( $("li").filter( $(".foo") ).length ); // 1
//筛选出所有带有class属性的元素，即n5、n6
document.writeln( $("li").filter( "[class]" ).length ); // 2
/* $("input") 匹配n8、n9这两个元素 */
//筛选出选中的元素，即n9
document.writeln( $("input").filter( ":checked" ).length ); // 1
var input = document.getElementsByName("codeplayer");
//筛选出所有的input元素，即n8、n9
document.writeln( $("input").filter( input ).length ); // 2
//$("div") 匹配n1、n2、n7这3个元素
//筛选出id和class属性相等的元素，即n2、n7
var $result = $("div").filter( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 2

Copy after login

3. not() function

The

not() function is used to remove elements that match the specified expression from matching elements and return the retained elements in the form of a jQuery object.
The expressions here include: selector (string), DOM element (Element), jQuery object, and function.
The opposite of this function is the add() function, which is used to add elements that match the specified expression to the current matching element.

Usage examples are as follows:

/* $("li") 匹配n4、n5、n6这3个元素 */
//排除掉n6，剩下2个元素n4、n5
document.writeln( $("li").not( "#n6" ).length ); // 2
//排除掉带类名foo的元素，剩下n4、n6
document.writeln( $("li").not( $(".foo") ).length ); // 2
//排除掉所有带有class属性的元素，剩下n4
document.writeln( $("li").not( "[class]" ).length ); // 1
/* $("input") 匹配n8、n9这两个元素 */
//排除掉被选中的元素，剩下n8
document.writeln( $("input").not( ":checked" ).length ); // 1
var input = document.getElementsByTagName("input");
//排除掉所有input元素，返回空的jQuery对象
document.writeln( $("input").not( input ).length ); // 0
/* $("div") 匹配n1、n2、n7这3个元素 */
//排除掉id和class属性相等的元素，剩下n1
var $result = $("div").not( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 1

Copy after login

4. add() function

The

add() function is used to add elements that match the specified expression to the current matching element and returns it in the form of a jQuery object.
The expressions here include: selector (string), HTML content (string), DOM element (Element), and jQuery object.
The opposite of this function is the not() function, which is used to remove elements that match the specified expression from the current matching elements.

Usage examples are as follows:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
//匹配所有的p元素，再加上所有的label元素
var $elements1 = $("p").add("label");
document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11
var $matches = $("span.active").add( document.getElementsByTagName("label") );
document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12
var $elements2 = $("label").add( $("strong") );
document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11
var $elements3 = $("span.active").add( "label", $("#n9") );
document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12
var $elements4 = $("p").add(".active").add("span:only-child");
document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

Copy after login

5. slice() function

The

slice() function is used to select a continuous segment of elements in the matching element and return it in the form of a jQuery object.
This function belongs to a jQuery object (instance).

Usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
/* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
var $li = $("li");
// 选取第2个元素
var $sub1 = $("li").slice( 1, 2);
document.writeln( getTagsInfo( $sub1 ) ); // LI#n5
// 选取第4、5个元素
var $sub2 = $("li").slice( 3 );
document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8
// 选取第1~4个元素
// startIndex = length + (-5) = 0，endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5, -1);
document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7

Copy after login

6. parent() function

The

parent() function is used to select the parent element of each matching element and returns it as a jQuery object.
You can also use selectors to further narrow the selection range and filter out elements that match the specified selector.
This function belongs to a jQuery object (instance).

Usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
var $n2 = $("#n2");
// 获取n2的父元素
var $parents1 = $n2.parent();
document.writeln( getTagsInfo( $parents1 ) ); // DIV#n1
var $p = $("p");
// 获取所有p元素的父元素
var $parents2 = $p.parent();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n1,DIV#n5
// 获取所有p元素的包含类名"bar"的父元素
var $parents3 = $p.parent(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的父元素
var $parents4 = $foo.parent();
document.writeln( getTagsInfo( $parents4 ) ); // P#n3,DIV#n5

Copy after login

7. parents() function

The

parents() function is used to select the ancestor elements of each matching element and return it in the form of a jQuery object.
You can also use selectors to further narrow the selection to only those elements that match the specified selector.
This function belongs to a jQuery object (instance).

Usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
var $n4 = $("#n4");
//获取n4的祖先元素
var $parents1 = $n4.parents();
document.writeln( getTagsInfo( $parents1 ) ); // P#n3,DIV#n1,BODY,HTML
var $p = $("p");
//获取所有p元素的祖先元素
var $parents2 = $p.parents();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n5,DIV#n1,BODY,HTML
//获取所有p元素的包含类名"bar"的祖先元素
var $parents3 = $p.parents(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的祖先元素中的div元素
var $parents4 = $foo.parents("div");
document.writeln( getTagsInfo( $parents4 ) ); // DIV#n5,DIV#n1

Copy after login

8. siblings() function

The

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

Usage examples are as follows:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己，下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12

Copy after login

9. prev() and prevAll() functions

The

prev() function is used to filter the sibling elements immediately before each matching element and return it in the form of a jQuery object.
You can also use the specified selector to further narrow the filtering scope and filter out elements that match the specified selector.
The opposite of 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 return it in the form of a jQuery object.
You can also use selectors to further narrow the selection range and filter out elements that match the specified selector.
The opposite of this function is the nextAll() function, which is used to select all sibling elements after each matching element.

Prev() usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
//匹配所有span元素：e2、e3、e4、e5、e7、e9
var $span = $("span");
//匹配所有span元素之前紧邻的同辈元素：e3、e2、e8
//e2 => 无【没有上一个紧邻的同辈元素，因为它是同辈元素中的第一个，下同】
//e3 => 无
//e4 => e3
//e5 => e2
//e7 => 无
//e9 => e8
var $span_prev = $span.prev( );
document.writeln( getTagsInfo( $span_prev ) ); // SPAN#e3,SPAN#e2,A#e8
//匹配所有span元素之前紧邻的同辈span元素
var $span_prev_span = $span.prev( "span" );
document.writeln( getTagsInfo( $span_prev_span ) ); // SPAN#e3,SPAN#e2

Copy after login

PrevAll() usage examples are as follows:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n6 = $("#n6");
//匹配n6之前所有的同辈元素
var $n6_prevAll = $n6.prevAll();
document.writeln( getTagsInfo( $n6_prevAll ) ); // #n5,#n4,#n2
//匹配n6之前的所有同辈strong元素
var $n6_prevAll_strong = $n6.prevAll("strong");
document.writeln( getTagsInfo( $n6_prevAll_strong ) ); // #n4
var $label = $("label");
//匹配所有label元素之前的包含类名"active"的同辈元素
var $label_prevAll_active = $label.prevAll(".active");
document.writeln( getTagsInfo( $label_prevAll_active ) ); // #n10,#n5,#n4

Copy after login

10. next() function and nextAll() function

The

next() function is used to filter the sibling elements immediately after each matching element and return it in the form of a jQuery object.
You can also use the specified selector to further narrow the filtering scope and filter out elements that match the specified selector.
The opposite of this function is the prev() function, which is used to filter the sibling elements immediately before each matching element.

The

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

next() usage examples are as follows:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id &#63; "#" + this.id : "");
  }).get();
}
// 匹配所有span元素：e2、e3、e4、e5、e7、e9
var $span = $("span");
// 匹配所有span元素之后紧邻的同辈元素：e5、e4、e8
// e2的下一个紧邻的同辈元素是e5
// e3的是e4
// e4没有(因为它是同辈元素中的最后一个，下同)
// e5没有
// e7的是e8
// e9没有
var $span_next = $span.next( );
document.writeln( getTagsInfo( $span_next ) ); // SPAN#e5,SPAN#e4,A#e8
// 匹配所有span元素之后紧邻的同辈span元素
var $span_next_span = $span.next( "span" );
document.writeln( getTagsInfo( $span_next_span ) ); // SPAN#e5,SPAN#e4

Copy after login

nextAll() usage examples are as follows:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4之后所有的同辈元素
var $n4_nextAll = $n4.nextAll();
document.writeln( getTagsInfo( $n4_nextAll ) ); // #n5,#n7,#n8
//匹配n4之后的所有同辈strong元素
var $n4_nextAll_strong = $n4.nextAll("strong");
document.writeln( getTagsInfo( $n4_nextAll_strong ) ); // #n7
var $label = $("label");
var $label_nextAll_active = $label.nextAll(".active");
document.writeln( getTagsInfo( $label_nextAll_active ) ); // #n7,#n8,#n12

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.

Related labels：

jquery

source：php.cn

Previous article：Two examples of custom right-click menu implemented in JS_javascript skills Next article：Detailed explanation of this in JavaScript_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

How to retrieve values of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...

From 2024-04-05 09:26:49

0

1

1418

Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...

From 2024-04-04 18:40:04

0

1

3528

I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...

From 2024-04-04 17:27:27

0

1

417

Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...

From 2024-04-04 12:53:48

0

1

303

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template