CODEWITHSUNDEEP
jquerycss
William
William

Reputation: 3395

Select last element using class name

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.

Upvotes: 6

Views: 3131

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Go through all tr using each() and find first and last .data-column in it and then apply css to them.

$('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: updated js according to updated question.

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

Upvotes: 4

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 4

Related Questions