Zusammenfassung häufig verwendeter Anwendungsbeispiele für Traversalfunktionen in jQuery_jquery

Die Beispiele in diesem Artikel fassen die Verwendung häufig verwendeter Traversalfunktionen in jQuery zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Children()-Funktion

Die Funktion

children() wird verwendet, um die untergeordneten Elemente jedes übereinstimmenden Elements auszuwählen und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können Selektoren auch verwenden, um den Filterbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.

Anwendungsbeispiele sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

2. filter()-Funktion

Die Funktion filter() wird verwendet, um Elemente herauszufiltern, die dem angegebenen Ausdruck entsprechen, und ihn in Form eines jQuery-Objekts zurückzugeben.
Die Ausdrücke hier umfassen: Selektor (String), DOM-Element (Element), jQuery-Objekt und Funktion.

Anwendungsbeispiele sind wie folgt:

/* $("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

3. not()-Funktion

Die Funktion

not() wird verwendet, um Elemente, die dem angegebenen Ausdruck entsprechen, aus übereinstimmenden Elementen zu entfernen und die beibehaltenen Elemente in Form eines jQuery-Objekts zurückzugeben.
Die Ausdrücke hier umfassen: Selektor (String), DOM-Element (Element), jQuery-Objekt und Funktion.
Das Gegenteil dieser Funktion ist die Funktion add(), mit der Elemente, die dem angegebenen Ausdruck entsprechen, dem aktuell übereinstimmenden Element hinzugefügt werden.

Anwendungsbeispiele sind wie folgt:

/* $("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

4. add()-Funktion

Mit der Funktion

add() werden Elemente, die dem angegebenen Ausdruck entsprechen, zum aktuell passenden Element hinzugefügt und in Form eines jQuery-Objekts zurückgegeben.
Zu den Ausdrücken gehören hier: Selektor (String), HTML-Inhalt (String), DOM-Element (Element) und jQuery-Objekt.
Das Gegenteil dieser Funktion ist die Funktion not(), mit der Elemente, die dem angegebenen Ausdruck entsprechen, aus den aktuell übereinstimmenden Elementen entfernt werden.

Anwendungsbeispiele sind wie folgt:

//返回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

5. Funktion „slice()“

Die Funktion

slice() wird verwendet, um ein kontinuierliches Segment von Elementen im passenden Element auszuwählen und es in Form eines jQuery-Objekts zurückzugeben.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz).

Anwendungsbeispiele sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

6. parent()-Funktion

Die Funktion

parent() wird verwendet, um das übergeordnete Element jedes übereinstimmenden Elements auszuwählen und es als jQuery-Objekt zurückzugeben.
Sie können Selektoren auch verwenden, um den Auswahlbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz).

Anwendungsbeispiele sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

7. Eltern()-Funktion

Die Funktion

parents() wird verwendet, um die Vorfahrenelemente jedes übereinstimmenden Elements auszuwählen und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können Selektoren auch verwenden, um die Auswahl weiter auf die Elemente einzugrenzen, die mit dem angegebenen Selektor übereinstimmen.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz).

Anwendungsbeispiele sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

8. Geschwister()-Funktion

Die Funktion

siblings() wird verwendet, um alle Geschwisterelemente (außer sich selbst) jedes übereinstimmenden Elements auszuwählen und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können Selektoren auch verwenden, um den Auswahlbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz).

Anwendungsbeispiele sind wie folgt:

//返回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

9. Funktionen prev() und prevAll()

Die Funktion

prev() wird verwendet, um die Geschwisterelemente unmittelbar vor jedem übereinstimmenden Element zu filtern und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können den angegebenen Selektor auch verwenden, um den Filterbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Das Gegenteil dieser Funktion ist die Funktion next(), mit der die Geschwisterelemente unmittelbar nach jedem übereinstimmenden Element gefiltert werden.

Die Funktion

prevAll() wird verwendet, um alle Geschwisterelemente vor jedem passenden Element auszuwählen und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können Selektoren auch verwenden, um den Auswahlbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Das Gegenteil dieser Funktion ist die Funktion nextAll(), mit der nach jedem passenden Element alle Geschwisterelemente ausgewählt werden.

Prev()-Verwendungsbeispiele sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

PrevAll()-Verwendungsbeispiele sind wie folgt:

//返回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

10. next()-Funktion und nextAll()-Funktion

Die Funktion

next() wird verwendet, um die Geschwisterelemente unmittelbar nach jedem übereinstimmenden Element zu filtern und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können den angegebenen Selektor auch verwenden, um den Filterbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Das Gegenteil dieser Funktion ist die Funktion prev(), mit der die Geschwisterelemente unmittelbar vor jedem übereinstimmenden Element gefiltert werden.

Die Funktion

nextAll() wird verwendet, um nach jedem passenden Element alle Geschwisterelemente auszuwählen und sie in Form eines jQuery-Objekts zurückzugeben.
Sie können Selektoren auch verwenden, um den Auswahlbereich weiter einzugrenzen und Elemente herauszufiltern, die mit dem angegebenen Selektor übereinstimmen.
Das Gegenteil dieser Funktion ist die Funktion prevAll(), mit der alle Geschwisterelemente vor jedem passenden Element ausgewählt werden.

Beispiele für die Verwendung von

next() sind wie folgt:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + 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

nextAll()-Nutzungsbeispiele sind wie folgt:

//返回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

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.