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>

我要做的是清除class = date的所有范围，然后在class为day_name的span之后插入新的span。我尝试了以下但是反向插入

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

jquery在选择器后插入元素

1 个答案: