jQuery.siblings() 함수 사용법에 대한 자세한 설명

巴扎黑
풀어 주다: 2017-06-24 10:18:29
원래의
2398명이 탐색했습니다.

siblings() 함수는 일치하는 각 요소의 모든 형제 요소(자체 제외)를 선택하고 이를 jQuery 개체 형식으로 반환하는 데 사용됩니다.

선택기를 사용하여 선택 범위를 더 좁히고 지정된 선택기와 일치하는 요소를 필터링할 수도 있습니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

jQueryObject.siblings( [ 선택기 ] )

Parameters

매개변수                                                                                                                선택기

문자열

은 문자열 유형으로 지정됩니다. siblings() 함수는 현재 jQuery 개체에서 일치하는 각 요소의 모든 형제 요소 중에서 지정된 선택기와 일치하는 요소를 필터링합니다. ㅋㅋ 선택기 매개변수가 다음과 같은 경우 생략하면 일치하는 각 요소의 모든 형제 요소가 선택됩니다.

반환 값

siblings()

함수

의 반환 값은 jQuery 유형이며 지정된 선택기와 일치하는 현재 jQuery 객체에서 일치하는 각 요소의 모든 형제 요소를 캡슐화하는 새로운 jQuery 객체를 반환합니다.

일치하는 요소가 없으면 빈 jQuery 객체가 반환됩니다.

예제 및 설명

다음 HTML 코드를 예로 들어보세요.

<p id="n1">
    <span id="n2">
        <span id="n3">A</span>
    </span>
    <label id="n4">B</label>
    <span id="n5">
        <span id="n6">C</span>
    </span>
    <strong id="n7" class="active">D</strong>
    <span id="n8" class="active">E</span>
</p>
<p id="n9">
    <span id="n10"></span>
    <label id="n11"></label>
    <span id="n12" class="active"></span>
</p>
로그인 후 복사

다음 jQuery 샘플 코드는 siblings() 함수의 구체적인 사용법을 보여주는 데 사용됩니다.

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
    return $doms.map(function(){
        return "#" + this.id;
    }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己,下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12
로그인 후 복사

위 내용은 jQuery.siblings() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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