jquery Insérer des éléments après un sélecteur

Question

J'essaie d'insérer un élément après un sélecteur en utilisant jquery mais je n'ai pas réussi à le faire correctement. Si quelqu'un peut aider, je l'apprécie ..

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

ce que je tente de faire est clair toute la durée où class = date et puis insérez le droit de nouvelle travée après la durée où la classe est day_name. J'ai essayé ce qui suit, mais il insérait dans le sens inverse

 $('#'+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

Vous pouvez faire

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

Mais il est en fait mieux réduire le nombre de remboursements et d'insérer à la fois le code 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);