「jQuery」.closestで指定要素の最も近い親要素を取得する

2013年6月29日2022年2月18日

環境
jquery 3.6.0

書式
$(セレクタ名).closest(親要素タグ名).attr(属性名);
.closest() を使用して要素から指定した要素の最も近い親要素を取得します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('#btnShow').click(function(){
    var tA = $("#fukuoka").closest("span").attr("id");
    alert("最も近い親要素(span)のID名: "+tA);
    var tB = $("#fukuoka").closest("div").attr("id");
    alert("最も近い親要素(div)のID名: "+tB);
  });
});
</script>
</head>
<body>
  <input type="button" id="btnShow" value="検証">
  <div id="cftA"><span id="bA"><p id="tokyo">東京</p></span></div>
  <div id="cftB"><span id="bB"><p id="oosaka">大阪</p></span></div>
  <div id="cftC"><span id="bC"><p id="fukuoka">福岡</p></span></div>
  <div id="cftD"><span id="bD"><p id="yokohama">横浜</p></span></div>
</body>
</html>

実行結果
「検証」ボタンを押下すると、以下のメッセージを出力します。
最も近い親要素(span)のID名: bC
最も近い親要素(div)のID名: cftC

jQuery

Posted by arkgame

関連記事: