Как выбрать в каждой строке последний элемент с определенным классом?

Question

В каждой строке есть несколько ячеек, содержащих класс .meow.
Как выбрать последние.meow элемент в каждая строка?
ниже код просто выбирает все .meows ...

$("tr").each(function(){ 
 
    $(".meow").css("border", "3px solid red"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> <td><div class="meow">Meow</div><td> 
 
     <td>Woof</td> 
 
     <td><div class="meow">Meow</div><td> 
 
    </tr> 
 
    <tr> <td> <div class="meow">Meow</div><td> 
 
     <td><div class="meow">Meow</div></td> 
 
     <td>Woof<td> 
 
    </tr> 
 
    </table>

Answer 1

Попробуйте как этот

$("tr").each(function(){ 
 
    $(this).find(".meow:last").css("border", "3px solid red"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> <td><div class="meow">Meow</div><td> 
 
     <td>Woof</td> 
 
     <td><div class="meow">Meow</div><td> 
 
    </tr> 
 
    <tr> <td> <div class="meow">Meow</div><td> 
 
     <td><div class="meow">Meow</div></td> 
 
     <td>Woof<td> 
 
    </tr> 
 
    </table>

Answer 2

Вы должны просто использовать querySelector:

document.querySelector(".child:last-of-type"); 

И вы можете использовать querySelector на элементы тоже, так что использование это на каждой строке.

https://jsfiddle.net/L5fdhs7d/

Answer 3

Изменить

$("tr").each(function(){ $(".meow").css("border", "3px solid red"); });

в

$("tr").each(function(){ $(this).find(".meow:last").css("border", "3px solid red"); });

https://api.jquery.com/last-selector/

Answer 4

Использование JQuery-х last() функция.
Кроме того, вам необходимо оформить поиск от текущего tr, поэтому используйте $(this).find().

$(this).find(".meow").last().css("border", "3px solid red");