Detaillierte Erläuterung der jQuery-Such- und Filterbeispiele

Normalerweise kann der Selektor das gewünschte Element direkt finden, aber wenn wir ein jQuery-Objekt erhalten, können wir dieses Objekt auch als Grundlage für die Suche und Filterung verwenden. In diesem Artikel werden hauptsächlich die relevanten Informationen zur jQuery-Suche und -Filterung vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

Die häufigste Suche ist die Suche unter allen untergeordneten Knoten eines Knotens mithilfe der Methode find(), die ihrerseits einen beliebigen Selektor erhält. Zum Beispiel die folgende HTML-Struktur:

<!-- HTML结构 -->
<ul class="lang">
 <li class="js dy">JavaScript</li>
 <li class="dy">Python</li>
 <li id="swift">Swift</li>
 <li class="dy">Scheme</li>
 <li name="haskell">Haskell</li>
</ul>

Verwenden Sie find(), um zu finden:

var ul = $(&#39;ul.lang&#39;); // 获得<ul>
var dy = ul.find(&#39;.dy&#39;); // 获得JavaScript, Python, Scheme
var swf = ul.find(&#39;#swift&#39;); // 获得Swift
var hsk = ul.find(&#39;[name=haskell]&#39;); // 获得Haskell

Wenn Sie vom aktuellen Knoten aus nach oben suchen möchten, verwenden Sie die Methode parent():

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(&#39;p.red&#39;); // 从Swift的父节点开始向上查找，直到找到某个符合条件的节点并返回

Für Knoten auf derselben Ebene können Sie next() und prev()Methode, zum Beispiel: Nachdem wir den Knoten
Swift erhalten haben:

var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell，因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev('.js'); // JavaScript，因为JavaScript是往前第一个符合选择器条件的节点

Filtern

ähnelt Map und Filter in der funktionalen Programmierung, und jQuery-Objekte verfügen ebenfalls über ähnliche Methoden. Die Methode

filter() kann Knoten herausfiltern, die die Auswahlbedingungen nicht erfüllen:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

Oder übergeben Sie eine Funktion. Achten Sie besonders darauf, dass

dies innerhalb der Funktion als DOM-Objekt und nicht als jQuery-Objekt gebunden ist:
Die Methode

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map() konvertiert mehrere in einem jQuery-Objekt enthaltene DOM-Knoten in andere Objekte:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

Wenn ein jQuery-Objekt außerdem mehr als einen DOM-Knoten enthält,

first(), last() und slice( )-Methode kann ein neues jQuery-Objekt zurückgeben und unnötige DOM-Knoten entfernen:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

Verwandte Empfehlungen :

Detaillierte Erläuterung der PHP-Methode zum Finden verschiedener Elemente in zwei Arrays

PHPs Methode zum Finden bestimmter Werte in mehrdimensionalen Arrays

PHP-Binärmethode zum Implementieren eines Tutorials zur Array-Suchfunktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Such- und Filterbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!