jQuery의 이전 + 다음 선택기 사용법에 대한 기본 소개 및 자세한 설명

jQuery의 prev + next 선택기는 prev 요소 바로 다음에 있는 형제 next 요소를 일치시키고 이를 jQuery 개체 로 캡슐화하여 반환하는 데 사용됩니다.

참고: next 선택기의 검색 범위는 "prev 요소"에 인접한 다음 요소여야 하며 "prev 요소"의 형제 요소여야 합니다.

Grammar

// 这里的prev表示具体的选择器
// 这里的next表示具体的选择器
jQuery( "prev + next" )

+ 기호 양쪽의 공백은 생략 가능하지만, 생략하지 않는 것이 좋습니다. 문자가 너무 가까워서 읽기에 영향을 미칠 수 있습니다.

Parameters

매개변수 설명

prev 유효한 선택자입니다.

next 유효한 선택자입니다.

반환 값

"prev 요소" 바로 옆에 있는 다음 형제 요소에서 next 선택기와 일치하는 DOM 요소를 캡슐화하는 jQuery 개체를 반환합니다.

"이전 요소" 바로 옆에 최대 하나의 다음 형제 요소가 있을지라도 "이전 요소"는 여러 개 있을 수 있으므로 일치하는 DOM 요소가 여러 개 있을 수도 있으며 반환된 jQuery 개체 중간에 모두 캡슐화됩니다. .

해당하는 일치 항목이 없으면 빈 jQuery 개체가 반환됩니다.

예제 및 설명

다음 HTML 코드를 예로 들어 보겠습니다.

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>

이제 p 태그에 인접한 다음 형제 p 태그를 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.

// 选择了id为n5的一个元素
$("p + p");

다음, we 스팬 태그에 인접한 다음 형제 스팬 태그를 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.

// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span");

클래스 이름 a가 포함된 스팬 태그에 인접한 다음 형제 스팬 태그를 찾으려면 해당 jQuery 코드는 다음과 같습니다. :

// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a，因此无法匹配其next——n9
$("span.a + span");

p 태그 옆에 있는 다음 형제 span 태그를 찾습니다. 해당 jQuery 코드는 다음과 같습니다.

// 返回一个空的jQuery对象
// HTML中虽然有span标签，但不是p标签的同辈元素，而是其子代或后代
$("p + span");

위 내용은 jQuery의 이전 + 다음 선택기 사용법에 대한 기본 소개 및 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!