jQueryでイベント発生時のid取得

Question

下記の様なサンプルで、text要素の値が変わった時、その上にあるdiv要素のidを取得することは出来るでしょうか。

text要素にもidを割り当てれば解決すると思います。
一般的には、要素には極力idを割り当てておいた方が無難なのでしょうか。

  <!-- html -->
  <div id="idSample_1">
    <input type="text" value="sample1">
    <input type="text" value="sample2">
  </div>
  <div id="idSample_2">
    <input type="text" value="sample1">
    <input type="text" value="sample2">
  </div>

  //jQuery
  $("div > text").change(function() {
    //div要素のidを取得する
    //$("div > text").parent("div").attr("id");  ←undefined
  });

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

まず、div > text では取得できません。div > input[type="text"] こういうことがしたいのでは？

  $( 'div > input[type="text"]' ).change( function() {
    //div要素のidを取得する
    console.log( $( this ).parent( 'div' ).attr( 'id' ) );
  } );
```**動くサンプル：**[https://jsfiddle.net/f8yutg07/](https://jsfiddle.net/f8yutg07/)

Comments

[uer03108]

有難うございました。
サンプルサイトも便利ですね。

Answer 2

こんな感じに、クラス指定したtextのみ、変更があればid取得とかもできますね。
changeイベントがあるものなら、classで指定してやれば流用できる感じです。

js(jQuery)

$('.check').change( function() {
    //div要素のidを取得する
    alert( $( this ).parent( 'div' ).attr( 'id' ) );
});

html

 <div id="idSample_1">
    <input class="check" type="text" value="sample1">
    <input class="check" type="text" value="sample2">
  </div>
  <div id="idSample_2">
    <input class="check" type="text" value="sample1">
    <input class="check" type="text" value="sample2">
  </div>