How to select all <th> elements of the "sortasc" class in a table with a specific identifier?

Question

Let's say I have the following HTML:

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

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

I know I can do the following to get all th elements that have class = "sortasc"

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

However, this gives me th elements from table foo and table.

How can I tell him to give me only th elements from the foo table?

Answer 1

table # foo th.sortasc

Answer 2

So you can do it with 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') , - $('table # foo > th.sortasc').

Note that the child selector is not supported in CSS for IE6, although jQuery will still correctly do this from JavaScript.