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

2019年3月12日CSS

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

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

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

HTML

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

jQuery

$('div').click(function() {

let getId = $(this).attr('id');

console.log(getId);//id1

});

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

HTML

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

jQuery

$('div').click(function() {

let getClass = $(this).attr('class');

console.log(getClass);//class1

});

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

HTML

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

jQuery

let getClass = $(’#id1’).attr('class');

console.log(getClass);//class1

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

HTML

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

jQuery

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


console.log(getId);//id1
console.log(getClass);//class1

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

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

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

HTML

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

jQuery

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


console.log(getId);//id1
console.log(getClass);//class1

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

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

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

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

HTML

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

jQuery

$('.class1').click(function() {

let getId = $(this).parent().attr('id');

console.log(getId);//id1
});

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

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

HTML

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

jQuery

$('.class1').click(function() {

let getId = $(this).parent().parent().attr('id');

console.log(getId);//id1
});

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

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

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

HTML

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

jQuery

$('.class1').click(function() {

let getId = $(this).closest('div').attr('id');

console.log(getId);//main
});

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

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

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

HTML

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

jQuery

$('.class1').click(function() {

let getId = $(this).children().attr('id');

console.log(getId);
});

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

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

$('.class1').click(function() {

let getIdA = $(this).children().attr('id');
let getIdB = $(this).children().attr('id');

console.log(getId);
});

2019年3月12日CSS

Posted by Yousuke.U