adding custom class by index in jQuery

Question

As someone new to JS and jQuery, I'm working on a table with multiple columns that contain numbers, except for the last one which has text. My goal is to first add the "custom-sortable" class to all elements in the last column that equal the word "Camp", and then add the "custom-sortable" class to all elements in the entire table where the last column equals to "Camp". I've tried different approaches, but haven't had success. My latest idea is to use the index of elements in the last column that include the word "Camp". Any help or hints would be appreciated.

Edit: The table is a html, the class is just to change the background color of all elements equal to "Camp".

The following code works in terms of adding the class to the last column.

.custom-sortable .rank-list-item.rank-list-item-Camp {
    background-color: grey;
}

$(document).ready(function() {
            var targetIndex = -1;
            $('.custom-sortable .rank-list-item').each(function(index) {
            if ($(this).text() === 'Camp') {
            targetIndex = index;
            $(this).addClass('custom-sortable rank-list-item-Camp');
        }
        });
        if (targetIndex >= 0) {
        $('.custom-sortable .rank-list-item').eq(targetIndex).addClass('custom-sortable');
        }
        });

But i wish to end up with these results

And can you share a representative example of your <table> element's HTML? Both what you start with, and what you wish to end up with? — David Thomas
– David Thomas, Commented Mar 11, 2023 at 22:48

Arleigh Hix · Accepted Answer · 2023-03-12 01:18:27Z

2

When you locate your target you can traverse up the DOM to the parent tr with .closest('tr'). You can then target all the child tds with .find('td'). Here is an abbreviated snippet to demonstrate, but you only need to insert: .closest('tr').find('td')

$(document).ready(function() {

  $('td').each(function(index) {

    if ($(this).text() === 'Camp') {

      $(this).closest('tr').find('td').addClass('rank-list-item-Camp');

    }

  });

});

.rank-list-item-Camp {
  background-color: grey;
}

table {
  border-collapse: collapse;
}

td {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>Camp</td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

P.S. If you are just starting to learn, then I would recommend just learning vanilla JavaScript (ES6+). jQuery is becoming obsolete and adds more weight than advantage anymore.

answered Mar 12, 2023 at 1:18

Arleigh Hix

11k1 gold badge17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bahgat Nassour Over a year ago

thank you, it works, just one more question please, how can i modify your code to let work if the data in multiple tables (not multiple columns in one table) each table with one column

Arleigh Hix Over a year ago

@BahgatNassour Open a new question for that

Bahgat Nassour Over a year ago

here is my second question , thanks in advance stackoverflow.com/questions/75743732/…

yaakov · Accepted Answer · 2023-03-12 01:27:32Z

1

It would make more sense to target the parent, instead of the child.

$(document).ready(function() {
  $('.custom-sortable').each(function(index) {
    let isCamp = false;

    $(this).find('.rank-list-item').each(function() {
      if ($(this).text() === 'Camp') {
        isCamp = true;
        $(this).addClass('custom-sortable rank-list-item-Camp');
      }
    });

    if (isCamp) {
      $(this).addClass('custom-sortable');
    }
  });
});

This way you will find all of the rows that have "Camp" as the last cell, and you don't need to keep track of the index in a separate variable (that will be overwritten.) You also don't need to traverse back up the parent after finding the child.

answered Mar 12, 2023 at 1:27

yaakov

4,7274 gold badges29 silver badges55 bronze badges

1 Comment

Bahgat Nassour Over a year ago

same here thank you but i have one one more question please, how can i modify your code to let work if the data in multiple tables (not multiple columns in one table) each table with one column

Collectives™ on Stack Overflow

adding custom class by index in jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related