Question

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

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

着色器类提供样式以使上面的元素看起来像。

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

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

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

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

提前致谢。

Answer 1

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

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

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

感谢@Joseph指出.prev()

Answer 2

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

你可以用讨厌的jQuery方式做到这一点并派生出哪些元素已经有着色器，就像Mrchief的解决方案一样。或者你采取负责任的解决方案并保留已着色的元素列表，甚至更好的是，仍然需要着色的元素列表。

jQuery鼓励您“滥用”您的DOM来存储有关模型的信息，而您真的应该根据模型中的信息创建模型并使用jQuery。这正是为什么我不再使用jQuery来处理任何不涉及非常复杂任务的事情的原因（我仍然将它用于动画和幻想插件，如灯箱）。

Answer 3

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

有效，tested