替代jQuery contains（）选择器 - 是否有一个is（）或equals（）选择器？

Question

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

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

我使用了这个选择器：

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

但是，这会选择包含td的{​​{1}}个单元格，我不想发生这种情况。

我发现this answer有一个Not选择器，但我不是程序员，也不了解如何将.filter()应用于我的jQuery代码，所以我和＃39;我想知道是否有类似.filter()或is()选择器的功能？

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");

这是一个片段......

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>