Jquery .each loop logic

Question

Goal: assign the data-column-* class to the tbody > tr > td element associated with that column.

The th contain the correct classes so the first loop is functioning as expected. The second .each() loop I am dumping the entire array.

I tried assigning 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>

Su4p · Accepted Answer · 2015-03-06 13:39:46Z

2

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

When you say this you mean all the td's in the page so eventually it's quite normal that they all have the 5 classes.

I think what you wanted is more something like that :

$('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
    });
});

And you can see it in action overthere : http://jsfiddle.net/LL7q5jje/

edited Mar 6, 2015 at 13:39

answered Mar 5, 2015 at 16:11

Su4p

86510 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthony Grist Over a year ago

The relevant code from that jsFiddle needs to be included in your answer so that it still has value even if the link no longer works. It's also "you", not "u"; have some pride in your answer and type those extra few characters.

Su4p Over a year ago

@AnthonyGrist I'll do so

robabby · Accepted Answer · 2015-03-05 16:47:10Z

1

Looks like you are searching for th's inside of your tr's, but there are no th's living there in the markup you shared. If you are trying to get all of the th's inside of thead, simply remove the tr.

Your markup doesn't follow this pattern:

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

Also, .find() does not accept a function. You will need to query the element on your own, then pass that element as an argument to .find().

Perhaps save the result of an $.each() query to a variable value and pass that to .find().

edited Mar 5, 2015 at 16:47

answered Mar 5, 2015 at 16:11

robabby

2,2106 gold badges34 silver badges47 bronze badges

2 Comments

Stryner Over a year ago

.find doesn't accept a function. This won't work.

robabby Over a year ago

@Stryner Thanks for the heads up. I was running to a meeting and didn't proof read well enough :)

Morten OC · Accepted Answer · 2015-03-05 16:18:04Z

0

First, you have to loop over all tr elements, and then td's in that tr. I can be done pretty simple:

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

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

http://jsfiddle.net/dqhxxujt/

answered Mar 5, 2015 at 16:18

Morten OC

1,7842 gold badges24 silver badges31 bronze badges

Comments

Jamie Barker · Accepted Answer · 2015-03-05 16:28:35Z

Your question is difficult to understand, but I think your problem is that classes were being applied to all TD instead of the specific column?

Based on this understanding, I've simplified the code. jQuery's each function has it's own index that you can use so you don't need to generate your own.

$('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);
  });
});

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

Fabien TheSolution · Accepted Answer · 2015-03-05 16:39:01Z

0

There is no need for 2 functions. Since you are already do a loop for all columns in the 1st function, just use :nth-child() Selector in the loop for TR > TD elements. So you can do all of this with this simple function :

$('.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);
});

See : JSFIDDLE

edited Mar 5, 2015 at 16:39

answered Mar 5, 2015 at 16:27

Fabien TheSolution

5,0501 gold badge20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Jquery .each loop logic

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related