Question

我正在尝试破解fullcalendar，以便在我的日历中每行显示多个事件。所以为了做到这一点，我想迭代这些行并重新组织他们的内容。但是，jQuery不能find()这些行。

<div class="fc-content-skeleton">
    <table>
        <thead>
            <tr>
                <td class="fc-day-number fc-mon fc-past" data-date="2016-09-26">26</td>
                <td class="fc-day-number fc-tue fc-past" data-date="2016-09-27">27</td>
                <td class="fc-day-number fc-wed fc-past" data-date="2016-09-28">28</td>
                <td class="fc-day-number fc-thu fc-past" data-date="2016-09-29">29</td>
                <td class="fc-day-number fc-fri fc-today fc-state-highlight" data-date="2016-09-30">30</td>
                <td class="fc-day-number fc-sat fc-other-month fc-future" data-date="2016-10-01">1</td>
                <td class="fc-day-number fc-sun fc-other-month fc-future" data-date="2016-10-02">2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td class="fc-event-container" rowspan="2">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a>
                </td>
                <td rowspan="2"></td>
                <td class="fc-event-container">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-mine" data-url=""></a>
                </td>
                <td class="fc-event-container">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a>
                </td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td class="fc-event-container">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-taken" data-url=""></a>
                </td>
                <td class="fc-event-container">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我可以访问table下的.fc-content-skeleton代码。但是，当我调用'find（“table”）。children（）时，它只返回thead但不返回我需要的tbody。在获取并附加所有事件后，我正在这样做。

修改

该函数调用如下：

    $(document).on("ready turbolinks:load", function(){
       //.....

       $("#calendar").fullCalendar(calendarOpt);
       $("#calendar").reorganizeEvents();

       //.....
}):

功能本身：

(function($) {
   $.fn.reorganizeEvents = function(){
    if(reorgHandler == false){
      $(this).fullCalendar('render');
      var $dayContainers = $(this).find(".fc-row .fc-content-skeleton table")
           .children(); //obtaining children of the table in .fc-skeleton.
             // Supposed to be <thead> and <tbody>
          console.log($dayContainers); //successfully finds table
          $dayContainers.each(function(index){ 
            console.log($(this)); //shows only <thead> as a single child
          });
          reorgHandler = true;
        }
      }
    }(jQuery));

Answer 1

在关闭</body>

之前，将JavaScript放在页面底部

或使用

$( document ).ready(function(){
  $(".fc-content-skeleton").find("table").children();
})

Answer 2

正如@epascarello指出的那样，当我试图访问它们时，元素没有被渲染。显式调用渲染功能并没有解决问题。但是，fullcalendar具有eventAfterAllRender回调，在所有事件呈现后触发。在此回调上调用我的函数可以解决问题。

Answer 3

使用eventAfterRender

怎么样？

你可以等待元素被渲染，然后选择它。

jQuery没有找到附加元素

3 个答案: