CODEWITHSUNDEEP
jqueryhtmlnextuntil
nani0077
nani0077

Reputation: 119

Jquery nextUntil and prevUntil including issue

I am trying to include first and last selectors along with nextUntil and prevUntil

JQUERY

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

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

JSFIDDLE

Upvotes: 2

Views: 1163

Answers (3)

Rounin
Rounin

Reputation: 29493

Solution using jquery (javascript library)

Since

  • li.weeks is preceded by li.weeksClose; and
  • li.weeksClose is followed by li.weeks

why not simply use:

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

Solution using axe (CSS Library)

Alternatively, instead of using a javascript library like jQuery, you can use a CSS Library like axe.

You will need to use the following two axe selectors:

  • < selects immediate parent (it's the opposite of > in standard CSS)
  • ! selects any previous sibling (it's the opposite of ~ in standard CSS)

Then you can write the following style rules:

.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);
}

Working Example:

.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>

Upvotes: 1

nani0077
nani0077

Reputation: 119

Done.

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

Upvotes: 0

Ivan Minakov
Ivan Minakov

Reputation: 1442

Try this:

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

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

Upvotes: 2

Related Questions