Javascript для JQuery for loops

Question

Я хотел бы преобразовать эти петли for в jQuery, но я не уверен, как это сделать. Я также не уверен, как конвертировать document.querySelector. Я попытался преобразовать это следующим образом:

$('.table1 tbody') 

, но он не работает, когда вы звоните

tablebody.row[] 

Это мой код:

var headertext = [], 
    headers = $(".table1 th"), 
    tablebody = document.querySelector(".table1 tbody"); 

for(var i = 0; i < headers.length; i++) { 
    var current = headers[i]; 
    headertext.push(current.textContent.replace(/\r?\n|\r/,"")); 
} 
for (var i = 0, row; row = tablebody.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
     col.setAttribute("data-th", headertext[j]); 
    } 
} 

Благодаря

Answer 1

Вы можете использовать map() для создания массива из атрибутов указанных th элементов. Затем вы можете пройти через этот массив и установить атрибут data на необходимые элементы td.

Это, как говорится, можно полностью изменить логику, чтобы сделать это в одном цикле each(). Попробуйте это:

var $headers = $('.table1 th'); 
$('tr > td').each(function(i) { 
    $(this).data('th', $headers.eq($(this).index()).text().replace(/\r?\n|\r/, "")); 
}); 

Working example

Обратите внимание, что Jquery сохраняет data атрибуты во внутреннем кэше, поэтому вы не увидите никаких изменений в DOM с кодом выше (поэтому в примере jsFiddle I установите text()). Это абсолютно нормально, вам просто нужно запомнить, чтобы использовать getter-подпись jQuery data() для извлечения атрибута.

Для справки, ваша попытка преобразовать querySelector в $('.table1 tbody') не работает, потому что версия JQuery возвращает объект JQuery, а не DOMElement и JQuery объекта не rows собственности.

Answer 2

Вы можете использовать each функция в jquery для перебора элементов.

$('.table1 th').each(function(index){ 
     var text=$(this).text(); 
}); 

И

$('.table1 tbody td').each(function(index){ 
     var tdObject=$(this); 
     // loop for iterating over all the TDs of table. 
     // You can use tdObject to get text, class and other values. 
     // e.g. var id = tdObject.attr('id'); 
     var text=tdObject.text(); 
});