jQuery cada bucle en la fila de la tabla [duplicado]

Estoy teniendo algo como:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

He escrito jQuery para recorrer cada tr como:

$('#tblOne tr').each(function() {...code...});

Pero el problema es que pasa por el "tr" de "tblTwo", que también no quiero. ¿Alguien puede sugerir algo para resolver esto?

preguntado el 03 de mayo de 12 a las 14:05

3 Respuestas

En jQuery solo usa:

$('#tblOne > tbody  > tr').each(function() {...code...});

Usando el selector de niños (>) caminarás sobre todos los niños (y no todos los descendientes), ejemplo con tres filas:

$('table > tbody  > tr').each(function(index, tr) { 
   console.log(index);
   console.log(tr);
});

Resultado:

0
<tr>
1 
<tr>
2
<tr>

In VainillaJS puedes usar document.querySelectorAll() y camine sobre las filas usando forEach()

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});

contestado el 01 de mayo de 20 a las 09:05

@Raynos por favor explique en lugar de "golpear y huir"... - mike cole

¿Cómo me refiero al elemento tr dentro de la función? - jumxozizi

@Rubiksmomo - función de uso (índice, elemento) - api.jquery.com/each - FrenkyB

Solo una recomendación:

Recomendaría usar la implementación de la tabla DOM, es muy sencillo y fácil de usar, realmente no necesita jQuery para esta tarea.

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}

Respondido 20 Feb 13, 20:02

Estoy de acuerdo en que jQuery a menudo no es realmente necesario para este tipo de tareas (especialmente en navegadores más nuevos con .querySelectorAll()) pero si ya está incluyendo jQuery, es un desperdicio no usarlo (y la solución DOM con dos for loop no es tan sencillo, en mi humilde opinión) - Fabricio Calderan

Pero si ya está incluyendo jQuery, entonces lo está haciendo mal y necesita eliminarlo lo antes posible: Raynos

usar jQuery también tiene consecuencias. $() hace alrededor de 100 cosas antes de seleccionar su elemento por su id (como ejemplo). No estoy diciendo que no lo use ... pero para cosas triviales como esta, donde la solución vanilla js es como unos pocos caracteres más para escribir, está ahorrando en el procesamiento. aunque no mucho... pero ¿por qué hacer 10 000/segundo cuando puedes hacer 10 000 000... simplemente tiene sentido, no? - Rémon

@ F.Calderan Entiendo lo que quieres decir, pero como dije, es una recomendación, porque es muy sencillo. algo como seleccionar accidentalmente más tablas no sucederá aquí y la iteración con un ciclo for es bastante rápida. - GNi33

@ GNi33 sería más rápido si usas document.querySelectorAll(''#tblOne > tbody > tr') en cambio :) - @riemon Supongo que jQuery tiene algunas optimizaciones internas, por lo que en el navegador más nuevo llama a métodos nativos como ese - Fabricio Calderan

Utiliza selector de hijos inmediatos >:

$('#tblOne > tbody  > tr')

Descripción: Selecciona todo elementos secundarios directos especificado por "hijo" de elementos especificados por "padre".

contestado el 03 de mayo de 12 a las 14:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.