div中的jQuery计数字符？

Question

我试图根据内部文本的字符长度为div提供不同的背景。

这是我目前的代码：

$('.aProduct .inner').each(function() {
    var length = $(this).text().length;    
    if(length > 20){
        $(this).css("background", "red");
    }
    else {
        $(this).css("background", "blue");
    }
});

HTML：

<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>

但是代码不起作用，我在jQuery上很可怕。有关如何修复代码的任何建议或提示或教程？

Answer 1

使用$.trim()，您的实施问题是计算长度时占用空格。

  

从字符串的开头和结尾删除空格。

代码的

var length = $.trim($(this).text()).length;  

DEMO

修改

@KingKing的一个非常好的观点

$('.inner').css('background', function(){    
    return $(this).text().trim().length > 20 ? 'red' : 'blue';
});

DEMO