jQuery：指定子元素的索引连续的onclick函数

Question

我有一个表行的单击函数，它需要传递该行中前两个 td 的内容。

// Assign a click handler to the rows
$('#supportTables1 tr').click(function ()
{
    var firstTd = $(this).find('td').html();
    //need to get the next td.  below line doesn't work.
    var secondTd = $(this).find('td')[1].html();
    window.open('snglContactList.php'+'?search_word='+firstTD+'?list_name=secondTd);
});

我可以很好地获取第一个 td，但我对访问第二个 td 的极其简单的问题感到困惑（我尝试了设置其索引的不同方法）。

Answer 1

数组表示法 [1] 返回 DOM 元素，而不是 jQuery 对象，因此您不能在其上使用 .html() （一个 jQuery 方法）。使用 jQuery 函数 .eq() 来获取元素：

  // Assign a click handler to the rows
  $('#supportTables1 tr').click(function ()
  {
        var firstTd = $(this).find('td').eq(0).html();
        var secondTd = $(this).find('td').eq(1).html();
        window.open('snglContactList.php'+'?search_word='+firstTD+'?list_name='+secondTd);
  });

Answer 2

$(this).find('td') 将返回所有 在单击的行内。您可以使用 eq(idx) 方法获取特定索引处的索引：

$('#supportTables1 tr').click(function ()
{
    var tds = $(this).find('td');
    var firstTd = tds.eq(0).text();
    var secondTd = tds.eq(1).text();
    window.open('snglContactList.php'+'?search_word='+firstTD+'?list_name='+secondTd);
});

此处的工作示例（使用警报而不是 window.open...）：

http://jsfiddle.net/E5Z5V/

Answer 3

表格行有自己的单元格集合，可以通过 cells 属性访问。

这样做：

var firstTd = this.cells[ 0 ].innerHTML;
var secondTd = this.cells[ 1 ].innerHTML;

或者如果您坚持使用 jQuery 解决方案，请执行以下操作：

var firstTd = $(this.cells[ 0 ]).html();
var secondTd = $(this.cells[ 1 ]).html();

---

示例： http:// jsbin.com/ivabu4/

请注意，第一个版本最快，因为它直接访问属性。