Select 元素前的兄弟

Question

HTML 内容如下所示：

<div class="year">
    <div class="month">
        <div class="week">
            <div class="day">1</div>
            <div class="day">2</div>
            <div class="day">3</div>
            <div class="day">4</div>
            <div class="day">5</div>
            <div class="day">6</div>
            <div class="day">7</div>
        </div>
        ........
    </div>
    <div class="month">
        ............
    </div>
</div>
<div class="year">
    <div class="month">
        <div class="week">
            <div class="day">1</div>
            <div class="day">2</div>
            <div class="day">3</div>
            <div class="day">4</div>
            <div class="day">5</div>
            <div class="day">6</div>
            <div class="day">7</div>
        </div>
        ........
    </div>
    <div class="month">
        ............
    </div>
</div>

我想 select 兄弟 day selected one.For 示例如果我每周 day 将鼠标悬停在鼠标上或鼠标移出，或者月或年，有没有办法让我访问它之前的兄弟姐妹并更改颜色？

这是我写的，但不能正常工作：

    $(".day").each(function(){
        $(this).mouseover(function(){
        $(this).prevAll().css("background", "red")
    })
    $(this).mouseout(function(){
        $(this).prevAll().css("background", " ");
    });
    })

Answer 1

以下应该可以完成这项工作。但一般来说，使用 .add/removeClass() 来更改 div 的格式是一个更好的主意。

在我的代码片段中，我使用了委托事件监听 (.on(...))。这更轻量级，因为它影响的元素更少，也适用于动态添加的元素。无需使用 each() 方法，因为 jQuery 会自动将其操作应用于所有选定元素。

$('.week').on('mouseover mouseout','.day',function(ev){
   let days=$(".day");
   days.css("background-color","");     
   ev.type=="mouseover" &&  days.slice(0,days.index(this)).css("background-color","red");
})

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
<div class="year">
<div class="month">
    <div class="week">
        <div class="day">1</div>
        <div class="day">2</div>
        <div class="day">3</div>
        <div class="day">4</div>
        <div class="day">5</div>
        <div class="day">6</div>
        <div class="day">7</div>
    </div>
    ........
</div>
<div class="month">
    ............
</div>
</div>
<div class="year">
<div class="month">
    <div class="week">
        <div class="day">1</div>
        <div class="day">2</div>
        <div class="day">3</div>
        <div class="day">4</div>
        <div class="day">5</div>
        <div class="day">6</div>
        <div class="day">7</div>
    </div>
    ........
</div>
<div class="month">
    ............
</div>
</div>

Select 元素前的兄弟

Select sibling before an element

jquery

siblings