替代 jQuery contains() 选择器 - 是否有 is() 或 equals() 选择器？

Question

警告：我不是开发人员，我是设计师。

从this answer 我了解到:contains() 选择器。

我是这样使用这个选择器的：

jQuery(document).ready(function() {
    jQuery("td:contains('No')").css("background-color", "#FFBFBF");
});

但是，这会选择包含 Not 的 td 单元格，这是我不希望发生的。

我发现this answer 中有一个.filter() 选择器，但我不是程序员，不明白如何将.filter() 应用于我的jQuery 代码，所以我想知道是否有is() 或 equals() 选择器之类的功能？

Answer 1

对于使用filter()的绝对匹配：

jQuery("td").filter(function(){
    return jQuery(this).text().trim() === 'No';
}).css("background-color", "#FFBFBF");

Answer 2

默认没有这样的选择器，但是你可以自己构建，filter你想要的东西。

如何添加新的选择器

jQuery.expr[":"] 是一个包含可用选择器的对象（例如:visible、:checked 和许多其他）。在这里您要添加一个新的选择器。因此，在这种情况下，选择器名称将是键，值将是在第一个参数中接收元素的函数。

如果此函数返回true，则元素匹配，否则（如果是false），则元素不匹配。

例如，这是:checked 定义：

jQuery.expr[":"].checked = function (el) {
   return el.checked === true;
};

添加:containsExact

简单地说，extend 或直接将方法附加到jQuery.expr[":"] 对象中：

jQuery.expr[":"].containsExact = function (el, textToSearch) {
   return el.textContent === textToSearch;
};

示例

// Add the containsExact selector
jQuery.expr[":"].containsExact = function(el, index, args) {
  return el.textContent === args[3];
};

// Highlight the spans containing "Mars" in red
jQuery("span:containsExact('Mars')").css("background", "#F82125");

// Highlight "Hello World" in yellow
jQuery("span:containsExact('Hello World')").css("background", "#F5C700");

// Highlight the "Hello Mars" (without exclamation mark) in blue
jQuery("span:containsExact('Hello Mars')").css("background", "#0696DE");

span {
  padding: 8px;
  margin: 8px;
  display: inline-block;
  font-family: Arial;
  font-weight: bold;
  color: #293E51;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><span>Hello</span> <span>World</span></span><br>
<span><span>Hello</span> <span>Mars</span></span><br>
<span><span>Hello</span> <span>Mars</span></span>!<br>
<span><span>Hello</span> <span>Mars</span>!</span>

Answer 3

我在创建的一个简单 JSP 页面上获得了所有 td 标记，以使用以下代码更改为适当的颜色。 （这段代码放在我的 JSP 页面的 head 部分的脚本标签中）

$(document).ready(function(){
    $("td").each(function(){
        if($(this).html() == 'No')
        {
            $(this).css("background-color", "#FFBFBF");
        }
    });
});

我在这里所做的就是这个

1. 选择我页面上的所有td标签
2. 检查td内的文字是否为否
3. 如果是，请将其更改为适当的颜色。如果没有，请忽略它

Answer 4

不要使用复杂的解决方案，只需使用.not() 取消选择包含'Not' 或任何其他不想包含的单词的元素;-)

.not(":contains('Not')")

您的代码应如下所示...

jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");

这是一个sn-p...

jQuery(document).ready(function() {
    jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> What for breakfast today? </h3>
<table border=1 cellspacing=0>
  <tr>
    <td>Tea</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Coffee</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Orange juice</td>
    <td>Yeah</td>
  </tr>
  <tr>
    <td>Champagne</td>
    <td>Not for breakfast!</td>
  </tr>
</table>