Cómo obtener solo elementos secundarios directos mediante la función jQuery

89

Tengo una estructura de tabla como esta:

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

En javascript, tengo una variable tblcon el valor de $(table1), y luego quiero obtener todos los elementos secundarios directos (tr) <tbody>de table1. Mi codigo es:

$('tr', tb1)

Aparentemente, devuelve todos los <tr>elementos de table1 y table2. Creo que puedo pasar

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

o este tipo de lógica.

Sé que $('table1 > tbody > tr')puedo conseguir el hijo directo tr. Desafortunadamente no puedo usar esto.

¿Alguien tiene una buena idea sobre esto?

Gracias.

Jason Li
fuente

Respuestas:

178

Puede utilizar find():

tbl.find("> tbody > tr")

Josh Leitzel
fuente
2
esta es una idea valiente. $ ('> tbody> tr', tb1) también me funciona. Gracias.
Jason Li
1
Esto es maravilloso, no sabía que se podía usar el selector de hijo directo ( >) sin especificar nada delante de él. Gracias.
Silkfire
3
Tenga en cuenta que para los niños directos que están solo un nivel hacia abajo, simplemente puede usar 'niños ([selector])'.
orad
37
NIÑOS DIRECTOS = niños de un nivel por debajo , por lo tanto api.jquery.com/children es la respuesta correcta, no find () - que uno obtiene TODOS los descendientes del elemento (filtrados por selector) ...
jave.web
4
Debe convertir su comentario en una respuesta separada jave.web ya que la suya es LA respuesta correcta.
mrmillsy
23

Como @ jave.web mencionó en los comentarios

Para buscar a través de los hijos directos de un elemento use .children(). Solo buscará a través de los hijos directos y no atravesará más profundo. http://api.jquery.com/children/

Chris
fuente
5

Esta es exactamente la razón por la que se debe tener cuidado con las tablas anidadas. Realmente espero que los use para datos y no para diseño de página.

Otro problema que probablemente arruinará su día es el uso de selectores CSS en tablas anidadas ... básicamente tiene el mismo problema: no puede seleccionar elementos TR de la tabla externa sin seleccionar los que están dentro de la tabla interna también. (No puede usar el selector secundario porque no está implementado en IE6)

Esto debería funcionar:

$("#table1 > tbody > tr")

Sin embargo, le recomiendo que codifique el elemento TBODY, ya que no debe confiar en el navegador para crearlo por usted.

Šime Vidas
fuente
2

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

$('tb1 > tr')

Jeremy
fuente
2
Esto solo funcionaría si tb1fuera una etiqueta HTML, que no lo es; y si trfuera un hijo directo de él (lo cual no es, es un hijo directo de <tbody>).
Josh Leitzel