Como obter apenas elementos filhos diretos pela função jQuery

87

Tenho uma estrutura de tabela como esta:

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

Em javascript, eu tenho uma variável tblcom valor de $(table1)e, em seguida, quero obter todos os elementos filhos diretos (tr) <tbody>de table1. Meu código é:

$('tr', tb1)

Aparentemente, ele retorna todos os <tr>elementos da tabela1 e da tabela2. Eu acho que posso sobreviver

$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})

ou esse tipo de lógica.

Eu sei que $('table1 > tbody > tr')posso pegar o filho direto tr. Infelizmente não posso usar isso.

Alguém tem uma boa ideia sobre isso?

Obrigado.

Jason Li
fonte

Respostas:

177

Você pode usar find():

tbl.find("> tbody > tr")

Josh Leitzel
fonte
2
esta é uma ideia brilhante. $ ('> tbody> tr', tb1) também funciona para mim. Obrigado.
Jason Li
1
Isso é maravilhoso, eu não sabia que você podia usar o seletor filho direto ( >) sem especificar nada na frente dele. Obrigado.
silkfire
3
Observe que para filhos diretos que estão apenas um nível abaixo, você pode simplesmente usar 'filhos ([seletor])'.
orad
37
CRIANÇAS DIRETAS = filhos de um nível abaixo , portanto api.jquery.com/children é a resposta certa, não find () - que se obtém TODOS os descendentes do elemento (filtrado pelo seletor) ...
jave.web
4
Você deve fazer seu comentário como uma resposta separada jave.web, pois a sua é A resposta correta.
mrmillsy
23

Como @ jave.web mencionado nos comentários

Para pesquisar os filhos diretos de um uso de elemento .children(). Ele só pesquisará através dos filhos diretos e não penetrará mais fundo. http://api.jquery.com/children/

Chris
fonte
5

Este é exatamente o motivo pelo qual devemos ter cuidado com o aninhamento de tabelas. Eu realmente espero que você os use para dados e não layout de página.

Outro problema que provavelmente arruinará o seu dia é o uso de seletores CSS em tabelas aninhadas ... você basicamente tem o mesmo problema - você não consegue selecionar os elementos TR da tabela externa sem selecionar aqueles dentro da tabela interna também. (Você não pode usar o seletor filho porque ele não é implementado no IE6)

Isso deve funcionar:

$("#table1 > tbody > tr")

No entanto, eu recomendo que você codifique o elemento TBODY, uma vez que você não deve depender do navegador para criá-lo para você.

Šime Vidas
fonte
2

http://api.jquery.com/child-selector/

$('tb1 > tr')

Jeremy
fonte
2
Isso só funcionaria se tb1fosse uma tag HTML, o que não é; e se trfosse filho direto dele (o que não é, é filho direto dele <tbody>).
Josh Leitzel