[jQuery] 要素から指定した要素の最も近い親要素を取得する（.closest）

投稿日：2018年9月11日

要素から指定した要素の最も近い親要素を取得するには、.closest() を使用します。

構文

（構文）: .closest(＜セレクタ＞)

セレクタの指定は必須です。

サンプルソース

例）ボタンを押すと、id="p2"から最も近い親要素(div)のIDを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>closestサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    var aa = $("#p2").closest("div").attr("id");
    console.log(aa);
  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
  <div id="d1"><b id="b1"><p id="p1">AAA</p></b></div>
  <div id="d2"><b id="b2"><p id="p2">BBB</p></b></div>
  <div id="d3"><b id="b3"><p id="p3">CCC</p></b></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>closestサンプル</title>

$(function(){

$('#btn1').click(function(){

var aa = $("#p2").closest("div").attr("id");

console.log(aa);

});

</script>

</head>

<body>

</body>

</html>

ボタンを押すと、コンソールに「d2」が表示されます。

解説

取得する親要素のセレクタの指定は必須です。

執筆者：とら