Question

目标：将data-column- *类分配给tbody＆gt; tr>与该列关联的td元素。

包含正确的类，因此第一个循环按预期运行。第二个.each（）循环我正在转储整个数组。

我尝试分配arr [arr.length -1]

$('.table-color thead').find(function(){	
	headerRowCount = [];

	$('tr th').each(function(){
		headerRow  = $(this).length;
		headerRowCount.push(headerRow);
		
		$(headerRowCount).each(function(index, value){
			i = index;	
		});

		$(this).addClass("data-column-" + i);
	});
});		


$('.table-color tbody').find(function(){
	rowCount = [];

	$('tr').each(function(){
		row = $(this).length;
		rowCount.push(row);
		console.log(row);
		$(rowCount).each(function(index, value){
			i = index;	
		});
		$('td').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>
    <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);

当你这么说时，你的意思是页面中的所有td，所以最终他们都有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
    });
});

你可以在行动中看到它： http://jsfiddle.net/LL7q5jje/

Answer 2

您似乎在th内搜索tr，但没有th生活在那里你分享的标记。如果您尝试获取th内的所有thead，只需删除tr。

您的标记不遵循此模式：

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

此外，.find()不接受某项功能。您需要自己查询元素，然后将该元素作为参数传递给.find()。

也许将$.each()查询的结果保存到变量值并将其传递给.find()。

Answer 3

首先，你必须循环遍历所有tr元素，然后在那个tr中循环td。我可以很简单地完成：

$('.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个功能。由于您已经为第1个函数中的所有列执行了循环，因此只需在TR > TD元素的循环中使用:nth-child() Selector。所以你可以通过这个简单的功能完成所有这些：

$('.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都应用于所有TD而不是特定的列？

基于这种理解，我简化了代码。 jQuery的每个功能都有它自己的索引，你可以使用它，所以你不需要生成自己的索引。

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery .each循环逻辑

5 个答案: