How to append content to an element after a certain class/element

I am working with a calendar and need to append every day after the class 'fc-today'.

Currently, I am able to append all of the elements with the class 'fc-date' using the script below:

var i = 0;
$('.fc-date').each(function(){
    i++;
    $(this).append('<p class="count">' + i + '</p>');         
});

The problem with this is that it appends the elements before 'fc-date'. Would anyone be able to help me to make it so that the append only occurs to elements after 'fc-date'.

*NOTE: It would be preferable if the solution was able to work on all 'fc-date' elements across multiple parents.

Any advice or assistance is appreciated.

EDIT:

How the HTML currently looks:

<div>
    <div class="fc-date">
        <p class="count">1</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">2</p>
    </div>
</div>
<div class="fc-today">
     <div class="fc-date">
        <p class="count">3</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">4</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">5</p>
    </div>
</div>

How i want it to look:

<div>
    <div class="fc-date">
    </div>
</div>
<div>
    <div class="fc-date">
    </div>
</div>
<div class="fc-today">
     <div class="fc-date">
        <p class="count">1</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">2</p>
    </div>
</div>
<div>
    <div class="fc-date">
        <p class="count">3</p>
    </div>
</div>

Answers


If you have an structure like this:

<div class="fc-date">Day</div>
<div class="fc-date">Day</div>
<div class="fc-today">Day</div>
<div class="fc-date">Day</div>
<div class="fc-date">Day</div>

Then use nextAll() like this:

$('.fc-today').nextAll('.fc-date').each(function(i){
    $(this).append('<span class="count">' + i + '</span>');
})

Check this Demo Fiddle


Edit : Found solution in another post to your actual Markup

This problem is more common and searching a little with the right words I found this answer here on SO:

https://stackoverflow.com/a/324159/2887133

Here the user makes an excellent function that solves your problem traversing all levels of the DOM

Here is the Fiddle aplying his answer http://jsfiddle.net/SkPtv/2/.

I've upvoted his answer please upvote that too since is the real answer to your problem.


Use jQuery after() method and append() will append data inside the selector not after or before the selector

var i = 0;
$('.fc-date').each(function(){
    i++;
    $(this).after('<p class="count">' + i + '</p>');         
});

You can simplify it as follows

$('.fc-date').each(function(i){
    $(this).after('<p class="count">' + i + '</p>');         
});

Documentation :https://api.jquery.com/after/‎


Here is a sample fiddle

HTML

<p id="first">something</p>

javascript:

$('#first').after().append('<p>second</p>');

.insertAfter() or .after should do the trick.


Need Your Help

jQuery form plugin - iframe problem

javascript jquery internet-explorer forms

Here I am, with another problem. :) Maybe this time I'll get some responses. :P I'm using jquery.form.js plugin, to process forms with file fields. It's simple implementation.

What is the direct link for the standalone Java EE JAR file?

java java-ee jar

Where can I obtain the standalone Java EE JAR file? I've looked everywhere on sun.com, but can't find a way to get the JAR file without also installing the app server, etc, etc.