我正在尝试包含第一个和最后一个选择器以及 nextUntil 和 prevUntil
查询
$('.selectedDay').parent().prevUntil('li.weeks').css('background', '#F00');
$('.selectedDay').parent().nextUntil('li.weeksClose').css('background', '#F00');
尝试这个:
$('.selectedDay').parent().prevAll('.weeks').first().css('background', '#F00');
$('.selectedDay').parent().nextAll('li.weeksClose').first().css('background', '#F00');
自从
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 库,而不是使用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>
完毕。
$('.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');