Question

基于表格的日历包含每个日期包含日期和数字的周数：

    <tr>
       <td>6<p>16</p></td>
       <td>7<p>16</p></td>
       <td>8<p>16</p></td>
       <td>9<p>16</p></td>
       <td>10<p>16</p></td>
       <td>11<p>16</p></td>
       <td>12<p>16</p></td>
    </tr>

使用像$(".table td:contains(0)").css({"background-color": "#900", "color": "white"});这样的脚本我想要选择包含＆＃39; 0＆＃39;但不是＆＃39; 10＆＃39;的所有td的颜色和背景颜色，＆＃39; 20＆＃39;或＆＃39; 30＆＃39;。同时，我想选择包含＆＃39; 0＆＃39;但不是＆＃39; 10＆＃39;的所有p的颜色。

我已尝试过jquery的:contains和:not(:contains)，但我们不知道如何在:not(:contains)系列中包含多个值以避免css更改在td的10,20和30或p的10中。

欢迎提示。

Answer 1

如果您使用:contains选择器执行此操作，则可以将它们链接起来：

$(".table td:contains('0'):not(:contains(10)):not(:contains(20)):not(:contains(30))").css({"background-color": "#900", "color": "red"});

(See Fiddle)

然而，这真的很难看，很难阅读。我建议跟随 @一个。沃尔夫的建议和使用.filter：

$(".table td:contains(0)").filter(function() {
     return !/10|20|30/.exec($(this).text());
});

(See Fiddle)

Answer 2

您最好使用.filter()通过所有TD并返回符合条件的TD。

创建每个td

clone

抓住P
从克隆中删除P
现在抓住TD的内容
返回符合条件的TD

以下是演示：

＆＃13;

var $tds = $("tr > td").filter(function() {

    var $td = $(this).clone();
    var p_content = parseInt($td.find("p").text(), 10);
    $td.find("p").remove();
    var td_content = parseInt($td.text(), 10);
    return !p_content || !td_content;
});

//Apply some CSS to the matched TDs
$tds.css({"background-color": "green"});

//Now find all the Ps with zero or less value
//and apply your CSS
$tds.find("p").filter(function() {
    return !parseInt($(this).text(), 10)
}).css({"color": "#fff"});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
       <td>6<p>16</p></td>
       <td>0<p>16</p></td>
       <td>8<p>0</p></td>
       <td>9<p>16</p></td>
       <td>10<p>0</p></td>
       <td>11<p>16</p></td>
       <td>10<p>0</p></td>
    </tr>
</table>

＆＃13;

jquery：contains，：not（：contains）选择

2 个答案: