jquery - この変更を行うのに最適なjqueryセレクターは何ですか?

Question

method() の後にjqueryを使用して新しいHTMLに貼り付ける次のhtmlがあります。これは正常に動作しますが、特定の条件下 (トップ TD に追加のクラスが存在する場合) で after() メソッドを適用したくない状況になり、正しい jquery セレクター構文を理解しようとしています。

これをより具体的にするために、まず、次の html を用意します。

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

そして、次のロジックが必要です:このhtmlを貼り付けたい:

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

fc-day-number divの直後。これを行うことでこれを簡単に行うことができます：

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

トップ div にこの追加のクラスがある場合、.after() メソッドを実行したくない場合を除いて、これはうまく機能します: fc-other-month

トップが次のようになっている場合は、コマンドの後にこれを適用します。

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

ただし、トップ TD が次のようになっている場合はそうではありません。

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

Answer 1

試す：

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

わかりやすくするために、例には改行があります。<span class="addEventHidden" ... >正当な 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

正しい親を持つ s.filterのみを取得するために使用できます。divs

$('.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>";
});

または、より具体的なセレクターを使用してdiv.

$('.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>";
});

</div>PS の前にa を忘れました</td>。

Answer 4

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