Как выбрать все элементы <th> класса sortasc в таблице с определенным идентификатором?

Question

Допустим, у меня есть следующий HTML:

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

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

Я знаю, что могу сделать следующее, чтобы получить все й элементы, имеющие class="sortasc"

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

Однако это дает мне й элементы из обеих таблиц фу и стол бар.

Как я могу сказать, чтобы он давал мне только элементы из таблицы? фу?

Answer 1

таблица#foo th.sortasc

Answer 2

Вот как это можно сделать с помощью обычного 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;

Answer 3

Селектор CSS будет выглядеть примерно так: «#foo th.sortasc».В jQuery это будет $('#foo th.sortasc').

Answer 4

С вложенной таблицей, например:

<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's th, вам следует использовать дочерний селектор - $('таблица#foo > th.sortasc').

Обратите внимание, что дочерний селектор не поддерживается в CSS для IE6, хотя JQuery по-прежнему будет правильно делать это из JavaScript.