Selezionare l'ultimo elemento utilizzando il nome della classe

Question

Sembra che dovrebbe essere piuttosto semplice, ma non sono stato in grado di capirlo.

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

desidero aggiungere imbottitura per il primo e l'ultimo <td> in ciascuna <tr> con classe di dati colonna (così nell'esempio di cui sopra saranno selezionati le colonne con 2, 4, 6 e 9).

All'inizio, provato utilizzando il selettore :last-of-type e :first-of-type CSS:

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

Tuttavia, questo non funziona perché last-of-type non può essere utilizzato con una classe.

C'è un altro modo per realizzare questo? Ho provato ad utilizzare jQuery ma non ho potuto ottenere qualsiasi cosa per lavorare ...

Aggiornamento

C'è un altro pezzo del puzzle che ho lasciato fuori. Quindi il tipo di padding che aggiungo alla prima e all'ultima colonna dipende da un'altra classe nel.

Se l'ultima colonna .data è un .data-column-text o .data-column-date, aggiungere padding-right, altrimenti non aggiungere alcun padding.

Se la prima colonna .data è un .data-column-numeric, aggiungi padding-left, altrimenti non aggiungere nulla.

Answer 1

passare attraverso tutto tr utilizzando each() e trovare prima e l'ultima .data-column in esso e quindi applicare css a loro.

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

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

UPDATE: aggiornati js secondo le domanda aggiornato.

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

Answer 2

Potete trovare .data-column in ogni tr e quindi utilizzare :first e :lastDEMO

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

risposta per UPDATE In questo caso è possibile controllare classe con 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>