Question

我正在使用日历，需要在课程'fc-today'之后每天追加。

目前，我可以使用下面的脚本附加“fc-date”类的所有元素：

var i = 0;
$('.fc-date').each(function(){
    i++;
    $(this).append('<p class="count">' + i + '</p>');         
});

这个问题是它在'fc-date'之前附加了元素。是否有人能够帮助我做到这一点，只有'fc-date'之后的元素才会出现追加。

*注意：如果解决方案能够处理多个父项的所有“fc-date”元素，那将是更好的选择。

感谢任何建议或协助。

编辑：

HTML目前的外观：

<div>
    <div class="fc-date">
        <p class="count">1</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">2</p>
    </div>
</div>
<div class="fc-today">
     <div class="fc-date">
        <p class="count">3</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">4</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">5</p>
    </div>
</div>

我希望它看起来如何：

<div>
    <div class="fc-date">
    </div>
</div>
<div>
    <div class="fc-date">
    </div>
</div>
<div class="fc-today">
     <div class="fc-date">
        <p class="count">1</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">2</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">3</p>
    </div>
</div>

Answer 1

使用jQuery after()方法，而append()会在选择器之前或之前在选择器中追加数据

var i = 0;
$('.fc-date').each(function(){
    i++;
    $(this).after('<p class="count">' + i + '</p>');         
});

您可以按照以下方式简化

$('.fc-date').each(function(i){
    $(this).after('<p class="count">' + i + '</p>');         
});

文档： https://api.jquery.com/after/‎

Answer 2

如果你有这样的结构：

<div class="fc-date">Day</div>
<div class="fc-date">Day</div>
<div class="fc-today">Day</div>
<div class="fc-date">Day</div>
<div class="fc-date">Day</div>

然后像这样使用nextAll()：

$('.fc-today').nextAll('.fc-date').each(function(i){
    $(this).append('<span class="count">' + i + '</span>');
})

选中 Demo Fiddle

编辑：在另一篇文章中找到实际标记的解决方案

这个问题比较常见，用正确的词语搜索一下我在SO上找到了这个答案：

https://stackoverflow.com/a/324159/2887133

在这里，用户提供了一个出色的功能，可以解决遍历所有DOM级别的问题

这是小提琴回答 http://jsfiddle.net/SkPtv/2/ 。

我提出了他的回答，请提出回答，因为这是你问题的真正答案。

Answer 3

以下是fiddle

示例

<强> HTML

<p id="first">something</p>

<强>的javascript：

$('#first').after().append('<p>second</p>');

Answer 4

.insertAfter()或.after可以解决问题。

如何在某个类/元素之后将内容附加到元素

4 个答案: