Was ist der beste JQuery-Selektor für diese Änderung?

Question

Ich habe die folgende HTML, wo ich die jquery nach Methode() verwenden, um in einigen neuen HTML-Sticks. Das funktioniert gut, aber ich habe jetzt eine Situation, in der ich nicht möchte, dass es die after() -Methode unter bestimmten Bedingungen anwendet (wo eine zusätzliche Klasse in einem Top-TD existiert) und ich versuche, die korrekte jQuery-Selektor-Syntax herauszufinden.

Um dieses zu konkretisieren, zu beginnen, ich habe folgendes html:

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

und ich möchte die folgende Logik: Ich möchte diesen HTML-Stick:

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

direkt nach dem fc-day-nummer div. Ich kann dies leicht tun dies, indem Sie:

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

funktioniert dies sehr gut, außer in einigen Fällen möchte ich nicht die .after() -Methode ausgeführt werden, wenn die obere div diese Extraklasse hat: fc-andere- Monate

so dass diese nach dem Befehl anzuwenden, wenn die oben wie folgt aussieht:

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

aber nicht, wenn der Top-TD wie folgt aussieht:

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

Answer 1

Versuchen:

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

Beispiel hat Zeilenumbruch für Klarheit. Ersetzen Sie <span class="addEventHidden" ... > durch legit html.

Answer 2

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

Answer 3

$(".fc-widget-content:not(.fc-other-month):parent(.fc-day-number) .fc-day-number"); 

Answer 4

können Sie .filter nur verwenden, um divs s mit den richtig Eltern zu bekommen:

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

Oder Sie können einen spezifischeren Selektor verwenden, um die div auszuwählen.

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

P.S. Sie haben eine </div> vor Ihrer </td> vergessen.