Generate next sequence of dates on right arrow click

Question

I want to get next 7 sequence of dates on click of right arrow. I'm not sure how to refer my li elements. I tried using this and li.append but none of them worked for me.

$('.rightarrow').on('click', function() {
  var y = 1;
  var currentDateCGH = new Date();
  var date = currentDateCGH.getDate() + 7;
  var monthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var currMonth = monthArr[currentDateCGH.getMonth()];
  var currYear = currentDateCGH.getFullYear();
  $(".dateslots li:empty").each(function() {
    //$('<li>').append((date + y)+"-"+currMonth);
    //$(this).text((date + y)+"-"+currMonth);
    y++;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dateslots">
  <li class="leftarrow">&nbsp;</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="rightarrow">&nbsp;</li>
</ul>

Your code works with `li:empty` and `$(this).text(...` (the part commented) - you don't want to use `.append()` here. Note that your code will not work near the end of the month - you need at add days to a month object, not use `(dayofmonth+1)`. — freedomn-m, Nov 15 '19 at 16:46
Your selector of `.dateslots li:empty` should work fine, and then referencing `this` in the callback would work. Granted, this would only work the first time, as they would not be empty the second click of the right arrow — Taplar, Nov 15 '19 at 16:47
Next step: https://stackoverflow.com/questions/563406/add-days-to-javascript-date — freedomn-m, Nov 15 '19 at 16:48
To get around only being able to use this once - the easiest option is to give each of your `li`s a class, eg `
@Taplar then it overwrites the left/right arrow, so could be `li:not(.leftarrow):not(.rightarrow)` but I would think it clearer to add positive association rather than negative association (ie "do to these" rather than "don't do to these") — freedomn-m, Nov 15 '19 at 17:00
Ah, yeah, that's true. And selecting a class would be more explict than doing something like a `slice(1, 7)` as well. @freedomn-m — Taplar, Nov 15 '19 at 17:02
@Taplar no worries, I actually did that (just removed :empty) with 'copy snippet to answer' earlier :) — freedomn-m, Nov 15 '19 at 17:06

isick · Answer 1 · 2019-11-15T16:59:28.980

li:empty will only work on the first time through because those elements wont be empty for every subsequent execution. Because of this, you'll need to be more explicit with how you select the elements. I'm a fan of doing what's simplest first (just select all li elements and only operate on the ones you want). With different class applications, this selection can be made more specific, but for now, the following will suffice.

$(".dateslots li").each(function(){
    // convert our element into a jquery element
    var $li = $(this);

    // ignore the arrows
    if ($li.hasClass('leftarrow') || $li.hasClass('rightarrow')) {
        return;
    }

    // for every other one, we want to add some value to our date
    // this value happens to be the same number as any element's previous number of siblings
    // no need for a y counter
    $li.text((date + $li.prevAll().length)+"-"+currMonth);
});

For more on the prevAll function, see here

You have some logical issues preceeding this function wherein it will only ever show you the next 7 days no matter how many times you click the right arrow, but this should solve your issue of modifying the li elements relating to the date value you construct.

Generate next sequence of dates on right arrow click

1 Answers1