初心者でも安心！jQueryで親divのIDを簡単取得
2024-04-02
jQueryで親divのIDを取得する方法
jQueryを使って、要素の親divのIDを取得するには、いくつかの方法があります。 それぞれ異なる方法で親要素を取得できますので、状況に応じて適切な方法を選択する必要があります。
方法
-
parent()メソッド:
最も基本的な方法です。要素の直接的な親要素を取得します。
<div id="parent"> <div id="child"> </div> </div>const childDiv = $('#child'); const parentDivId = childDiv.parent().attr('id'); console.log(parentDivId); // "parent" -
要素のすべての親要素を取得します。
<div id="grandparent"> <div id="parent"> <div id="child"> </div> </div> </div>const childDiv = $('#child'); const parentDivs = childDiv.parents(); console.log(parentDivs.length); // 2 console.log(parentDivs[0].attr('id')); // "parent" console.log(parentDivs[1].attr('id')); // "grandparent" -
指定されたセレクターに合致する最も近い親要素を取得します。
<div id="grandparent"> <div class="container"> <div id="parent"> <div id="child"> </div> </div> </div> </div>const childDiv = $('#child'); const parentDiv = childDiv.closest('.container'); console.log(parentDiv.attr('id')); // "parent"
補足
- 上記の例では、
attr('id')メソッドを使ってIDを取得していますが、prop('id')メソッドでも同様に取得できます。 - 取得したい親要素の階層が分かっている場合は、
parent()メソッドを繰り返し使用することで取得できます。 - 複雑な条件で親要素を取得したい場合は、
closest()メソッドが便利です。
用語解説
- jQuery: JavaScriptライブラリの一つで、DOM操作を簡潔に記述することができます。
- DOM: Document Object Modelの略で、HTML文書をオブジェクトとして表現したものです。
- semantics: HTML要素の意味を表すものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="grandparent">
<div class="container">
<div id="parent">
<div id="child">
<button id="get-parent-id">親divのIDを取得</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#get-parent-id').click(function() {
const childDiv = $('#child');
// parent()メソッド
const parentDivId1 = childDiv.parent().attr('id');
console.log('parent()メソッド:', parentDivId1); // "parent"
// parents()メソッド
const parentDivs = childDiv.parents();
console.log('parents()メソッド:', parentDivs.length); // 2
console.log('parents()メソッド:', parentDivs[0].attr('id')); // "parent"
console.log('parents()メソッド:', parentDivs[1].attr('id')); // "grandparent"
// closest()メソッド
const parentDivId2 = childDiv.closest('.container').attr('id');
console.log('closest()メソッド:', parentDivId2); // "parent"
});
});
</script>
</body>
</html>
実行方法
- 上記のコードをHTMLファイルとして保存します。
- ブラウザでファイルを開きます。
- "親divのIDを取得"ボタンをクリックします。
- コンソールを確認します。
出力結果
parent()メソッド: parent
parents()メソッド: 2
parents()メソッド: parent
parents()メソッド: grandparent
closest()メソッド: parent
動作説明
$(document).ready(function() {の部分は、DOMContentLoadedイベントが発生した時に実行される処理です。$('#get-parent-id').click(function() {の部分は、"親divのIDを取得"ボタンがクリックされた時に実行される処理です。const childDiv = $('#child');の部分は、id="child"の要素を取得します。// parent()メソッドの部分は、parent()メソッドを使って、childDivの直接的な親要素を取得し、そのIDを出力します。
attr() メソッドを使って、data-parent-id のようなカスタム属性に格納された親divのIDを取得できます。
<div id="child" data-parent-id="parent">
...
</div>
const childDiv = $('#child');
const parentDivId = childDiv.attr('data-parent-id');
console.log(parentDivId); // "parent"
closest() メソッドと id セレクターを組み合わせて、特定のIDを持つ親divを取得できます。
<div id="grandparent">
<div id="parent">
<div id="child">
...
</div>
</div>
</div>
const childDiv = $('#child');
const parentDiv = childDiv.closest('#parent');
const parentDivId = parentDiv.attr('id');
console.log(parentDivId); // "parent"
ネイティブJavaScript
jQueryを使用せずに、ネイティブJavaScriptを使って親divのIDを取得することもできます。
<div id="child">
...
</div>
const childDiv = document.getElementById('child');
const parentDiv = childDiv.parentNode;
const parentDivId = parentDiv.id;
console.log(parentDivId); // "parent"
- シンプルな方法で親divのIDを取得したい場合は、
parent()メソッドを使うのがおすすめです。 - jQueryを使わずに親divのIDを取得したい場合は、ネイティブJavaScriptを使うのがおすすめです。
jquery dom semantics
