Добавлять элемент после набора элементов, только если он не был добавлен ранее с использованием jQuery

Question

У меня есть некоторый код jQuery, который находит элементы с CSS-классом shaded и добавляет после него элемент div. Он запускается в обработчике событий готовности документа.

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

Класс шейдера обеспечивает стилизацию, чтобы вышеуказанный элемент выглядел поднятым.

Моя проблема в том, что мы начали использовать Ajax для заполнения контента, поэтому теперь мне нужно запускать приведенный выше код каждый раз, когда новый контент извлекается с помощью Ajax.

Что я хочу знать, так это как я могу определить, был ли ранее добавлен этот динамически добавленный «шейдерный» div. Я знаю, что могу найти следующие элементы, используя это:

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

Но как мне элегантно добавить «шейдер» only к элементам, которые еще не были закрашены?

Заранее спасибо.

Answer 1

Прежде всего, вы должны решить эту проблему с помощью CSS.Но я могу представить себе ситуации, когда это трудно сделать (* кашель * IE6 * кашель *).

Вы можете сделать это отвратительным способом jQuery и определить, какие элементы уже имеют шейдер, например, решение Mrchief.Или вы принимаете ответственное решение и сохраняете список элементов, которые были затенены, и, что еще лучше, список элементов, которые все еще должны быть затенены.

jQuery призывает вас «злоупотреблять» вашей DOM для хранения информациио вашей модели, в то время как вы действительно должны просто сделать модель и использовать jQuery на основе информации в модели.Именно по этой причине я больше не использую jQuery для всего, что не связано с очень сложными задачами (я все еще использую его для анимации и модных плагинов, таких как лайтбоксы ).

Answer 2

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

работает и проверено

Answer 3

Вы можете попробовать что-то вроде этого (хотя и не проверено):

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

Находит все div с классом shaded и отфильтровывает те, у которых нет div с классом .shader после них..

Спасибо @Joseph за указание на .prev()