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

Posted 2023-05-09

【中文标题】如何在某个类/元素之后将内容附加到元素[关闭]

【英文标题】：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()函数。

我认为他想将<p> 元素附加到所有出现在“fc-today”之后的“fc-date”元素。对吗？

【参考方案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://***.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('<p>second</p>'); 实际上与$('#first').append('<p>second</p>'); 相同。您对after() 的调用没有添加任何内容，因此它没有执行任何操作。

不，它在做它的事。您可以检查从小提琴产生的标记。因为append() 在目标元素内添加了内容。

它只是追加，你的代码中不需要after()，甚至删除它会给出相同的输出。

@rockStar append() 正在做这件事。 after() 没有做任何事情。没有它你会得到同样的结果。

【参考方案4】：

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