基于字符计数的 if/else 条件 jQuery

Question

我正在尝试创建一个 jQuery 函数来计算每个锚标记的字符长度，并在字符计数大于“5”时应用一个类。此外，如果字符数大于 7 (4 + 3)，则应用不同的类别。

这就是我到达的地方（JSFIDDLE：http://jsfiddle.net/2mg3q/）：

超文本标记语言

<div id="global-nav">
    <ul id="nav">
        <li><a href="#">One</a></li>
        <li><a href="#">Item5</a></li>
        <li><a href="#">Item with11</a></li>
        <li><a href="#">One</a></li>
    </ul>
</div>

CSS

#nav{
    list-style:none;
    margin:0;
    padding:0;
}
#nav li a{
    display:block;
    padding:5px;
    border:1px solid #ccc;
}

#nav li a.TEST1{
    border-color:red;
}

#nav li a.TEST2{
    border-color:blue;
}

JS

var navChars = 4;

$('#global-nav #nav li a').filter(function() {

    if($(this).text().length > navChars){
        $('#global-nav #nav li a').addClass('TEST1');

    }else if($(this).text().length > navChars + 3){
        $('#global-nav #nav li a').addClass('TEST2');
    }

});

如果没有“else”语句，TEST1 和 TEST2 类都将应用于锚标记。使用 else 语句，仅 TEST1 应用于锚标记。

我使用的原始 JS 和我基于上面的内容在单一条件下工作得很好，但现在我需要适应至少 2 个可能的字符长度。

我修改过的原始JS（破解）：

var navChars = 13;

$('#global-nav #nav li a').filter(function() {
    return $(this).text().length > navChars;
}).addClass('navMultiLine');

Answer 1

代替

<div id="#global-nav">

和

<div id="global-nav">

尝试：

$('#global-nav #nav li').each(function() {
    var len = $(this).find("a").text().length;    
    if(len > 7){
        $(this).find("a").addClass("TEST2");
    }
    else if(len > 4){
        $(this).find("a").addClass("TEST1");
    }
});

演示在这里。