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

Question

我不知道这是否可行，但我正在尝试根据其内容将样式应用于span标记。

我在博客网站上有一些标签存储在span标签中，并希望根据其内容设置样式。

 $(“#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命令，但没有太多运气。

Answer 1

1. 使用. 而不是#为col-cell因为它指的是一个类
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> 

更新

嗨我已经设法让它现在工作，谢谢你，另外一件事，我想使用另一个选择器而不是：包含，并使用基于单词的第一个字符的选择器

从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>