Выберите первый экземпляр класса внутри предка с классом

Question

Предположим, у меня есть этот HTML структуру:

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td class="hasDay"><div class="day">1 <!--This is what needs selected--></div></td> 
     <td class="hasDay"><div class="day">2</div></td> 
     <td class="hasDay"><div class="day">3</div></td> 
     <td class="hasDay"><div class="day">4</div></td> 
     <td class="hasDay"><div class="day">5</div></td> 
    </tr> 
    ... 
</table> 

Так мне нужно выбрать с помощью JQuery первый .day в первом td с классом .hasDay. Я попробовал следующее:

$("tr .hasDay:first-child .day")

Перебор каждого td в tr, останавливаясь, когда он попадает в .day и используя $(this), чтобы выбрать его.

Как это сделать?

Answer 1

Попробуйте :first-of-type:

$("tr .hasDay:first-of-type .day") 

А также .first() функция JQuery работает!

$("tr td.hasDay").first().find(".day") 

Отрывок

$(function() { 
 
    $("tr td.hasDay").first().find(".day").css("color", "blue"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>No</td> 
 
     <td>Not this!</td> 
 
     <td class="hasDay"><div class="day">1</div></td> 
 
     <td class="hasDay"><div class="day">2</div></td> 
 
     <td class="hasDay"><div class="day">3</div></td> 
 
     <td class="hasDay"><div class="day">4</div></td> 
 
     <td class="hasDay"><div class="day">5</div></td> 
 
    </tr> 
 
</table>

Answer 2

Или попробуйте запрос первый класс hasDay, а затем ребенок с классом день.

$('.hasDay .day').first().html()