Добавить класс к каждому второму элементу, не зная родителя - PullRequest
0 голосов
/ 07 октября 2019

У меня есть средство выбора даты, и мне нужно выбрать каждый второй и каждый четвертый элемент в таблице.

В настоящее время я добавил класс к каждой неделе и атрибуту data days, чтобы узнать, какую неделю пользователь нажимает, идень, потому что у меня есть 2 календарных месяца, и мне нужно добавить класс ко второму месяцу.

Большая проблема: как добавить класс к каждой второй неделе и каждой четвертой неделе, но из дня, который пользователь выбирает вкалендарь, и имейте в виду, что отображаются 2 календарных месяца, и нужно добавить класс в секунду к?

Fiddle: https://jsfiddle.net/pLvsj09m/

$("#datepicker").datepicker({
  numberOfMonths: 2,
  minDate: 2,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  beforeShowDay: function(date) {
    setTimeout(function() {
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:first-child").addClass("firstweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:first-child").attr('data-days', 1);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(2)").addClass("secondweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(2)").attr('data-days', 2);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(3)").addClass("thirdweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(3)").attr('data-days', 3);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(4)").addClass("fourthweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(4)").attr('data-days', 4);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(5)").addClass("fifthweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(5)").attr('data-days', 5);
    }, 10);
    var show = true;
    if (date.getDay() == 0) show = false
    return [show];
  },
  onSelect: function() {
    var date = $(this).datepicker('getDate');
    var day = date.getUTCDay();
    if (day == '0') {
      setTimeout(function() {
        let current_selected_date = $(".ui-datepicker-calendar").find(".ui-state-active");
        let this_termin_id = $(current_selected_date).parent().parent().data("days")

        $(current_selected_date).parent().parent().parent().find('[data-days="' + this_termin_id + '"]').next().next().addClass('itsmonday');

        $(current_selected_date).parent().parent().parent().find('[data-days="' + this_termin_id + '"]').next().next().next().next().addClass('itsmonday');

      }, 20);
    }
  },

});
.itsmonday td:nth-child(1) a {
  background: #ffe286;
  font-weight: bold;
  color: #fff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">

<div id="datepicker">

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...