JQuery nextUntil и prevUntil, включая выпуск

Я пытаюсь включить первый и последний селекторы вместе с nextUntil и prevUntil

Jquery

$('.selectedDay').parent().prevUntil('li.weeks').css('background', '#F00');

$('.selectedDay').parent().nextUntil('li.weeksClose').css('background', '#F00');

JSFIDDLE

Источник

3 ответа

Решение

Попробуй это:

$('.selectedDay').parent().prevAll('.weeks').first().css('background', '#F00');

$('.selectedDay').parent().nextAll('li.weeksClose').first().css('background', '#F00');
Источник

Решение с использованием jquery (библиотека javascript)

поскольку

  • li.weeks предшествует li.weeksClose; а также
  • li.weeksClose сопровождается li.weeks

почему бы просто не использовать:

$('.selectedDay').parent().prevUntil('li.weeksClose').css('background', '#F00');
$('.selectedDay').parent().nextUntil('li.weeks').css('background', '#F00');

Решение с использованием топора (библиотека CSS)

В качестве альтернативы, вместо использования библиотеки JavaScript, такой как jQuery, вы можете использовать библиотеку CSS, такую ​​как ax.

Вам нужно будет использовать следующие два селектора топоров:

  • < выбирает непосредственного родителя (это противоположность > в стандартном CSS)
  • ! выбирает любой предыдущий брат (это противоположность ~ в стандартном CSS)

Затем вы можете написать следующие правила стиля:

.selectedDay < li ! li,
.selectedDay < li ~ li {
background-color: rgb(255, 0, 0);
}

.selectedDay < li ! li.weeks ! li,
.selectedDay < li ~ li.weeksClose ~ li {
background-color: rgb(255, 255, 255);
}

Рабочий пример:

.selectedDay < li ! li,
.selectedDay < li ~ li {
background-color: rgb(255, 0, 0);
}

.selectedDay < li ! li.weeks ! li,
.selectedDay < li ~ li.weeksClose ~ li {
background-color: rgb(255, 255, 255);
}
<ul class="x-axis">
  <li class="td-front weeks"><span>30<br>W</span></li>
  <li class="td-front"><span>31<br>W</span></li>
  <li class="td-day firstFortNight1"><span>01<br> W</span></li>
  <li class="td-day"><span>02<br>W</span></li>
  <li class="td-day"><span >03<br>W</span></li>
  <li class="td-day"><span>04<br>W</span></li>
  <li class="td-day weeksClose"><span>05<br>W</span>
    <p>Week Avg : 9.15</p>
  </li>
  <li class="td-day weeks"><span>06<br>W</span></li>
  <li class="td-day"><span>07<br>W</span></li>
  <li class="td-day"><span>08<br>W</span></li>
  <li class="td-day"><span class="selectedDay">09<br>W</span></li>
  <li class="td-day"><span>10<br>W</span></li>
  <li class="td-day"><span>11<br>W</span></li>
  <li class="td-day weeksClose"><span>12<br>W</span>
    <p>Week Avg : 9.15</p>
  </li>
  <li class="td-day weeks"><span>13<br>W</span></li>
  <li class="td-day"><span>14<br>W</span></li>
  <li class="td-day firstFortNight15"><span>15<br> W</span></li>
  <li class="td-day secondFortNight16"><span>16<br> W</span></li>
  <li class="td-day"><span>17<br>W</span></li>
  <li class="td-day"><span>18<br>W</span></li>
  <li class="td-day weeksClose"><span>19<br>W</span>
    <p>Week Avg : 9.15</p>
  </li>
  <li class="td-day weeks"><span>20<br>W</span></li>
  <li class="td-day"><span>21</span><br>W</li>
  <li class="td-day"><span>22<br>W</span></li>
  <li class="td-day"><span>23<br>W</span></li>
  <li class="td-day"><span>24<br>W</span></li>
  <li class="td-day"><span>25<br>W</span></li>
  <li class="td-day weeksClose"><span>26<br>W</span>
    <p>Week Avg : 9.15</p>
  </li>
  <li class="td-day weeks"><span>27<br>W</span></li>
  <li class="td-day"><span>28<br>W</span></li>
  <li class="td-day"><span>29<br>W</span></li>
  <li class="td-day"><span>30<br>W</span></li>
  <li class="td-day secondFortNight30"><span>31<br> W</span></li>
  <li class="td-back"><span>01<br>W</span></li>
  <li class="td-back weeksClose"><span>02<br>W</span>
    <p>Week Avg : 9.15</p>
  </li>
</ul>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Источник

Готово.

$('.selectedDay').parent().prevAll('.weeks').first().css('background', '#F00');
    $('.selectedDay').parent().prevUntil('.weeks').css('background', '#F00');

    $('.selectedDay').parent().nextAll('li.weeksClose').first().css('background', '#F00');

    $('.selectedDay').parent().nextUntil('li.weeksClose').css('background', '#F00');
Источник
Другие вопросы по тегам