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

Question

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

来自 this answer I learned of the :contains() 选择器。

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

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

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

我发现 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

我在一个简单的 JSP 页面上获取了所有 td 标签，我使用以下代码将其更改为适当的颜色。（此代码位于脚本标记内我的 JSP 页面的头部部分）

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

我在这里所做的就是这些

正在选择我页面上的所有 td 标签
正在检查 td 中的文本是否为否
如果是，请将其更改为合适的颜色。如果没有，就忽略它

Answer 3

默认情况下没有这样的选择器，但您可以构建自己的选择器，filter随心所欲。

如何添加新的选择器

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

如果这个函数returnstrue匹配到元素，否则（如果是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 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>

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

Alternative to jQuery contains() Selector - is there an is() or equals() Selector?

jquery

jquery-selectors

如何添加新的选择器

添加`:containsExact`

例子

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

Alternative to jQuery contains() Selector - is there an is() or equals() Selector?

jquery

jquery-selectors

如何添加新的选择器

添加:containsExact

例子

添加`:containsExact`