根据内容应用CSS样式来跨越标签 [英] Apply CSS style to span tag based on content

问题描述

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

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

 js lang-js prettyprint-override>  $（＃col-cell.span：contains code> 

< script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =col-cell> <跨度>云< /跨度> <跨度>商业< /跨度> < span>社交< / span>< / div>

>我发现了这个jQuery命令，但没有多少运气。 使用 。代替＃用于 col-cell ，因为它是引用类


在 col-cell 和 span 空格 >表示您正在寻找孩子

在：contains（）本身中，不要使用引号

$（'。col-cell span：contains（c）'）

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>< / script>< ; div class =col-cell> <跨度>云< /跨度> <跨度>商业< /跨度> < span>社交< / span>< / div>

> 更新

您好，我已经设法让它现在工作，谢谢，还有一件事，我想使用另一个选择器来代替：包含并使用基于单词第一个字符的选择器

从模拟jQuery选择器：starts-with或者：结束 - 用于搜索文本？

$。extend（ $ .expr [：]，{starts-with：function（elem，i，data，set）{var text = $ .trim（$（elem）.text（）），term = data [3] ; //第一个索引是0 return text.indexOf（term） === 0; }，ends-with：function（elem，i，data，set）{var text = $ .trim（$（elem）.text（）），term = data [3]; //最后一个索引是最后一个可能的返回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>社交< / span>< / div>  

I don't know if this is possible, but I am trying to apply a style to a span tag based on its content.

I have some tags on a blog site that are stored in a span tag and would like to style them based on their content.

$("#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>

I found this jQuery command, but didn't have much luck with it.

解决方案

1. Use . instead of # for col-cell since it is referring to a class
2. Use a space between col-cell and span to indicate you are searching for children
3. Within :contains() itself, do not use quotes

$('.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>

Update

hi i have managed to get it to work now, thank you, there one other thing, i would like to use another selector instead of :contain, and use a selector based on the first character of the word

From jQuery selector that simulates :starts-with or :ends-with for searching text?

$.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>

这篇关于根据内容应用CSS样式来跨越标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！