Select class 的第一个实例在祖先中 class

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>

所以我需要 select 通过 jQuery 第一个 .day 在第一个 td 和 class .hasDay。我试过以下方法：

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

遍历 tr 中的每个 td，当它到达 .day 时停止并使用 $(this) 到 select 它。

它是怎么做到的？

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

或者尝试，先查询 class hasDay，然后查询 child with class day。

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

Select class 的第一个实例在祖先中 class

Select first instance of class inside ancestor with class

jquery

selector