ホームページ > 記事 > ウェブフロントエンド > jqueryで兄弟要素を削除する方法
jqueryで兄弟要素を削除する方法
- 青灯夜游オリジナル
- 2023-01-18 11:31:141374ブラウズ
兄弟要素を削除する Jquery メソッド: 1. jquery セレクターを使用して、指定された要素を取得します。構文 "$("selector")" は、指定された要素を含む jquery オブジェクトを返します。 2. 兄弟() を使用します。必要に応じて、)、next()、prev()、およびその他の関数を使用して兄弟要素を取得します。構文は「指定された要素.siblings()」です。 3. 取得した兄弟要素を削除するには、remove() 関数を使用します。構文は「」です。兄弟.remove()" 。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
jquery の兄弟要素を削除するアイデア:
指定された要素の兄弟要素を取得します
-
remove() メソッドを使用して、取得した兄弟要素を削除します
では、jquery で兄弟要素を取得するにはどうすればよいでしょうか?
実際、jquery は、さまざまなニーズを満たすために兄弟要素を取得するために 7 つのメソッドを採用しています。
siblings() メソッドは、主にすべての要素を取得するために使用されます。指定された要素の同じレベル
#next() メソッド。主に、指定された要素の次の兄弟要素を取得するために使用されます。
nextAll( ) メソッド。主に、指定された要素の次の兄弟のすべての要素を取得するために使用されます。
nextUntil() メソッド。主に、指定された要素の次の兄弟要素、この兄弟を取得するために使用されます。 element は、指定された要素と nextUntil() メソッドで設定された要素の間の要素である必要があります。
-
prev() メソッドは主に、指定された要素の上位レベルの兄弟要素を取得するために使用されます。
prevAll() メソッド、主に指定された要素の上位レベルにあるすべての兄弟要素を取得するために使用されます。
prevUntil() メソッド、主に指定された要素を取得するために使用されます 要素の前の兄弟要素。この兄弟要素は、指定された要素と prevUntil() メソッドによって設定された要素の間の要素である必要があります。必要に応じて兄弟要素を取得するメソッドを 1 つ選択し、remove() を使用して兄弟要素を削除するだけです。
例 1: すべての兄弟要素を削除します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").siblings().css({
"color": "red",
"border": "2px solid red"
});
$("button").click(function() {
$("li.start").siblings().remove();
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">类名称为“star”的li元素</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>选择类名称为“star”的li元素的所有兄弟元素</p>
<button>删除所有兄弟元素</button>
</body>
</html>
例 2: 指定された配下の要素を削除します要素 すべての兄弟要素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextAll().css({
"color": "red",
"border": "2px solid red"
});
$("button").click(function() {
$("li.start").nextAll().remove();
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">类名称为“star”的li元素</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>选择类名称为“star”的li元素下面的所有兄弟元素</p>
<button>删除指定元素下面的所有兄弟元素</button>
</body>
</html>
[推奨学習:
jQuery ビデオ チュートリアル、
Web フロントエンド ビデオ
以上がjqueryで兄弟要素を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。