JQuery. Loop loop logic

Question

Цель: присвоить класс data-column- * элементу tbody> tr> td, связанному с этим столбцом.

В этом разделе содержатся правильные классы, поэтому первый цикл функционирует должным образом. Второй цикл .each() Я сбрасываю весь массив.

Я попытался назначить обр [arr.length -1]

$('.table-color thead').find(function(){ \t 
 
\t headerRowCount = []; 
 

 
\t $('tr th').each(function(){ 
 
\t \t headerRow = $(this).length; 
 
\t \t headerRowCount.push(headerRow); 
 
\t \t 
 
\t \t $(headerRowCount).each(function(index, value){ 
 
\t \t \t i = index; \t 
 
\t \t }); 
 

 
\t \t $(this).addClass("data-column-" + i); 
 
\t }); 
 
}); \t \t 
 

 

 
$('.table-color tbody').find(function(){ 
 
\t rowCount = []; 
 

 
\t $('tr').each(function(){ 
 
\t \t row = $(this).length; 
 
\t \t rowCount.push(row); 
 
\t \t console.log(row); 
 
\t \t $(rowCount).each(function(index, value){ 
 
\t \t \t i = index; \t 
 
\t \t }); 
 
\t \t $('td').addClass("data-column-" + i); 
 
\t }); 
 
}); \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table class="table-color"> 
 
    <thead> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    <th>5</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    </tbody> 
 
</table>

Answer 1

$('td').addClass("data-column-" + i); 

Когда вы говорите, вы имеете в виду все ТД на странице, так в конце концов, это вполне нормально, что все они имеют 5 классов.

Я думаю, что вы хотели больше что-то вроде этого:

$('tr').each(function(){ // for each <TR> 
$(this).find('td').each(function(index){ // loop through all TDs 
     $(this).addClass("data-column-" + index);// and add the class 
    }); 
}); 

И вы можете увидеть его в действии overthere: http://jsfiddle.net/LL7q5jje/

Answer 2

Похоже, вы ищете th-х внутри ваших tr-х, но нет th ' живущих там в разметке, которую вы разделили. Если вы пытаетесь получить все th внутри thead, просто удалите tr.

Ваша разметка не соответствует этому шаблону:

$('tr th').each(...

Кроме того, .find() не принимает функцию. Вам нужно будет запросить элемент самостоятельно, а затем передать этот элемент в качестве аргумента в .find().

Возможно, сохраните результат запроса $.each() до значения переменной и перейдите к .find().

Answer 3

Во-первых, вы должны перебрать все элементы т.р., а затем td в этом tr. можно сделать довольно просто:

$('.table-color tbody tr').each(function(i, tr){ 

    $(tr).find("td").each(function(y, td){ 
     $(td).addClass("data-column-" + y); 
    }); 
}); 

http://jsfiddle.net/dqhxxujt/

Answer 4

Там нет необходимости для 2 функций. Поскольку вы уже выполняете цикл для всех столбцов в первой функции, просто используйте :nth-child() Selector в цикле для TR > TD элементов. Таким образом, вы можете делать все это с помощью этой простой функции:

$('.table-color thead th').each(function(index){   
    var i = parseInt(index) + 1; 
    $(this).addClass("data-column-" + i); 
    $('.table-color tbody tr td:nth-child('+i+')').addClass("data-column-" + i); 
}); 

См: JSFIDDLE

Answer 5

Вашего вопроса трудно понять, но я думаю, ваша проблема в том, что классы были применены ко всему TD вместо конкретный столбец?

Основываясь на этом понимании, я упростил код. Каждая функция jQuery имеет свой собственный индекс, который вы можете использовать, поэтому вам не нужно создавать свои собственные.

$('tr > th').each(function(index){ 
 
    var i = parseInt(index)+1; 
 
    $(this).addClass("data-column-" + i); 
 
}); \t 
 

 
$('tr').each(function(){ 
 
    $(this).children('td').each(function(index) { 
 
    var i = parseInt(index)+1; 
 
    $(this).addClass("data-column-" + i); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table class="table-color"> 
 
    <thead> 
 
    <tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
    <th>5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    <tr><td>data</td><td>data 2</td><td>data 3</td><td>data 4</td><td>data 5</td></tr> 
 
    </tbody> 
 
</table>