jquery在選擇器之後插入元素

Question

正試圖在使用jquery的選擇器之後插入元素，但我無法正確理解它。如果有人可以幫助，我將不勝感激..

<div id="blog_cal" class="calendar_panel_bottom_noborder calendar_view"> 
    <div id="csrf" class="hidden_div"><div style="display:none"><input type="hidden" value="f5a7b1a73fb84b7f9f3f363b586a9d16" name="csrfmiddlewaretoken"></div></div> 
    <span class="month">August, 2011</span> 


     <span class="day_name">M</span> 

     <span class="day_name">T</span> 

     <span class="day_name">W</span> 

     <span class="day_name">T</span> 

     <span class="day_name">F</span> 

     <span class="day_name">S</span> 

     <span class="day_name">S</span> 




      <span class="date">1</span> 

      <span class="date">2</span> 

      <span class="date">3</span> 

      <span class="date">4</span> 

      <span class="date">5</span> 

      <span class="date">6</span> 

      <span class="date">7</span> 




      <span class="date">8</span> 

      <span class="date">9</span> 

      <span class="date"><a href="#">10</a></span> 

      <span class="date">11</span> 

      <span class="date">12</span> 

      <span class="date">13</span> 

      <span class="date">14</span> 




      <span class="date">15</span> 

      <span class="date">16</span> 

      <span class="date">17</span> 

      <span class="date">18</span> 

      <span class="date">19</span> 

      <span class="date">20</span> 

      <span class="date">21</span> 




      <span class="date">22</span> 

      <span class="date">23</span> 

      <span class="date">24</span> 

      <span class="date">25</span> 

      <span class="date">26</span> 

      <span class="date">27</span> 

      <span class="date">28</span> 




      <span class="date">29</span> 

      <span class="date">30</span> 

      <span class="date">31</span> 

      <span class="date"></span> 

      <span class="date"></span> 

      <span class="date"></span> 

      <span class="date"></span> 






    <a href="/blog/archives/2011/7/" id="blog_cal_next" class="calendar_nav">next</a> <a href="/blog/archives/2011/9/" id="blog_cal_prev" class="calendar_nav">prev</a> 
    <div class="clear"></div> 
</div> 

什麼我試圖做的是清除所有的跨度，其中類=日期，然後在那裏類是DAY_NAME跨度後插入新跨越的權利。 我嘗試以下，但它是在反向

 $('#'+CalId).find('span[class~="date"]').remove(); 

     var filler = $('#'+CalId).find('span[class~="day_name"]').last(); 

     $.when(AjaxNavigate(this, CalId)) 
     .then(function(data) { 
        $.each(data.days[0], function(index, week){ 
         $.each(week, function(index, day) { 
          // repopulate date fields 
          filler.after('<span class="date">'+day[0]+'</span>'); 
         }); 
        }); 
       }); 

Answer 1

插入你可以做

filler = $('<span class="date">'+day[0]+'</span>').insertAfter(filler); 

但它實際上是更好的，以儘量減少迴流的數量和一次性插入HTML：

var html = $.map(data.days[0], function(week){ 
    return $.map(week, function(day) { 
     return '<span class="date">'+day[0]+'</span>'); 
    }).get().join(''); 
}).get().join(''); 

filler.after(html);