Question

这是我的HTML代码

<div id="ccc_new_val_hdn">
    <span>9</span>
    <span>,</span>
    <span> </span>
    <span>6</span>
    <span>2</span>
    <span>1</span>
</div>

我需要像这样转换逗号和空格

<span class='comma'>,</span>

和空间

<span class='space'> </span>

我试过：contains（）和find（），但我无法获取代码。

Answer 1

只需迭代并设置类。

$('#ccc_new_val_hdn span').each(function() {
    if($(this).html() == ','){
        $(this).addClass('comma');
    }
    if($(this).html() == ' '){
        $(this).addClass('space');
    }
});

演示：http://jsbin.com/igaraq

Answer 2

您可以选择div中的所有跨度并修剪，然后检查值，之后您可以设置要应用的类。

$(document).ready(function(){
    $('#ccc_new_val_hdn span').each(function(){
        var text = $.trim($(this).text());
        if(text === ',')
            $(this).addClass('comma')
        else if(text === "")
            $(this).addClass('space');
    });
});

Answer 3

或者.text()就足够了

$('#ccc_new_val_hdn span').each(function() {
    if($(this).text() == ','){
        $(this).addClass('comma');
    }
    if($(this).text() == ' '){
        $(this).addClass('space');
    }
});

Answer 4

当您拥有包含单个空白字符的元素时，浏览器的行为可能会有所不同。例如，Safari会在解析时将其删除，而Firefox会保留它。

jQuery的:contains过滤器可能不是很有用，因为它在元素的文本内容中的任何位置进行搜索，但看起来您想要进行精确搜索。 :contains的问题在于，在搜索只包含逗号的元素时，它会匹配所有这些：

<span>,</span>
<span>hello, world</span>
<span> , </span>

第二个和第三个元素将匹配逗号和空格。

这是一个与:contains类似的自定义jQuery过滤器，但会改为精确匹配文字。

jQuery.expr[':'].hasText = function(element, index, meta) {
    var textToSearch = meta[3];
    return $(element).text() == textToSearch;
};

将其用作:hasTexT(..)。这是一个如何通过文本内容选择元素并更改其CSS类的示例。

$(':hasText(,)').addClass('comma');
$(':hasText( )').addClass('space');

这是一个example。在Firefox中试试吧。其他浏览器可能吃掉单个空格。

如何根据文本添加其他属性

4 个答案: