Question

I have the following html where I use the jquery after method() to stick in some new HTML. This works fine but I now have a situation where I don’t want it to apply the after() method under certain conditions (where an additional class exists in a top TD) and i am trying to figure out the correct jquery selector syntax.

To make this more concrete, to start, I have the following html:

 <td class="fc-widget-content">
 <div>
      <div class="fc-day-number">1</div>
      <div class="fc-day-content">
  </div>
  </td>

and I want the following logic: I want to stick this html:

      <span class="addEventHidden" style="display: none;">
            <img src="/Content/Images/addEvent.gif">
      </span>

right after the fc-day-number div. I can do this easily by doing this:

$('.fc-day-number').after(function () {
    return "<span class='addEventHidden' style='display: none;'><img src='/Content/Images/addEvent.gif'></span>";
});

this works great except in some cases I don’t want to run the .after() method if the top div has this extra class: fc-other-month

so apply this after command if the top looks like this:

 <td class="fc-widget-content">

but NOT if the top TD looks like this:

 <td class="fc-widget-content fc-other-month">

Answer 1

Try:

$('td.fc-widget-content:not(.fc-other-month) div.fc-day-number')
    .after('<span class="addEventHidden" ... >');

Example has line break for clarity. Replace <span class="addEventHidden" ... > with legit html.