jquery - 使用类名选择最后一个元素

Question

这看起来应该很简单 - 但我一直没弄明白。

<tr>
    <td class="data-command">1</td>
    <td class="data-column data-column-text">2</td>
    <td class="data-column data-column-text">3</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-column data-column-date">4</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-command">5</td>
</tr>
<tr>
    <td class="data-column data-column-numeric">6</td>
    <td class="data-column data-column-text">7</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-date">8</td>
    <td class="data-command">10</td>
</tr>

我想在第一个和最后一个 <td> 中添加填充在每个<tr>具有类数据列(因此在上面的示例中，将选择具有 2、4、6 和 9 的列)。

起初，我尝试使用 :last-of-type和 :first-of-type CSS 选择器:

.data-command:first-of-type { padding-right: 10px; }
.data-command:last-of-type { padding-left: 10px; }

但是，这不起作用，因为 last-of-type 不能与类一起使用。

还有其他方法可以实现吗？我尝试使用 jQuery，但我什么都做不了...

更新

我遗漏了另一 block 拼图。因此，我添加到第一列和最后一列的填充类型取决于 .

如果最后一个 .data-column 是 .data-column-text 或 .data-column-date，添加 padding-right，否则，不添加任何 padding。

如果第一个 .data-column 是一个 .data-column-numeric，添加 padding-left，否则，不添加任何内容。

Answer 1

你可以在每个tr中找到.data-column然后使用:first和:last DEMO

$('tr').each(function() {
  $(this).find('.data-column:first, .data-column:last').css('color', 'red')
})

更新的答案在这种情况下，您可以使用 hasClass()

检查类

$('tr').each(function() {
  var first = $(this).find('.data-column:first');
  var last = $(this).find('.data-column:last')

  if (last.hasClass('data-column-text') || last.hasClass('data-column-date')) last.css('color', 'red');
  if (first.hasClass('data-column-numeric')) first.css('color', 'red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="data-command">1</td>
    <td class="data-column data-column-text">2</td>
    <td class="data-column data-column-text">3</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-column data-column-date">4</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-command">5</td>
  </tr>
  <tr>
    <td class="data-column data-column-numeric">6</td>
    <td class="data-column data-column-text">7</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-date">8</td>
    <td class="data-command">10</td>
  </tr>
</table>