使用类名选择最后一个元素 [英] Select last element using class name

问题描述

这似乎应该是很简单 - 但我还没有能够弄清楚。

 < 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，但我不能得到任何工作...

更新

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

中的另一个类。

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

如果第一个.data-列是.data

解决方案

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

p>

回答 UPDATE
在这种情况下，您可以使用 hasClass（）

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

This seems like it should be pretty simple - but I have not been able to figure it out.

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

I would like to add padding to the first and last <td> in each <tr> with class data-column (so in the above example the columns with 2, 4, 6 and 9 would be selected).

At first, I tried using the :last-of-type and :first-of-type CSS selector:

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

However, this doesn't work because last-of-type cannot be used with a class.

Is there another way to accomplish this? I tried using jQuery but I couldn't get anything to work...

Update

There is a another piece of the puzzle that I left out. So the type of padding that I add to the first and last column is dependent on another class in the .

If the last .data-column is a .data-column-text or .data-column-date, add padding-right, otherwise, don't add any padding.

If the first .data-column is a .data-column-numeric, add padding-left, otherwise, don't add anything.

解决方案

You can find .data-column in each tr and then use :first and :last DEMO

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

Answer for UPDATE In that case you can check class with 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>

这篇关于使用类名选择最后一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！