如何使用jquery在表中查找td的父tr？

Question

我正在使用asp.net mvc 3.我有以下结构，

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

现在我想找到标签数据属性值。我试过了，

$("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包含在表格标记内以使其正常工作..

FIDDLE HERE

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);
});

<强> VIEW DEMO

---

如何找到最近的行？

使用.closest()：

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

---

使用.parent()：

检查此.parent()方法。这是.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>
});

<强> VIEW DEMO

---

仅限具体 <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>
});

<强> VIEW DEMO

---

有用的方法

• .closest() - 获取与选择器匹配的第一个元素
• .parent() - 获取当前匹配元素集中每个元素的父元素
• .parents() - 获取当前匹配元素集中每个元素的祖先
• .children() - 获取匹配元素集中每个元素的子元素
• .siblings() - 获取匹配元素集中每个元素的兄弟姐妹
• .find() - 获取当前匹配元素集中每个元素的后代
• .next() - 获取匹配元素集中每个元素的紧随其后的兄弟
• .prev() - 获取匹配元素集中每个元素的前一个兄弟

Answer 3

您的代码应该按原样运行，但您可以使用父代（'tr'）而不是使用多个.parent（）。 http://api.jquery.com/parents/

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

DEMO：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');