Выбрать родственника перед элементом - PullRequest
Новая
       28

Выбрать родственника перед элементом

0 голосов
/ 01 августа 2020

Контент 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>

Я хочу выбрать родственного day из выбранного. Например, если я наведу указатель мыши на каждые day каждую неделю или месяц или год, есть ли у меня способ получить доступ к его братьям и сестрам до этого и изменить цвет?

Вот что я пишу, но работает неправильно: 

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

1 Ответ

0 голосов
/ 01 августа 2020

Следующее должно работать. Но в целом лучше использовать .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>
...