jQuery沒有找到附加元素

我想破解fullcalendar以便在我的日曆中顯示每行多個事件。所以爲了做到這一點，我想迭代這些行並重新組織它們的內容。不過，這些行jQuery不能find()。jQuery沒有找到附加元素

<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));

來源

2016-09-30 mityakoval

+10

你在哪裏叫這個JavaScript代碼？我的水晶球說你正試圖在元素存在之前訪問這些元素。 – epascarello

@epascarello這個，或者它也可以在它們存在之前使用一個變量值。取決於何時寫入find（）...。 – krillgar

@epascarello我在'document.ready'函數中實例化fullcalendar後，在'$（「＃calendar」）'上調用它。 – mityakoval

把你的JavaScript在頁面的底部，閉幕前</body>

或使用

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

來源

2016-09-30 20:34:46

我正在從'document.ready'塊調用函數。我已經更新了我的問題，以說明我是如何完成的。 – mityakoval

@epascarello指出，當我試圖訪問它們時，元素未呈現。顯式調用渲染函數不能解決問題。但是，fullcalendar具有eventAfterAllRender回調，在所有事件呈現後觸發。在這個回調中調用我的函數解決了這個問題。

來源

2016-10-01 14:16:54 mityakoval

怎麼樣使用eventAfterRender

你可以等待該元素被渲染，然後選擇它。

來源

2016-10-03 14:59:35

jQuery沒有找到附加元素

回答

相關問題