How do I target every class ending with 1 3 5 7 or 9?

Question

How can I target every class, that ends with a 1, 3, 5, 7, or 9? It could be 101 as well.

<tbody>
  <tr>
    <td class="1">
    <td class="2">
   <td class="3">
  <tr>
  <tr>
    <td>...

This is ongoing, so I don't know how many, thus I figured an each() function would do the trick:

$(this).find('td').each(function() {
  console.log('test');
});

This didn't work though.

I need to get this content field but I didn't know how so I added an ongoing number to every td field to target it.

 @if (isset($row->details->view))
   @include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $data->{$row->field}, 'action' => 'browse'])

If anybody knows how to access the content I'd greatly appreciate it.

SOLUTION: this one helped me:

    <script type="text/javascript">
    $(document).ready(function(){
        $('a[href^="http://"]').each(function(){
            var oldUrl = $(this).attr("href"); // Get current url
            var newUrl = oldUrl.replace("http://", "https://"); // Create new url
            $(this).attr("href", newUrl); // Set herf value
        });
    });
</script>

While this is technically possible (using `filter()`) it's very far from an optimal solution. For what reason do you feel the need to do this? Would simply retrieving every odd-indexed element in the parent work instead? — Rory McCrossan, Apr 11 '19 at 08:23
Class names that start with digits are [invalid](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) - start with an alphabetical character or `_` or `-` instead — CertainPerformance, Apr 11 '19 at 08:24
@CarstenLøvboAndersen I saw some duplicates like that, however they are massively flawed using the 'attribute ends with' selector, because they'll work for `class="1"`, but not `class="1 foo bar"` — Rory McCrossan, Apr 11 '19 at 08:24
If you really want to do this I'd strongly suggest using `data` attributes to hold the values instead of a class. — Rory McCrossan, Apr 11 '19 at 08:25
Let me change the question, no more classes, How to target every 3rd td in a tr? — Desory, Apr 11 '19 at 08:39

Mihai T · Accepted Answer · 2019-04-11T08:49:49.073

As Rory suggested you could use a data attribute and then select just the odd ones

$('table tr td').each(function() {
  const data = $(this).data('value')
  if (data % 2 !== 0 ) {
   $(this).addClass('odd')
  }
})

.odd {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-value="1">ss</td>
    <td data-value="2">ss</td>
    <td data-value="3">sss</td>
  </tr>
  <tr>
    <td data-value="4">ss</td>
    <td data-value="5">ss</td>
    <td data-value="6">sss</td>
  </tr>
  <tr>
    <td data-value="7">ss</td>
    <td data-value="8">ss</td>
    <td data-value="9">sss</td>
  </tr>
</table>

If you want to use the classes you said in your comment .tar_1 .tar_3 etc... Get the characters after the _ and select the odd ones

$('table tr td').each(function() {
  const className = $(this).attr('class').split('_')[1]
  if (className % 2 !== 0 ) {
   $(this).addClass('odd')
  }
})

.odd {
  color: red;
}

<table>
  <tr>
    <td class="tar_1">ss</td>
    <td class="tar_2">ss</td>
    <td class="tar_3">sss</td>
  </tr>
  <tr>
    <td class="tar_4">ss</td>
    <td class="tar_5">ss</td>
    <td class="tar_6">sss</td>
  </tr>
  <tr>
    <td class="tar_7">ss</td>
    <td class="tar_8">ss</td>
    <td class="tar_9">sss</td>
  </tr>
</table>

If you want to select the ODD child regardless of some attribute just use td:nth-child(odd) which will select the 1,3,5,7 etc child of each tr ( different from the above solutions )

EDIT : if you just want the 3rd element in EACH tr ( with 4 td's ) , use td:nth-child(3) . it will select 1 2 (3) 4/ 5 6 (7) 8/ 9 10 (11) 12

thanks for your effort, i kind of understand that i misspelled the question, i want every 3rd element of the tr. (there are 4 in total my bad) so i was probably thinking too complex here — Desory, Apr 11 '19 at 08:44
@user11186057 so just the 3rd element ? of each TR like 1 2 (3) 4/ 5 6 (7) 8/ 9 10 (11) 12 ? or 1 2 (3) 4 / 5 (6) 7 8 / (9) 10 11 12 — Mihai T, Apr 11 '19 at 08:44
Got it working now, posting final code as update in question — Desory, Apr 11 '19 at 09:18

How do I target every class ending with 1 3 5 7 or 9?

1 Answers1