什么是最好的jQuery选择器进行此更改？

我有以下的HTML，我使用jQuery的方法（）来坚持一些新的HTML。这工作得很好，但我现在有一种情况，我不希望它在特定条件下（其中一个额外的类存在于顶级TD中）应用after（）方法，并且我试图找出正确的jquery选择器语法。什么是最好的jQuery选择器进行此更改？

为了使这更具体，开始，我有以下的html：

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

，我想下面的逻辑：我要坚持这个网站：

 <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有这个额外的类：FC-其他 - 一个月

命令后，所以将此如果顶部看起来是这样的：

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

但如果上TD是这样的：

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

来源

2012-04-09 leora

尝试：

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

实施例具有用于清晰度换行符。用合法的html替换<span class="addEventHidden" ... >。

来源

2012-04-09 19:40:12 iambriansreed

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

来源

2012-04-09 19:35:12 joeljoeljoel

'fc-other-month'是父类。 – 2012-04-09 19:37:16

fc-other-month不会成为与fc-day-number相同的类，它是上面TD的一个类。。我假设一些语法需要考虑到这个 – leora 2012-04-09 19:40:20

-2

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

来源

2012-04-09 19:37:24 Tuan

这将针对'td'，而不是'div'。 – 2012-04-09 19:38:10

['：parent']（http://api.jquery.com/parent-selector/）不能这样工作。我认为你的意思是'：parent'或'：has（.fc-day-number）'。无论哪种方式，这些都是不需要的，你可以做''.fc-widget-content：not（.fc-other-month）.fc-day-number'。 – 2012-04-09 19:54:56

-2

您可以使用.filter只得到divs s的正确的父：

$('.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.您在</td>之前忘记了</div>。

来源

2012-04-09 19:41:34

我没有投票，但是检查了“正确的父母“似乎是一个尴尬的方式来做到这一点你的第二个解决方案在选择器中的双/单引号不匹配 – Mathletics 2012-04-09 19:48:50

@Mathletics：第一只是一个建议，从来没有说过它是最好的主意。 :-P – 2012-04-09 19:50:59

什么是最好的jQuery选择器进行此更改？

回答

相关问题