jquery - jqueryを使用してテーブルでtdの親trを見つける方法は?

Question

私はasp.net mvc 3に取り組んでいます。次の構造があります。

<tr data-uid="123">
<td>
<a href="#" id="click">Click Me</a>
</td>
</tr>

ここで、タグの data- 属性値を見つけたいと思います。私は次のように試しました、

$("a#click").click(function(){
 var i= $(this).parent('td').parent('tr').data('uid');
});

しかし、私にはうまくいきません。私を導いてください。

Answer 1

closest各レベルで親をクロールしたくない場合は、このメソッドを使用して、照会されるセレクターの最も近い親を取得できます。

$("#click").click(function(e){
    e.preventDefault();

    var $i = $(this).closest('tr').attr('data-uid');
    console.log($i);

    var $j = $(this).closest('tr').data('uid');
    console.log($j);
});​

e.preventDefault()デフォルトのアクションを防ぐためだけです。不要な場合は削除できます。

また、trそれを機能させるために、テーブルタグで囲まれていることを確認してください。

ここでフィドル

Answer 2

答え

$("a#click").click(function(e){
    e.preventDefault();
    var i = $(this).closest('tr').attr('data-uid');
    console.log(i);
    var j = $(this).closest('tr').data('uid');
    console.log(j);
});

デモを見る

---

最も近い行を見つける方法は?

使用.closest():

var $row = $(this).closest("tr");

---

使用.parent():

この.parent()方法を確認してください。これは a.prev()との代替です.next()。

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

---

すべてのテーブル セルを取得<td>

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

デモを見る

---

特定のものだけを取得<td>

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

デモを見る

---

便利な方法

• .closest()- セレクターに一致する最初の要素を取得します
• .parent()- 一致する要素の現在のセット内の各要素の親を取得します
• .parents()- 一致する要素の現在のセット内の各要素の祖先を取得します
• .children()- 一致した要素のセット内の各要素の子を取得します
• .siblings()- 一致した要素のセット内の各要素の兄弟を取得します
• .find()- 一致する要素の現在のセット内の各要素の子孫を取得します
• .next()- 一致した要素のセット内の各要素の直後の兄弟を取得します
• .prev()- 一致した要素のセット内の各要素の直前の兄弟を取得します

Answer 3

コードはそのまま動作するはずですが、複数の .parent() を使用する代わりに、parent('tr') を使用する必要があります。http://api.jquery.com/parents/

$(function() {
  $("a#click").click(function(){
    var i= $(this).parents('tr').data('uid');
  });​
});

デモ: http://jsfiddle.net/mchambaud/G5jM8/1/

Answer 4

試しました.attr()か？

$("a#click").click(function(){
    var i= $(this).parent('td').parent('tr').attr('data-uid');
    console.log( i );
});

Answer 5

これを使って：

var i= $(this).parent('td').parent('tr').attr('data-uid');