Question

我有以下html，我使用jquery 方法（）来粘贴一些新的HTML。这工作正常，但我现在有一种情况，我不希望它在某些条件下应用after（）方法（其中一个额外的类存在于顶级TD），我试图找出正确的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>";
});

这很有效，除非在某些情况下我不想运行.after（）方法如果top div有这个额外的类： 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

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

Answer 4

您可以使用.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>";
});

P.S。您在</div>之前忘记了</td>。

进行此更改的最佳jquery选择器是什么？

4 个答案: