Как добавить Class к первому td в каждом tr внутри таблицы, используя jQuery

Question

Я пытаюсь добавить класс к первому td внутри tr в определенном классе. Но по какой-то причине он добавляет этот класс только к первому td в первом tr, а не к первому td в каждом 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"));
                }
            );

Но когда я изменяю вышеупомянутое, удаляя "td: eq (0)", он добавляет этот класс к каждому td в каждом tr ... так что я делаю не так?

Пример разметки ниже

<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

Мне кажется, что вы используете сложный ручной способ найти tds, к которому хотите добавить класс. Я считаю, что было бы легче использовать селекторы jQuery, чтобы найти ваши tds.

Заменить

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

с

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

Это найдет все trs и для каждого tr найдет первый td и добавит к нему класс.

Answer 2

Этот метод добавляет leftbord к первому <td> в каждой строке таблицы gridFormInformation:

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

Answer 3

Изменить 'td:eq(0) на 'td:first'.