フォームテキスト入力の親行を検索

Question

私はHTMLテーブルのデータ属性を使用して、後でajax呼び出しで使用されるアイテムに関するデータを格納しようとしていますが、jQueryの選択に問題があります私はデータを取り戻そうとします。

これは動作します：

var listItemId = $(this).parent().parent().attr('data-id'); 

をしかし、.parent().parent()セレクタはあまりにも脆弱であり - 私が今まで私のHTMLの構造を変更した場合it'llを破ります。

これは私が何をしたいものですが、それはundefinedを返しますされています

var listItemId = $(this).parent('.list-item').attr('data-id'); 

私のHTMLは次のようになります。私は何をしないのです

<tr class="list-item" data-id="1"> 
    <td> 
    <input value="Some text entered by the user" type="text" > 
    </td> 
</tr> 

？

Answer 1

内部では、jqueryはこの種のものには.closestを使用します。あなたは（私は見たことがないが、私たちは知っていることはありません）テーブルを入れ子にしている場合

var listItemId = $(this).closest('tr').attr('data-id'); 

はさらに、あなたも最初の「TR」を選択する必要があります。 （これは、行よりもdivを探す方が便利です）。しかし、コード統一のために、私は最も近いものが必要なときに両親を使用しません。そのように、関数名は

（ this jsperfをご確認ください）.parents（）は、（IMO）賢明

パフォーマンスを解釈する余地を残し、これにより、コードの可読性を削減しながら、彼らは同等であり、それは正確に（最も近い親）を意味しています意味しますparentNodeを（マイルで速く何よりも、あなたは本当にスピードが必要な場合）

をお使いの場合には：最後に、あなたはあまりにも純粋javasrciptのapproacheを考慮することができる

var listItemId = $(this.parentNode.parentNode).attr('data-id'); 

または

var listItemId = this.parentNode.parentNode.attributes['data-id'].value; 

NB：純粋なJavaScriptの方法は、あなたの質問内の1つの（あなたのinputタグを閉じて、テーブル1を追加します）とは異なり、動作するように有効なHTMLを必要としています。

here is a little fiddle

Answer 2

は

var listItemId = $(this).parents('.list-item').attr('data-id'); 

parents()がツリーに上がることはセレクタ

Answer 3

と一致するまで、私がお勧めしてみてください。

var listItemId = $(this).parents('tr').data('id'); 

をクラスセレクタは、すべてのjQueryのセレクタの最も遅いですあなたが必要とする情報を他に行く方法がない限り避けるべきです。

UPDATEは、私が正しく.data()方法を利用するために、構文を修正しました。この方法では、1.4.3以降のバージョンでのみ動作します。

Answer 4

$(this).closest('tr').attr('data-id'); 

これはあなたの問題のための最適なソリューションとなります。あなたが新しい<tr>タグを間に入れない限り、コードはあなたのHTML構造に依存しません