jquery - 无法在 jQuery 日期选择器中选择所选日期的父级

Question

我用jQuery UI plugin datepicker制作了一个日历.

<小时/>

我想要做的是在 tr 之后附加一个元素，所选日期所在的位置。在下面的结构中，我标记了 tr ，我尝试使用 <---- *THIS ROW* 选择它.

插件创建的日历的结构看起来像这样:

<table class="ui-datepicker-calendar>
  <thead>...not important...</thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      ...
    </tr>
    <tr> <---- *THIS ROW*
      <td class="ui-datepicker-current-day">8</td>
      <td>9</td>
      ...
    </tr>
    ...and so on
  </tbody>
</table>

所以我尝试使用以下代码来做到这一点:

$(".ui-datepicker-calendar").find(".ui-datepicker-current-day").parent("tr").addClass("open");

我尝试了其他几种方法，例如 .closest() ，但它们都不起作用。 有谁知道我如何选择它？

这里有一个片段:

$('#calendar').datepicker({
  inline: true,
  firstDay: 1,
  showOtherMonths: true,
  onSelect: function(){
    $(".ui-datepicker-calendar").find(".ui-datepicker-current-day").parent("tr").addClass("open");
  }
});

tr.open{
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div id="calendar"></div>

Answer 1

看起来每次选择日期时都会重新绘制日期选择器。

您可以使用 setTimeout() 函数来安排类添加，以便在 DOM 更改且选择器重新绘制后执行:

$(function() {
  $('#calendar').datepicker({
    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    onSelect: function() {
      setTimeout(function() {
        $(".ui-datepicker-calendar")
          .find(".ui-datepicker-current-day")
          .parent().addClass("open");
      }, 100);
    }
  });
});

tr.open {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="calendar"></div>