Come faccio a selezionare tutto < th > elementi della classe & # 8220; sortasc & # 8221; all'interno di una tabella con un ID specifico?

Question

Diciamo che ho il seguente HTML:

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

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

So che posso fare quanto segue per ottenere tutti gli th che hanno class = " sortasc "

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

Tuttavia, ciò mi dà gli th elementi sia della tabella pippo che della barra .

Come posso dirlo per darmi solo gli elementi th dalla tabella pippo ?

Answer 1

table # foo th.sortasc

Answer 2

Ecco come lo faresti con JS semplice:

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

Il selettore CSS sarebbe simile a "#foo th.sortasc". In jQuery sarebbe $ ('# foo th.sortasc').

Answer 4

Con una tabella nidificata, come:

<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') ti darà tutto i th perché stai usando un selettore discendente . Se vuoi solo quelli di foo, allora dovresti utilizzare il selettore figlio - $ ('table # foo > th.sortasc').

Nota che il selettore figlio è non supportato in CSS per IE6, anche se JQuery continuerà a funzionare correttamente fallo da JavaScript.