jQuery селекторы при on click

345

05 августа 2017, 05:37

Есть таблица. После определенного события (у меня это кнопка CHECK) элементам tr присваивается class.

<table border=1>
<tr>
    <td>show 444 after CHECK</td>
    <td>show 444 after CHECK</td>
    <td>3</td>
    <td>4</td>
    <td id="check">push CHECK to enable click <input type="button" value="CHECK"></td>
</tr>
<tr>
    <td>show 444 after CHECK</td>
    <td>show 444 after CHECK</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
</table>
$(document).ready(function() {
    $('#check').click(function() {
        $('tr').attr('class', 'my-class');
        alert('CHECK PUSHED!');
    });
    $('table').on('click', 'tr.my-class > td:lt(2)', function() {
        alert(444);
    });
});

Затем на строки с новым классом my-class (только на первые 2 столбца строки) становится можно кликать.

Почему-то применяется только к первой строке. Хотя в селекторе указываю: для всех tr.my-class найти дочерние td, первые два

Этот же пример: https://jsfiddle.net/MegaByyte/h2bpb6av/7/

Нужно применить alert(444) ко всем строкам, а не только к первой

Answer 1

Используйте селектор:

tr.my-class > td:nth-child(-n+2)

вместо

tr.my-class > td:lt(2)

Ваш селектор берёт первые две ячейки, а не первые два столбца.

Answer 2

Дело в том, что из всего набора tr.my-class выбирается только первые две td. Не две в каждом, а всего 2.

Можно сделать так:

$('#check').click(function() {
$('tr').each(function(){
    $(this).find('td:lt(2)').attr('class', 'my-class');
});
    alert('CHECK PUSHED!');
});
$('table').on('click', 'td.my-class', function() {
    alert(444);
});