jQuery каждый цикл в строке таблицы

У меня есть что-то вроде:

<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>

Я написал jQuery для перебора каждого tr, например:

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

Но проблема в том, что он перебирает «tr» из «tblTwo», чего я тоже не хочу. Кто-нибудь может предложить что-нибудь, чтобы решить эту проблему?


person ANP    schedule 03.05.2012    source источник


Ответы (3)


В jQuery просто используйте:

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

Используя селектор дочерних элементов (>), вы пройдете по всем дочерним элементам (а не всем потомкам), например, с тремя строками:

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

Результат:

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

В VanillaJS вы можете использовать document.querySelectorAll() и перемещаться по строкам, используя forEach().

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});
person Fabrizio Calderan    schedule 03.05.2012
comment
@Raynos, пожалуйста, объясни, вместо того, чтобы бежать... - person Mike Cole; 17.08.2013
comment
Как обратиться к элементу tr внутри функции? - person jumxozizi; 23.01.2017
comment
@Rubiksmomo - использовать функцию (индекс, элемент) - api.jquery.com/each - person FrenkyB; 18.08.2017

Просто рекомендация:

Я бы рекомендовал использовать реализацию таблицы DOM, она очень проста и проста в использовании, вам действительно не нужен jQuery для этой задачи.

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
  }
}
person GNi33    schedule 03.05.2012
comment
Я согласен с тем, что jQuery часто не нужен для такого рода задач (особенно в более новом браузере с .querySelectorAll()), но если вы уже включаете jQuery, было бы напрасно не использовать его (и решение DOM с двумя циклами for не так просто, ИМХО) - person Fabrizio Calderan; 03.05.2012
comment
Но если вы уже включаете jQuery, значит, вы делаете это неправильно и должны удалить его как можно скорее. - person Raynos; 03.05.2012
comment
использование jQuery также имеет последствия. $() делает около 100 действий, прежде чем фактически выберет ваш элемент по его идентификатору (в качестве примера). Я не говорю, что не используйте его ... но для таких тривиальных вещей, как это, когда решение vanilla js похоже на еще несколько символов, которые нужно написать, вы экономите на обработке. пусть и не много... но зачем делать 10 000/сек, когда можно сделать 10 000 000.... просто смысла нет? - person rlemon; 03.05.2012
comment
@ F.Calderan Я понимаю, что вы имеете в виду, но, как я уже сказал, это рекомендация, потому что она очень прямолинейна. что-то вроде случайного выбора большего количества таблиц здесь не произойдет, и итерация с циклом for выполняется довольно быстро. - person GNi33; 03.05.2012
comment
@ GNi33 было бы быстрее, если бы вы вместо этого использовали document.querySelectorAll(''#tblOne > tbody > tr') :) - @riemon Я полагаю, что jQuery имеет некоторые внутренние оптимизации, поэтому в более новом браузере он вызывает такие собственные методы - person Fabrizio Calderan; 03.05.2012
comment
@F.Calderan, ты шутишь / тролишь / невежественен, верно? QSA чертовски медленный, jQuery оптимизирует изо всех сил, но все равно на порядок медленнее, чем DOM. - person Raynos; 03.05.2012
comment
Быстрее писать, наверное. Быстрее бежать? Вы должно быть шутите. - person Florian Margaine; 03.05.2012
comment
@Raynos извините, наверное, я неправильно понимаю, что вы говорите. - person Fabrizio Calderan; 03.05.2012
comment
@ F.Calderan, вы подразумеваете, что document.querySelectorAll('#tblOne > tbody > tr') быстрее, чем document.getElementById("tblOne").rows, что просто глупо. - person Raynos; 03.05.2012
comment
нет, извините, я имею в виду, что это быстрее [но только для записи]. Очевидно, что второй оператор будет быстрее (как скорость выполнения). просто недоразумение :) - person Fabrizio Calderan; 03.05.2012
comment
@ F.Calderan Что значит быстрее писать, версия gEBI и .rows на 11 символов короче. Даже id("tblOne").rows на 8 символов меньше, чем $('#tblOne > tbody > tr') - person Raynos; 03.05.2012
comment
@Raynos, использующий QSA для меня, просто более непосредственный. Было бы для меня более естественным использовать его, так было бы быстрее думать и писать Хорошо? (Возможно, потому что я не думаю делать ненужную оптимизацию по одному выбору) - person Fabrizio Calderan; 03.05.2012
comment
У меня был код, который использовал JQuery для простого поиска текста в таблицах. С 6000+ строк он заметно тормозил. Изменил его, чтобы использовать обычный JS, и он стал в 10 раз быстрее. - person NSjonas; 07.01.2015
comment
Используя QSA.... вы отказываетесь от кросс-браузерной поддержки и ограничиваете свой веб-сайт только новыми браузерами... Единственная грустная часть веб-разработки - это такие вещи.... - person Angry 84; 14.01.2015

Используйте непосредственный селектор дочерних элементов >:

$('#tblOne > tbody  > tr')

Описание: Выбирает все прямые дочерние элементы, указанные в параметре «дочерний элемент», из элементов, указанных в параметре «родительский».

person Sarfraz    schedule 03.05.2012