jQuery 검색 및 필터 예제에 대한 자세한 설명

일반적으로 선택기는 원하는 요소를 직접 찾을 수 있지만 jQuery 객체를 얻으면 이 객체를 검색 및 필터링의 기초로 사용할 수도 있습니다. 이 기사는 주로 jQuery 검색 및 필터링 관련 정보를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

가장 일반적인 검색은 임의의 선택기를 받는 find() 메서드를 사용하여 노드의 모든 하위 노드 중에서 찾는 것입니다. 예를 들어 다음 HTML 구조는 다음과 같습니다.

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

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

현재 노드에서 위쪽으로 검색하려면 parent()를 사용합니다. 메서드:

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

동일한 수준의 노드의 경우 next() 및 prev() 메서드를 사용할 수 있습니다. 예:
를 얻은 경우 Swift 노드:

var swift = $('#swift');

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

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

Filtering

은 함수형 프로그래밍의 map 및 filter와 유사하며 jQuery 객체도 비슷한 방법을 가지고 있습니다.
filter() 메소드는 선택기 조건을 충족하지 않는 노드를 필터링할 수 있습니다.

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

또는 함수를 전달하고, 함수 내부에 this이 있다는 사실에 특히 주의하세요. jQuery 객체가 아닌 DOM 객체로 바인딩됩니다.

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

map() 메서드는 jQuery 객체에 포함된 여러 DOM 노드를 다른 객체로 변환합니다.

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

또한, jQuery 객체에 A 이상의 DOM 노드가 포함된 경우 first(), last() 및 slice() 메서드는 새 jQuery 객체를 반환하고 불필요한 DOM 노드를 제거할 수 있습니다.

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

관련 권장 사항:

두 배열에서 서로 다른 요소를 찾는 PHP 방법에 대한 자세한 설명

다차원 배열에서 지정된 값을 찾는 PHP 방법

배열 검색 기능을 구현하는 PHP 바이너리 방법 튜토리얼

위 내용은 jQuery 검색 및 필터 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!