closestとは
- ここで説明する closest とは次の語句からなるjQueryのメソッドです。
- closest
- 読み: クローゼスト
意味: 最も近い
closestメソッドの概要
このメソッドは、呼び出し元要素の要素に最も近い先祖要素を取得します。
引数にはセレクターを指定する必要があります。引数が空の場合は、このメソッドは空の配列風オブジェクトを返し、要素は取得しません。
構文
サンプルを見る前に構文を確認しておきます。
elmAncestor = $(Selector).closest(ancestor);サンプルコードと実行結果
ここでは、メソッドの呼び出し元を span要素とします。
span の親に li要素、その親に ul要素、またその親に div要素を配置し、メソッドで先祖の中から ul要素を取得して、背景色を赤に設定します。
サンプルコード: CSS
<style>
div, ul, li, b, span{
display: block;
border: medium solid ##black;
background-color: ##white;
margin: 0.3em;
padding: 0.3em;
}
#idSpan{
background-color: ##lightblue;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li><b>b Element</b></li>
<li>< span id="idSpan">span Element< /span></li>
<li><b>b Element</b></li>
</ul>
</div>
<button id="idButton">Click</button>
<script>...</script>
</body>
- 09: span (id="idSpan"の要素です。この要素が、closest()の呼び出し元です。)
- 07-11: ul (ここでは、この要素を取得して背景色を赤に設定します。)
- 13: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("#idSpan").closest("ul").css("background-color", "##red");
});
</script>
- 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03: $("#idSpan").closest("ul") (識別子 idSpanを持つ要素の先祖要素の中から最も近い ul要素を取得します。)
- b Element
- span Element
- b Element