Question

I have some jQuery code that finds elements with the shaded CSS class and adds a div element after it. It is run in the document ready event handler.

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

The shader class provides styling to make the above element look raised.

My problem is that we started using Ajax to populate content, so now I need to run the code above each time new content is retrieved using Ajax.

What I want to know is how I can detect if this dynamically added “shader” div has previously been added. I know I can find those next elements using this:

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

But how do I elegantly add the “shader” only to the elements that have not been shaded yet?

Thanks in advance.

Answer 1

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

works and tested