Jquery nextUntil 和 prevUntil 包括问题

Question

我正在尝试包括第一个和最后一个选择器以及 nextUntil 和 prevUntil

JQUERY

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

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

JSFIDDLE

Answer 1

试试这个：

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

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

Answer 2

解决方案使用 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');

解决方案使用 axe（CSS 库）

或者，不使用像 jQuery 这样的 javascript 库，你可以使用像 这样的 CSS 库斧.

您将需要使用以下两个斧头选择器：

< 选择 直接父级 （它与标准 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>

Answer 3

完成。

$('.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');

Jquery nextUntil 和 prevUntil 包括问题

Jquery nextUntil and prevUntil including issue

html

jquery

nextuntil

解决方案使用 jquery（javascript 库）

解决方案使用 axe（CSS 库）