孫要素のIDを取得したい

Question

実現したいこと

孫要素のIDを取得したい

前提

JavaScriptとHTMLで表を作成しました。

発生している問題・エラーメッセージ

その表のクリックした箇所のIDを取得したいです。
クリックする範囲は id="bodyRight"の範囲内で、
取得したいIDは rightRow1_0　～　rightRow1_2　になります。
どの様に記述すればいいのでしょうか？

該当のソースコード

<div id="bodyRight"> <div id="pageRight1> <div id="tableBodyRight1> <tr>...</tr> <tr id="rightRow1_0"> <td>A0</td> <td>B0</td> <td>C0</td> </tr> <tr id="rightRow1_1"> <td>A1</td> <td>B1</td> <td>C1</td> </tr> <tr id="rightRow1_2"> <td>A2</td> <td>B2</td> <td>C2</td> </tr> </div> </div> </div>

試したこと

console.log($(this).prop('id'));
⇒bodyRight

console.log($(this).children().children().prop('id'));
⇒tableBodyRight1

console.log($(this).children().children().children().prop('id'));
⇒なにも表示されない

Comments

[think49]

HTMLの文法違反です。
validatorが検出した問題を修正して下さい。
https://validator.w3.org/#validate_by_input

Answer 1

「id="pageRight1」や「id="tableBodyRight1」などクォートの付け忘れなどひどい状態なので
構造が正しく評価されるかどうかは運次第です

ちなみに直下の子供は「> *」 なので孫は「> * > *」です
（HTML部分も追記しました）

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const ids=[...document.querySelectorAll('#bodyRight > * > *')].filter(x=>x.id).map(x=>x.id);
  console.log(ids); // [ tableBodyRight1 ]
});
</script>
<div id="bodyRight">
<div id="pageRight1">
<div id="tableBodyRight1">
<tr>...</tr>
<tr id="rightRow1_0">
<td>A0</td>
<td>B0</td>
<td>C0</td>
</tr>
<tr id="rightRow1_1">
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr id="rightRow1_2">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</div>
</div>
</div>

Comments

[TomJerry]

クォートのつけ忘れはこちらの掲示板に手打ちで打ったつけ忘れですが、
添付画像の様にクォートは付けています。

ご提示いただいたものでログ確認した所、➡[]　と何も表示されませんでした。
何か使い方が間違っていますか？

[yambejp]

> 何も表示されませんでした

HTML部分も追記しておきました
上記サンプルをコピペして確認してみてください

[TomJerry]

HTML部分を追記したサンプルありがとうございました。
動作を確認してみます。

Answer 2

公式のドキュメントを参照しましょう。
https://api.jquery.com/prop/

Get the value of a property for the first element in the set of matched elements

すべてのid属性値を得るには、each() で要素のループなどをしましょう。

---

クリックされた<tr>に何かしたいのなら、以下のような感じです。
(<div>の直下に <tr> を入れるのは面倒なので<table>を入れてます)

<div id="bodyRight">
<div id="pageRight1">
<div id="tableBodyRight1">
<table>
  <tr>...</tr>
  <tr id="rightRow1_0"> <td>A0</td> <td>B0</td> <td>C0</td> </tr>
  <tr id="rightRow1_1"> <td>A1</td> <td>B1</td> <td>C1</td> </tr>
  <tr id="rightRow1_2"> <td>A2</td> <td>B2</td> <td>C2</td> </tr>
</table>
</div>
</div>
</div>
<script>
document.querySelector('#bodyRight').addEventListener('click', e => {
  // 以前に付けたスタイルを解除する
  const previouslySelected = e.currentTarget.querySelector('.selected');
  if (previouslySelected)
    previouslySelected.classList.remove('selected');

  // クリックされた要素に直近の <tr> を探す
  const clickedRow = e.target.closest('tr');
  if (clickedRow) {
    // クリックされた <tr> に何かする。ここではスタイルを付けている。
    clickedRow.classList.add('selected');
  }
});
</script>
<style>
.selected {
  background-color: #cfc;
}
</style>

Comments

[TomJerry]

公式のドキュメントでpropを確認した所、
一番最初のtr要素にidを付けていない為に、以下のものが何も表示されない結果になった事が理解出来ました。
console.log($(this).children().children().children().prop('id'));
試しに一番最初のtr要素にidを付けると、idが出てきました。

>すべてのid属性値を得るには、each() で要素のループなどをしましょう。
こちらはすべてのid属性を得るものであって、クリックした行のtrのみを得ることが出来るのでしょうか？
無知ですみません。

[int32_t]

質問のタイトルに従ってこのような回答になりましたが、

> クリックした行のtrのみを得ることが出来るのでしょうか？

クリックした行が欲しいなら、$(this) から children() を辿っていくのは間違った手段だと思います。DOMツリー上には「どこがクリックされたか」という情報はないので。
そもそも質問文のコードがどういう状況で実行されるのかが不明です。クリックされたときにイベントリスナの中で実行されるものなら、そのように質問文に書きましょう。それによって手段が変わります。

[TomJerry]

そうなんですね。
質問の仕方が違っていたんですね。
すみませんでした。

[int32_t]

クリックされた<tr>に何かするサンプルを回答に追加しました。

[TomJerry]

お返事遅くなってしまいすみません。

又、サンプルまで用意して頂きありがとうございます。
先程確認したら私のやりたい事が叶いました。