Question 10961 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

adding custom class by index in jQuery

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

enter image description here

But i wish to end up with these results
enter image description here

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search