ホームページ > 記事 > ウェブフロントエンド > jquery での prev、next、兄弟セレクターの表示例
jquery での prev、next、兄弟セレクターの表示例
- 巴扎黑オリジナル
- 2017-06-22 14:34:071827ブラウズ
js では、prev、next、兄弟の 3 つのメソッドが前、次、その他の兄弟を指します。jquery の DOM 要素の prev、next と兄弟の例を見てみましょう。編集者の勉強。
jquery で要素の隣接する要素を取得したい場合、使用できるコマンドが 3 つあります:
next(): 次の兄弟要素を取得するために使用されます。
prev(): 前の兄弟要素を取得するために使用されます。
siblings(): すべての兄弟要素を取得するために使用されます。
今回は、前の兄弟、次の兄弟、他の兄弟を含む、下位要素の兄弟要素を取得します。操作を簡素化し、日常の使用を考慮するために、要素セット内の最初の要素の兄弟要素のみを取得します。
1. thisアクセス制御
$.fn._access = function(){
if (this.length) return callback.call(this);
else return this;
};コールバックは要素コレクションの長さが 0 より大きい場合にのみ実行され、それ以外の場合はこれが返されます。私たちは、アンダースコアで始まるメソッドとプロパティのペアがプライベート メソッドとプライベート プロパティであることに同意します。
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 つの方法があります:
それらを順番に取得します 要素の前の兄弟要素 array を反転し、要素の次の兄弟要素を順番に取得します
要素の親の子要素を取得し、一度走査して現在の要素を削除します。
ここで選択した 2 番目のメソッドは 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 での prev、next、兄弟セレクターの表示例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。