僅在元素之後才添加元素，前提是以前沒有使用jQuery添加元素

Question

我有一些jQuery代碼，它可以找到帶有陰影的元素 CSS類，並在其後添加div元素。它在文檔就緒事件處理程序中運行。

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

着色器類提供樣式，使上面的元素看起來引發。

我的問題是，我們開始使用Ajax來填充內容，所以現在我需要在每次使用Ajax檢索新內容時運行代碼。

我想知道的是如何檢測這個動態添加的「着色器」div是否已被添加。我知道我可以找到使用這種那些未來的元素：

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

但我怎麼優雅添加了「着色」 只到沒有陰影尚未元素？

在此先感謝。

Answer 1

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

作品和tested

Answer 2

你可以嘗試這樣的事情（雖然未經測試）：

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

它發現所有的div shaded類，並篩選出沒有與.shader類股利後，他們的人。

感謝@Joseph您指出的.prev()

Answer 3

首先，你應該用CSS解決這個問題。但我可以想象那些很難做到的情況（*咳嗽* IE6 *咳嗽*）。

你可以做到討厭的jQuery方式，並派生出哪些元素已經有着色器，如Mrchief的解決方案。 或者你採取負責任的解決方案，並保留一個已被陰影的元素列表，甚至更好的列表仍然需要着色的元素。

jQuery鼓勵你'濫用'你的DOM來存儲你的模型的信息，而你真的應該只是建立一個模型，並根據模型中的信息來使用jQuery。這正是我不再使用jQuery來處理任何不涉及非常複雜任務的事情的原因（我仍然將它用於動畫和插件，如燈箱）。