Question

我想单击向右箭头以获取下7个日期序列。我不确定如何引用我的li元素。我尝试使用此方法并li.append，但没有一个对我有用。

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

Answer 1

li:empty仅在第一次使用时有效，因为这些元素在以后的每次执行中都不会为空。因此，您将需要更加明确地选择元素。我喜欢先做最简单的事情（只需选择所有li元素，然后仅对所需的元素进行操作）。对于不同的类应用程序，可以更具体地选择此选项，但就目前而言，以下内容就足够了。

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

有关prevAll函数的更多信息，see here

此功能之前，您有一些逻辑问题，无论您单击右箭头多少次，该功能都只会在接下来的7天向您显示，但这应该可以解决与日期值相关的li元素的修改问题构造。

在右箭头上生成下一个日期序列，单击<li>

1 个答案: