jquery의 이전, 다음 및 형제 선택기 표시 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery의 이전, 다음 및 형제 선택기 표시 예

巴扎黑

Jun 22, 2017 pm 02:34 PM

jquerynext선택자

js에서 prev, next 및 siblings 세 가지 메소드는 jquery에서 DOM 요소의 prev, next 및 siblings의 예를 살펴보겠습니다. 편집자 연구.

jquery에서 요소의 인접 요소를 가져오려는 경우 사용할 수 있는 세 가지 명령이 있습니다.

next(): 다음 형제 요소를 가져오는 데 사용됩니다.
prev(): 이전 형제 요소를 가져오는 데 사용됩니다.
siblings(): 모든 형제 요소를 가져오는 데 사용됩니다.

이번에는 이전 형제, 다음 형제 및 기타 형제를 포함하여 하위 요소의 형제 요소를 가져오겠습니다. 작업을 단순화하고 일상적인 사용을 고려하기 위해 요소 세트에서 첫 번째 요소의 형제 요소만 사용합니다.

1. this액세스 제어

$.fn._access = function(){
 if (this.length) return callback.call(this);
 else return this;
};

콜백은 요소 컬렉션의 길이가 0보다 큰 경우에만 실행되고, 그렇지 않으면 this가 반환됩니다. 우리는 밑줄로 시작하는 메서드와 속성 쌍이 프라이빗 메서드와 프라이빗 속성이라는 데 동의합니다.

2.prev, 이전 형제

/**
 * 获取当前元素的前一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.prev = function() {
    return this._access(function() {
        return $(this[0].previousElementSibling);
    });
};

3.next, 다음 형제

/**
 * 获取当前元素的后一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.next = function() {
    return this._access(function() {
        return $(this[0].nextElementSibling);
    });
}

4.siblings, 다른 형제

/**
 * 获取当前元素的兄弟元素集合
 * @param {String} selector 选择器，可以为空
 * @return new this
 * @version 1.0
 * 2013年12月29日2:14:20
 */
$.fn.siblings = function(selector) {
    return this._access(function() {
        var element = this[0],
            children = element.parentElement.children,
            ret = [],
            i;
        this.each.call(children, function() {
            if (!this.isEqualNode(element)) {
                if (selector) {
                    _matchesSelector(this, selector) && ret.push(this);
                } else ret.push(this);
            }
        });
        return $(ret);
    });
};

요소의 다른 형제 요소를 얻는 방법에는 2가지가 있습니다.

순서대로 가져오기 요소의 이전 형제 요소 배열을 뒤집은 다음 요소의 다음 형제 요소를 차례로 가져옵니다.
요소 부모의 하위 요소를 가져온 다음 한 번 순회하여 현재 요소를 제거합니다.
여기서 선택한 두 번째 방법은 두 번째 방법인데, 그 중 jquery가 첫 번째로 선택된 방법입니다.

예

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
　 display:block;
　 width:80px;
　 height:80px;
　 margin:5px;
　 background:#bbffaa;
　 float:left;
　 font-size:14px;
}
div#small {
　 width:60px;
　 height:25px;
　 font-size:12px;
　 background:#fab;
}
</style>
<script src="" > </script>
</head>
<body>
<div>div (doesn&#39;t match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div > </div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script> 
//　 ~ 代表id"prem"后面的div都要变 
$("#prev ~ div").css("border", "3px groove blue"); 
// + 代表id"prev"后面的第一个div要变 
$("#prev + div").css("border", "3px groove blue"); 
</script>
</body>
</html>

위 내용은 jquery의 이전, 다음 및 형제 선택기 표시 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사