JQuery add numbering to tds within a table row

Question

I have come up with this function to add numbered classes to the elements within tables rows in my table: ``` $('tr td:contains(".")').each(function(i){ $(this).addClass("reportcellno-" + i); }); ``` Basically here, I am searching for any table cell with a decimal point and I want to interate through them within each row and add the class `reportcellno-1`, `reportcellno-2` This works pretty well and I have played around with it all day. The only issue is that the numbering goes on and on rather than limiting it by row. My output HTML code from the above is: ``` 10.1 5.7 10.6 10.9 ``` Whereas I actually am trying to get this: ``` 10.1 5.7 10.6 10.9 ``` So essentially for each table row, I wa…

Accepted Answer

Go by `tr` instead:

```
$('tr').each(function() {
   $(this).children('td:contains(".")').each(function(i) {
      $(this).addClass("reportcellno-" + i);
   });
});
```

EDIT: less-loop way, but probably less readable:

```
$('tr td:contains(".")').each(function(){
   $(this).addClass("reportcellno-" + (+$(this).index() + 1));
});​
```

Here, we are using the fact that a `td` is a child of a `tr`, and `index()` returns the position of an element relative to its siblings.

From the docs:

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

JQuery add numbering to tds within a table row

Solution

Problem