Detailed explanation of jQuery search and filter examples-JS Tutorial-php.cn

Detailed explanation of jQuery search and filter examples

小云云

Release： 2018-01-06 09:05:32

Original

1345 people have browsed it

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>

Copy after login

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

Copy after login

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

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

Copy after login

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 = $(&#39;#swift&#39;);

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

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

Copy after login

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 = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(&#39;.dy&#39;); // 拿到JavaScript, Python, Scheme

Copy after login

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

Copy after login

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

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

Copy after login

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 = $(&#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()方法一致

Copy after login

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!