jQuery 탐색 - nextUntil() 메서드 및 prevUntil() method_jquery 사용 소개-JS 튜토리얼-php.cn

jQuery 탐색 - nextUntil() 메서드 및 prevUntil() method_jquery 사용 소개

WBOY

풀어 주다： 2016-05-16 17:35:06

원래의

1355명이 탐색했습니다.

nextUntil()은 각 요소의 다음 형제 요소를 모두 가져옵니다. 매개변수가 있는 경우 이 메서드의 매개변수와 일치하는 요소를 찾을 때까지 검색이 중지됩니다. 반환된 새 jQuery 개체에는 다음 형제 요소가 모두 포함되지만 선택기, DOM 노드 또는 전달된 jQuery 개체와 일치하는 요소는 포함되지 않습니다. 매개 변수가 없으면 다음 형제 요소가 모두 선택되며 이는 .nextAll() 메서드와 동일합니다.

구문 1:

코드 복사 코드는 다음과 같습니다.

.nextUntil(selector,filter)

구문 2:

코드 복사 코드는 다음과 같습니다.

.nextUntil(element,filter)

자세한 설명
DOM 요소 모음에 Object가 주어지면 .nextUntil() 메서드를 사용하면 DOM 트리의 요소 뒤에 있는 형제 요소를 검색할 수 있으며, 해당 메서드의 매개변수와 일치하는 요소가 발견되면 검색이 중지됩니다. 반환된 새 jQuery 개체에는 다음 형제 요소가 모두 포함되어 있지만 매개 변수와 일치하는 요소는 포함되어 있지 않습니다.

선택기가 일치하지 않거나 선택기가 지정되지 않으면 다음 형제가 모두 선택되며 이 메서드로 선택한 요소는 .nextAll() 메서드와 동일합니다.

jQuery 1.6부터 선택기 대신 DOM 노드나 jQuery 객체를 .nextUntil() 메서드에 전달할 수 있습니다.

이 메소드는 선택적 선택기 표현식을 두 번째 매개변수로 허용합니다. 이 매개변수를 지정하면 요소가 이 선택기와 일치하는지 여부를 감지하여 필터링됩니다.

먼저 예시를 보세요:

코드 복사 코드는 다음과 같습니다.

 용어 1
 정의 1-a
 정의 1-b
 정의 1-c
 정의 1-d
 정의 2-b ;정의 2-c
 용어 3
 정의 3-a
 < dd>정의 3-b

코드 복사 코드는 다음과 같습니다.$("#term-2").nextUntil("dt").css ("배경색", "빨간색");

결과는 다음과 같습니다.

참고:

1. 본인을 포함하지 마세요. 즉, 위의 예에는 #term-2 자체가 포함되지 않습니다

2. 매개변수 1과 일치하는 요소를 제외합니다. 즉, 머리와 꼬리를 제거합니다.

3. 선택자가 일치하지 않거나 선택자가 지정되지 않은 경우 다음과 같은 동포가 모두 선택됩니다.

위의 선택자를 원래 dt에서 dts로 변경했는데 결과는 다음과 같습니다.

$("#term-2").nextUntil("dts").css("background-color", "red");

로그인 후 복사

코드 복사 코드는 다음과 같습니다.$("#term-1") .nextUntil( "#term-3", "dd").css("color", "blue");

//또는 DOM 요소 사용:

//var term3 = document.getElementById("term -3" );
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");

$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");

결과는 다음과 같습니다.

필터링을 제공하지 않는 선택기의 예를 살펴보겠습니다

결과는 아래와 같습니다.

$("#term-1").nextUntil("#term-3").css("color", "blue");

로그인 후 복사

prevUntil() 메소드는 nextUntil() 메소드와 유사하지만 하나는 올라가고 다른 하나는 내려간다는 차이점이 있습니다.