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

Question

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

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

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

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

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

Однако это дает мне элементы th как из таблицы foo , так и из таблицы bar .

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

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

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

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

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

Answer 4

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