【问题标题】：Jquery nextUntil and prevUntil including issueJquery nextUntil 和 prevUntil 包括问题
【发布时间】：2017-08-21 10:22:33
【问题描述】：

我正在尝试将 first 和 last 选择器以及 nextUntil 和 prevUntil 包括在内

JQUERY

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

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

JSFIDDLE

【问题讨论】：

jQuery prevUntil() include start selector and end selecter的可能重复
andSelf() 在新版本中已弃用。
有什么问题？
那些函数只在元素之间进行选择，但它也应该包括给定的类元素
还包括“.weeks”和“.weeksClose”元素。你能看到小提琴吗

标签： jquery html nextuntil

【解决方案1】：

试试这个：

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

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

【讨论】：

然后它选择所有有周和周关闭的类
然后它选择有周和周的类而不是元素之间的关闭

【解决方案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 库）

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

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

< 选择 immediate parent（与标准 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().prevUntil('li.weeksClose').text() 给出完整的字符串。
这是一个与您原来的问题不同的问题。请提出一个新问题。谢谢。

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

【讨论】：