更新

Question

这看起来应该很简单 - 但我无法弄明白。

[XmlElement("Parameter1")]
public List<Parameter> Parameters = new List<Parameter>();

我想使用class data-column向每个<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>添加填充（因此在上面的示例中，将选择包含2,4,6和9的列）。

首先，我尝试使用<tr>和:last-of-type CSS选择器：

:first-of-type

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

还有另一种方法可以实现这一目标吗？我尝试使用jQuery，但我无法工作......

更新

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

中的另一个类

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

检查班级

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用tr浏览所有each()并找到其中的第一个和最后一个.data-column，然后将css应用于它们。

＆＃13;

$('tr').each(function () {
    var first = $('.data-column:first', this);
    var last = $('.data-column:last', this);

    first.css('padding-right', '10px');
    last.css('padding-left', '10px');
})

＆＃13;

<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">2</td>
        <td class="data-column">3</td>
        <td class="data-column">4</td>
        <td class="data-command">5</td>
    </tr>
    <tr>
        <td class="data-column">6</td>
        <td class="data-column">7</td>
        <td class="data-column">8</td>
        <td class="data-column">9</td>
        <td class="data-command">10</td>
    </tr>
</table>

＆＃13;

更新：根据更新的问题更新了js。

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

    if (first.hasClass('data-column-text') || first.hasClass('data-column-date'))
        first.css('padding-right', '10px');
    if (last.hasClass('data-column-numeric'))
        last.css('padding-left', '10px');
})

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

更新

2 个答案: