假设我有以下HTML：

<table id="foo">
  <th class="sortasc">Header</th>
</table>

<table id="bar">
  <th class="sortasc">Header</th>
</table>

我知道我可以执行以下操作以获取所有具有class =" sortasc"的元素

$$('th.sortasc').each()

但是，这给了我来自表foo和表bar的第th个元素。

我怎样才能告诉它只给我表foo中的第一个元素？

解决方案

table＃foo th.sortasc

CSS选择器将类似于" #foo th.sortasc"。在jQuery中将是$('＃foo th.sortasc')。

这是使用纯净JS的方法：

var table = document.getElementById('tableId');
var headers = table.getElementsByTagName('th');
var headersIWant = [];
for (var i = 0; i < headers.length; i++) {
  if ((' ' + headers[i].className + ' ').indexOf(' sortasc ') >= 0) {
    headersIWant.push(headers[i]);
  }
}
return headersIWant;

带有嵌套表，例如：

<table id="foo">
  <th class="sortasc">Header</th>
  <tr><td>
    <table id="nestedFoo">
      <th class="sortasc">Nested Header</th>
    </table>
  </td></tr>
</table>

$('table＃foo th.sortasc')将为我们提供所有信息，因为我们使用的是后代选择器。如果只需要foo的th，则应使用子选择器$('table＃foo> th.sortasc')。

请注意，IE6的CSS不支持子选择器，尽管JQuery仍可以通过JavaScript正确地选择子选择器。