如何在某个类/元素之后将内容附加到元素[关闭]答案

【问题标题】：How to append content to an element after a certain class/element [closed]如何在某个类/元素之后将内容附加到元素[关闭]
【发布时间】：2014-03-03 13:57:44
【问题描述】：

我正在使用日历，需要在“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>

【问题讨论】：

你能给我们看看原始的 html，运行这个脚本产生的 html，以及你想要结束的 html 吗？
使用$(this).append，您将附加在 fc-date 中而不是之后或之前
insertAfter() 和 insertBefore()
使用after()函数。
我认为他想将 元素附加到所有出现在“fc-today”之后的“fc-date”元素。对吗？

标签： jquery dom append

【解决方案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/‎

【讨论】：

【解决方案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/。

我赞成他的回答，请也赞成，因为这是您问题的真正答案。

【讨论】：

嗯，这似乎正是我所需要的，但是当我尝试实现它时，它对我不起作用。不过，这应该足够了。谢谢。
@MaverickHusker 这不适用于您的实际标记我在您编辑帖子之前发布它。
嗯，好的，您能帮我制作一个与发布的标记一起使用的吗？
@MaverickHusker 找到答案检查编辑
非常感谢您的帮助。我必须稍微改变它才能让它工作，我删除了以下几行： $.fn.reverse = function() { return this.pushStack(this.get().reverse(), arguments); };然后将其余部分包装在一个函数中。再次感谢。当我获得所需的 15 名声望时，将支持您的答案以及您链接到的主题中的答案。

【解决方案3】：

这是一个示例fiddle

HTML

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

javascript:

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

【讨论】：

我不明白，请解释一下。我也可能获得一些新知识:)
$('#first').after().append('second'); 实际上与$('#first').append('second'); 相同。您对after() 的调用没有添加任何内容，因此它没有执行任何操作。
不，它在做它的事。您可以检查从小提琴产生的标记。因为append() 在目标元素内添加了内容。
它只是追加，你的代码中不需要after()，甚至删除它会给出相同的输出。
@rockStar append() 正在做这件事。 after() 没有做任何事情。没有它你会得到同样的结果。

【解决方案4】：

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

【讨论】：