仅当之前未使用 jQuery 添加元素时，才在一组元素之后添加元素答案

【问题标题】：Add element after a set of elements only if it hasn't been added previously using jQuery仅当之前未使用 jQuery 添加元素时，才在一组元素之后添加元素
【发布时间】：2011-10-22 19:37:56
【问题描述】：

我有一些 jQuery 代码可以找到带有 shaded CSS 类的元素，并在其后添加一个 div 元素。它在文档就绪事件处理程序中运行。

$(".shaded").after("<div class='shader'></div>");

着色器类提供样式以使上述元素看起来凸起。

我的问题是我们开始使用 Ajax 来填充内容，所以现在我需要在每次使用 Ajax 检索新内容时运行上面的代码。

我想知道的是如何检测这个动态添加的“着色器”div 之前是否已添加。我知道我可以使用这个找到下一个元素：

$(".shaded").next("div").hasClass("shader")

但是如何优雅地将“着色器”only添加到尚未着色的元素中？

提前致谢。

【问题讨论】：

标签： javascript jquery ajax dhtml

【解决方案1】：

你可以尝试这样的事情（虽然未经测试）：

$(".shaded + :not('div.shader')").prev().after("<div class='shader'></div>");

它会找到所有类shaded的div，并过滤掉那些后面没有类.shader的div。

感谢@Joseph 指出.prev()

【讨论】：

【解决方案2】：

首先，你应该用 CSS 真正解决这个问题。但我可以想象很难做到的情况（*cough*IE6*cough*）。

你可以用讨厌的 jQuery 方法来做，并得出哪些元素已经有一个着色器，就像 Mrchief 的解决方案一样。或者您采用负责任的解决方案并保留已被着色的元素列表，甚至更好的是，保留仍需要着色的元素列表。

jQuery 鼓励你“滥用”你的 DOM 来存储关于你的模型的信息，而你真的应该只创建一个模型并根据模型中的信息使用 jQuery。这正是我不再将 jQuery 用于不涉及非常复杂任务的任何事情的原因（我仍然将它用于动画和花哨的插件，如 lightboxes）。

【讨论】：

是的，使用 CSS3，这可以使用 box-shadow 来完成，但我需要更广泛的支持。 .shaded { 盒子阴影：0 0.3em 0.3em #999;边距底部：1.3em； }

【解决方案3】：

$(".shaded + :not(.shader)").prev().after("<div class='shader'></div>");

工作和tested

【讨论】：