Cómo addClass al primer td en cada pa dentro de una tabla usando jQuery

Question

Estoy tratando de agregar una clase al primer td dentro de un tr dentro de una clase específica. Pero por alguna razón se añade esta clase sólo al primer td en el primer tr -no el primer TD en cada tr

$("#appendTD").find("#gridFormInformation").children(0).children().each(
                function() {
                    if ($("#appendTD").find('tr').filter(function() { return $(this).attr('class') == 'ui-widget-content ui-subtblcell'; }).children("td:eq(0)").addClass("leftbord"));
                }
            );

Pero cuando me altero lo anterior mediante la eliminación de la "?" Td: eq (0)", añade esta clase para cada TD en cada tr ... así que lo que estoy haciendo mal

Ejemplo de marcado abajo

<td id="appendTD">
  <table id="gridFormInformation">
    <tbody>
      <tr><th>1</th><th>2</th><th>3</th></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
  </table>
</td>

Answer 1

A mi me parece como que está utilizando de forma manual complicado para encontrar el TDS que desea agregar a la clase. Creo que sería más fácil de usar selectores de jQuery para encontrar su TDS.

Reemplazar

$("#appendTD").find("#gridFormInformation").children(0).children().each(
            function() {
                if ($("#appendTD").find('tr').filter(function() { return $(this).attr('class') == 'ui-widget-content ui-subtblcell'; }).children("td:eq(0)").addClass("leftbord"));
            }
        );

con

$("#gridFormInformation tr.ui-widget-content.ui-subtblcell").find("td:first").addClass("leftbord");

Esto sería encontrar todos los TRS y para cada tr td encontrar la primera y añadir la clase a eso.

Answer 2

Cambiar 'td:eq(0) a 'td:first'.

Answer 3

Este método es añadir leftbord a la primera <td> en cada fila de la tabla gridFormInformation:

$('#gridFormInformation tr td:first-child').addClass('leftbord');