Question

I have a table that needs some custom theming. It has a lot of text inputs and they all need custom widths. I figured it would be nice to simply add custom CSS classes based on the label name of each field. I am part of the way there but for some reason I am picking up all the label names for any given label in the table, not simply the closest one as I desire.

Here is my JQuery:

$('td.label-text', this).each(function() {
// add class with name of the label text
$('td.input-text').addClass($(this).text().replace(/[^a-z]/gi,'').toLowerCase() + ' ').closest("td.label-text");
});

Here is some sample HTML output:

<tr>
<td class="label-text">Rule Name*:</td>
<td class="input-text effectivedate rulename employeeid createrulefor ipaddress active searchby">
<input type="text" name="ruleName" value="">
</td>
</tr>       

<tr>
<td class="label-text">Employee ID:</td>
<td class="input-text effectivedate rulename employeeid createrulefor ipaddress active searchby">
<input type="text" name="employeeId" value="" id="empnotext">
</td>
</tr>

As you can see all label names get added to every td .input-text class, not the nearest (closest) one. I am sure I am doing something wrong but not sure what.

I am also wondering if a class can be added based on the input name

Answer 1

You have to use this inside the loop. Currently, you’re selecting all elements with selector td.input-text (at each iteration). Fiddle: http://jsfiddle.net/WCTyz/2/

$('td.input-text input', this).each(function() {
    // add class with name of the label text
    var $this = $(this);
    var addclass = $this.parents("tr:first").children("td:first")
                          .text().replace(/[^a-z]/gi,'').toLowerCase();
    $this.addclass(addClass);
});

Also, the addClass method automatically deals with separating spaces. You don’t have to manually postfix your class name by a space.

Explanation of selector:

td.input-text input     For each <td class="input-text"> ???? <input> ??? </td> :

Get class name:
.parents("tr:first")    Select the current row
.children("td:first")   Select the first cell
.text()                 Get the textual value