Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我找到了这个jQuery命令，但没有太多运气。

Answer 1

.使用#代替col-cell，因为它指的是一个类
在col-cell和范围之间使用空格表示您正在搜索儿童
在: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 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样式应用于span标记

1 个答案: