jquery - Jquery nextUntil 和 prevUntil 包括问题

Question

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

查询

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

---

使用ax的解决方案（CSS 库）

或者，您可以使用诸如ax之类的 CSS 库，而不是使用jQuery之类的 javascript 库。

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

• <选择直接父>级（与标准 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');