javascript - jQuery在元素中选择元素

我有以下代码：

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

我需要从每个表中获取指定ID的文本内容，如下所示：

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

请注意id^="table-row-"，因为它是可变的，例如“ table-row-1”，“ table-row-2”等。

我尝试了类似的方法，但是它不起作用：

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

我需要做什么？

最佳答案

首先，您可以使用#查找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对象的引用。