Селектор Jquery для каждого первого появления класса

Question

У меня есть скрипт, который генерирует следующий HTML-код:

<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>

<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>


<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>

Мне нужно стилизовать первый класс кошек "Featured"!Я использую JQuery, но я не знаю, горячий, чтобы выбрать правильный селектор?

Я пытался

jQuery(document).ready(function($){
    $(".table .cat:first").css("color","blue");
})

, но я не правильно, он просто выбирает первый элемент с классом= "кошка".

Answer 1

Изменить на:

$(".table").find(".cat:first").css("color","blue");

Также см. этот пример .

Answer 2

Вам нужно выполнить итерации таблиц примерно так

jQuery(document).ready(function($){
    $('.table').each(function(){
        $(this).find('.cat:first').css('color', 'blue');
    })
})

Вот скрипка - http://jsfiddle.net/vFT46/

Answer 3

jQuery(document).ready(function($) {
     $(".table .head").next().css("color", "blue");
});

Answer 4

Вы можете использовать что-то вроде этого

$('.table').find('.cat:first').css('color','blue');

, чтобы получить первого .cat дочернего элемента .table

DEMO