jqueryで同じレベルの選択されていない要素をクリアする方法-フロントエンドQ&A-php.cn

jqueryで同じレベルの選択されていない要素をクリアする方法

青灯夜游

リリース： 2022-05-26 14:04:35

オリジナル

1262 人が閲覧しました

クリア方法: 1. 選択した要素の他のすべての兄弟要素を取得するには、siblings() を使用します。構文「specify element.siblings()」は、すべての兄弟要素を含む jquery オブジェクトを返します。2. Remove を使用します。 () は取得した兄弟要素を削除します。構文は「兄弟要素 object.remove()」です。

jqueryで同じレベルの選択されていない要素をクリアする方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

同じレベルで選択されていない要素をクリアするための jquery メソッド

1. 他のすべての兄弟を選択するには、兄弟() を使用します。 Element

siblings() メソッドは主に、指定された要素と同じレベルにあるすべての要素を取得するために使用されます。

$(selector).siblings()

ログイン後にコピー

はすべての兄弟を含む jquery オブジェクトを返します要素。

2. 取得した兄弟要素を削除するには、remove() を使用します。

同级元素对象.remove()

ログイン後にコピー

remove() メソッドは、すべてのテキストと子ノードを含む、選択した要素を削除します。このメソッドは、選択した要素からデータとイベントも削除します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").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>

ログイン後にコピー

jqueryで同じレベルの選択されていない要素をクリアする方法