jquery의 이전, 다음 및 형제 선택기 표시 예
- 巴扎黑원래의
- 2017-06-22 14:34:071824검색
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'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!