Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der jQuery-Such- und Filterbeispiele

小云云
Freigeben: 2018-01-06 09:05:32
Original
1311 Leute haben es durchsucht

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>
Nach dem Login kopieren

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
Nach dem Login kopieren

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


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

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


var swift = $(&#39;#swift&#39;);

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

swift.prev(); // Python
swift.prev(&#39;.js&#39;); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
Nach dem Login kopieren

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 = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(&#39;.dy&#39;); // 拿到JavaScript, Python, Scheme
Nach dem Login kopieren
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 = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf(&#39;S&#39;) === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
Nach dem Login kopieren

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


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:[&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Scheme&#39;, &#39;Haskell&#39;]
Nach dem Login kopieren
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 = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$(&#39;ul.lang li:first-child&#39;)
var haskell = langs.last(); // Haskell, 相当于$(&#39;ul.lang li:last-child&#39;)
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage