> 웹 프론트엔드 > JS 튜토리얼 > jQuery 검색 및 필터 예제에 대한 자세한 설명

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

小云云
풀어 주다: 2018-01-06 09:05:32
원래의
1333명이 탐색했습니다.

일반적으로 선택기는 원하는 요소를 직접 찾을 수 있지만 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 = $(&#39;#swift&#39;); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(&#39;p.red&#39;); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
로그인 후 복사

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


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是往前第一个符合选择器条件的节点
로그인 후 복사

Filtering

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


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(&#39;.dy&#39;); // 拿到JavaScript, Python, Scheme
로그인 후 복사

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


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
로그인 후 복사

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


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;]
로그인 후 복사

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


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()方法一致
로그인 후 복사

관련 권장 사항:

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

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

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿