jQuery | 要素やその親子要素からid・class名を取得するパターンまとめ

2019-03-102023-02-16jQuery 取得,jQuery

jQueryで要素・親要素からid・class名を取得するパターン集です。

クリックした要素のidを取得する

クリックした要素に指定されているid名を取得するHTMLとjQueryのサンプルコードになります。

<div id="id-name"></div>

$('div').click(function() {
	let id_name = $(this).attr('id')
});

// id-name

複数idが指定されている場合は半角スペース区切りで取得します。

クリックした要素のclass名を取得する

クリックした要素に指定されているclass名を取得するHTMLとjQueryのサンプルコードになります。

<div class="class-name"></div>

$('div').click(function() {
	let class_name = $(this).attr('class')
});

複数classが指定されている場合は半角スペース区切りで取得します。

idを指定して要素のclass名を取得する

指定したid名を持つ要素に指定されているclass名を取得するHTMLとjQueryのサンプルコードになります。

<div id="id-name" class="class-name"></div>

let getClass = $('#id-name').attr('class')

複数classが指定されている場合は半角スペース区切りで取得します。

クリックした要素の最初のidやclass名を取得する

<div id="id1 id2" class="class1 class2"></div>

let getId = $(this).attr('id').split(" ")[0]
let getClass = $(this).attr('class').split(" ")[0]

idやclass名が複数ある要素からattr()で取得した場合は配列としてではなく文字列”class1 class2”として取得されます

半角スペースで分割して配列に格納、[0]で最初の値を取得します

クリックした要素の2つ目の最初のidやclass名を取得する

<div id="id1 id2" class="class1 class2"></div>

let getId = $(this).attr('id').split(" ")[1]
let getClass = $(this).attr('class').split(" ")[1]

idやclass名が複数ある要素からattr()で取得した場合は配列としてではなく文字列”class1 class2”として取得されます

半角スペースで分割して配列に格納、[1]で2つ目の値を取得します

クリックした要素の親要素のidを取得する

See the Pen クリックした要素の親要素のidを取得する by yochans (@yochans) on CodePen.

<div id="id1">
	<div class="class1"></div>
</div>

$('.class1').click(function() {
	let getId = $(this).parent().attr('id')
});

parent()は指定した要素の直近の親要素にアクセスします

２つ上の親要素を取得する場合

<div id="id1">
	<div>
		<div class="class1"></div>
	</div>
</div>

$('.class1').click(function() {
	let getId = $(this).parent().parent().attr('id')
});

parent()を繋げる事で２つ上の親要素にアクセス可能です。

親要素を辿って一番近い場所にある指定タグのidを取得する

See the Pen 親要素を辿って一番近い場所にあるdivのidを取得する by yochans (@yochans) on CodePen.

<div id="main">
	<nav id="navi">
		<p class="class1">CLICK</p>
	</nav>
</div>

$('.class1').click(function() {
	let getId = $(this).closest('div').attr('id')
});

parent()ではタグ指定は出来ても間近の親要素にしかアクセスしませんが、closest()は指定した要素の直近の親要素から順番に辿っていき一番近くにある指定した種類のタグにアクセスします。（サンプルではdiv）

クリック要素の直近の子要素のid・classを取得する

See the Pen 親要素を辿って一番近い場所にあるdivのidを取得する by yochans (@yochans) on CodePen.

<div class="class1">
	<div id="id1"></div>
</div>

$('.class1').click(function() {
	let getId = $(this).children().attr('id')
});

children()は小要素の情報にアクセスします。

以下の２つは同じ結果を返します。

$('.class1').click(function() {
	let getIdA = $(this).children().attr('id')
	let getIdB = $(this).children().attr('id')
});