Question

我有以下代码：

var table1 = $('[id="table1"]');
var table2 = $('[id="table2"]');

我需要在每个表中输入指定id的文本内容，如下所示：

var words1 = $('[id^="table-row-"]');
var words2 = $('[id^="table-row-"]');

请注意id^="table-row-"，因为它是可变的，例如＆＃34; table-row-1 ＆＃34;，＆＃34; table-row- 2 ＆＃34;等

我试过这样的东西，但它不起作用：

var words1 = $('[id^="table-row-"]').table1;

我需要做什么？

Answer 1

首先，您可以使用#查找ID：

var $table1 = $('#table-1');

您可以像这样分隔单独的子选择器：

var $table1row1 = $('#table-1 #table-row-1');

或者，如果您缓存了初始jQuery对象，则可以执行$.find()：

var $table1 = $('#table-1'),
    $tableRow1 = $table.find('#table-row-1');

但是，ID 始终对整个文档都是唯一的。切勿在多个元素上使用相同的ID。如果您有一个名为table-row-1的ID，那么该ID应该是该文档中出现的唯一时间，您只需执行以下操作：

var $tableRow1 = $('#table-row-1');

我相信您的HTML应该看起来更像这样：

<table id="table-1">
  <tr class="table-row-1">
    <td></td>
  </tr>
  <tr class="table-row-2">
    <td></td>
  </tr>
</table>

<table id="table-2">
  <tr class="table-row-1">
    <td></td>
  </tr>
  <tr class="table-row-2">
    <td></td>
  </tr>
</table>

因此，您拥有可在多个表中重用的类，然后您可以查找每个表中的表行。

$table1row1 = $('#table-1 .table-row-1');

另请注意，如果您只是递增行，则还可以在父元素中find elements by their index。所以，鉴于以上HTML：

$('#table-one tr').eq(1); // returns the first tr element in #table-one

注意：在存储jQuery对象时，习惯上使用$在变量名前加上，以表示它是一个引用jQuery对象。

Answer 2

您可以通过索引访问

 $('[id^="table-row-"]')[0]
 $('[id^="table-row-"]')[1]

Answer 3

为什么不使用native（非jQuery）querySelector？

var table = document.querySelector("table");
var row = table.querySelector("tr");
var cell = row.querySelector("td");
alert(cell.innerHTML);

......或者，如果你坚持使用jQuery：

var $tables = $("table");
var $rows = $($tables[0]).find("tr");
var $cells = $($rows[0]).find("td");
alert($($cells[0]).html());

这有点不同，因为jQuery返回所有元素（在上面的例子中，使用$（xxx [0]）来获取第一个实例）。如果要以本机方式查找所有实例，请使用querySelectorAll。

Jquery选择元素内的元素

3 个答案: