Добавить класс для всех же текста

В моем коде у меня есть:

<a class="choice" data-name="i_can_a_test_1">
    <img class="img-responsive" src="image.png" >
</a>
<a class="choice" data-name="i_can_a_test_2">
    <img class="img-responsive" src="image2.png" >
</a>

<table>
<tr><td name="i_can_a_test_1" id="name_cards">i_can_a_test_1</td></tr>
<tr><td name="i_can_a_test_2" id="name_cards">i_can_a_test_2</td></tr>
<tr><td name="cant_a_test_1" id="name_cards">cant_a_test_2</td></tr>
</table>

Но теперь я хочу: если же, добавить класс для всех i_can_a_test_*

$('body').on("click",".choice", function(){

    var same_text = $(this).data('name').slice(0,6);        
    var same = $( 'td[name^='+same_text+']' ).length;

     **if same, add class for all "i_can_a_test_*"**
 });

Вы знаете, как я могу это сделать? С каждым я думаю.

3 ответа

  1. [...document.getElementsByClassName("*")].filter(e=>e.textContent.split("i_can_a_test_")[1]).forEach(e=>e.ClassName+=" someclass");
    

    Это делает то, о чем вы просите. Однако это плохой стиль…

  2. После изменения id= «name_cards» в класс:

    $('body').on('click', '.choice', function(e) {
      var name = $(this).data('name').substr(0,6)
        , $cards = $('.name_cards')
        ;
      $cards
        .removeClass('red')
        .filter('[name^="'+name+'"]')
        .addClass('red')
        ;
    });
    

    http://codepen.io/anon/pen/YNGqEQ

  3. Это можно сделать, если атрибут начинается с selector.

    Здесь: http://api.jquery.com/attribute-starts-with-selector/

    $('body').on("click",".choice", function(){
    
      var same = $(this).data('name').slice(0,13);   
      $('td[name^=' + same + ']').addClass('myClass');
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a class="choice" data-name="i_can_a_test_1">
        <img class="img-responsive" src="image.png"/>
    </a>
    <a class="choice" data-name="i_can_a_test_2">
        <img class="img-responsive" src="image2.png"/>
    </a>
    
    <table>
      <tr><td name="i_can_a_test_1">i_can_a_test_1</td></tr>
      <tr><td name="i_can_a_test_2">i_can_a_test_2</td></tr>
      <tr><td name="cant_a_test_1">cant_a_test_2</td></tr>
    </table>