jQueryで最も近いメソッドを使用する方法-フロントエンドQ&A-php.cn

jQueryで最も近いメソッドを使用する方法

WBOY

リリース： 2022-05-09 11:35:06

オリジナル

3359 人が閲覧しました

jquery では、最も近いメソッドを使用して、選択した要素の最初の祖先要素を返します。この関数は、要素自体から上向きに一致させ、最初に一致した要素を返します。一致が見つからない場合は、次の値が返されます。「element object.closest(要素に一致するセレクター式)」という構文を持つ空の jQuery オブジェクト。

jQueryで最も近いメソッドを使用する方法

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

jquery で最も近いメソッドを使用する方法

closest() メソッドは、選択した要素の最初の祖先要素を返します。

先祖とは、父、祖父、曽祖父などです。

現在の要素から開始して、DOM ツリーを上にたどり、渡された式に一致する最初の単一の祖先を返し、0 または 1 つの要素を含む jQuery オブジェクトを返します。

closest( ) 関数は最初に実行されます。現在の要素が一致するかどうかを確認し、一致する場合は要素自体を直接返します。一致するものがない場合は、セレクターに一致する要素が見つかるまで、レイヤーごとに親要素を上方向に検索します。何も見つからない場合は、空の jQuery オブジェクトが返されます。

構文は次のとおりです:

選択した要素の最初の祖先要素を返します:

$(selector).closest(filter)

ログイン後にコピー

DOM コンテキストを使用して検索された DOM ツリー内の最初の祖先要素を返します:

$(selector).closest(filter,context)

ログイン後にコピー

フィルターは必須です。祖先要素の検索を絞り込むセレクター式、要素、または jQuery オブジェクトを指定します。

コンテキストオプション。一致する要素が見つかる DOM 要素。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点) 
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>   
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 --> 
</html>

ログイン後にコピー

出力結果:

jQueryで最も近いメソッドを使用する方法