根据内容将CSS样式应用于span标签

Question

我不确定这是否可行，但我正在尝试根据标签的内容应用样式。

在博客网站上，我的一些标签存储在标记中，希望根据它们的内容来设置样式。

$(“#col-cell.span:contains(‘c’)”).css(‘color’,’blue’);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-cell">
  <span>cloud</span>
  <span>business</span>
  <span>social</span>
</div>

我找到了这个jQuery命令，但是使用它并没有什么好结果。

- user2513528

---

如果这个答案没有解决你的问题，或者你仍然遇到困难，请告诉我，我可以帮助你。 - AmmarCSE

Answer 1

1. 在 col-cell 中使用 . 而不是 #，因为它是指代类(class)
2. 在 col-cell 和 span 之间使用空格，表示你正在查找子元素
3. 在 :contains() 内部本身，不要使用引号

$('.col-cell span:contains(c)').css('color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="col-cell">
  <span>cloud</span>
  <span>business</span>
  <span>social</span>
</div>

更新

你好，我现在已经成功让它工作了，谢谢。还有一件事，我想使用另一个选择器而不是 :contain，并且使用基于单词首字母的选择器。

来自jQuery 选择器模拟 :starts-with 或 :ends-with 用于搜索文本？

$.extend($.expr[":"], {
    "starts-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // first index is 0
        return text.indexOf(term) === 0;
    },

    "ends-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // last index is last possible
        return text.lastIndexOf(term) === text.length - term.length;
    }
});
$('span:starts-with(c)').css('color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="col-cell">
  <span>cloud</span>
  <span>business</span>
  <span>social</span>
</div>

- AmmarCSE

---

谢谢你的帮助，非常清晰易懂。然而，我似乎无法让它正常工作。我甚至尝试了这个：$(document).ready(function () { $('.col-cell span a:contains(c)').css('background-color', 'blue'); }) - user2513528

嗨，我现在已经成功让它工作了，谢谢。还有一件事，我想使用另一个选择器而不是:contain，并且使用基于单词第一个字符的选择器。 - user2513528