Detailed explanation of jQuery search and filter examples

Normally, the selector can directly locate the element we want, but when we get a jQuery object, we can also use this object as a basis to search and filter. This article mainly introduces the relevant information of jQuery search and filtering in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The most common search is to search among all child nodes of a node, using the find() method, which itself receives an arbitrary selector. For example, the following HTML structure:

<!-- 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>

Use find() to find:

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

If you want to search upward from the current node, use the parent() method:

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

For nodes at the same level, you can use the next() and prev() methods, For example:
After we have got the Swift node:

var swift = $('#swift');

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

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

Filter

Similar to map and filter in functional programming, jQuery objects also have similar methods.
filter() method can filter out nodes that do not meet the selector conditions:

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

or When passing in a function, pay special attention to the fact that this inside the function is bound to a DOM object, not a jQuery object:

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

map() method converts several DOM nodes contained in a jQuery object into other objects:

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']

In addition, if a jQuery object contains more than one DOM node, first(), last() and slice()Method can return a new jQuery object and remove unnecessary DOM nodes:

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()方法一致

Related recommendations:

Detailed explanation of PHP's method of finding different elements in two arrays

php method of finding specified values ​​in multi-dimensional arrays

PHP bisection How to implement array search function tutorial

The above is the detailed content of Detailed explanation of jQuery search and filter examples. For more information, please follow other related articles on the PHP Chinese website!