Select first instance of class inside ancestor with class

Question

Suppose I have this HTML structure:

<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>

So I need to select via jQuery the first .day in the first td with the class .hasDay. I've tried the following:

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

Looping through every td in the tr, stopping when it gets to .day and using $(this) to select it.

How do it do it?

Answer 1

Try :first-of-type:

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

And also .first() jQuery function works!

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

Snippet

$(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

Or try, query first the class hasDay and then child with class day.

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