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

【问题标题】：If/else conditional based on character count jQuery基于字符数jQuery的if/else条件
【发布时间】：2013-12-19 03:37:45
【问题描述】：

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

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

HTML

<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');

【问题讨论】：

jsfiddle.net/2mg3q/9 看看这个小提琴
@dan 您希望 TEST1 应用于长度大于 4 或同时应用于 4 和 (4+3) 的 a？
如果长度大于5应用TEST1，如果大于7只应用class TEST2

标签： javascript jquery if-statement conditional

【解决方案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");
    }
});

DEMO here.

【讨论】：

对不起，我应该更清楚我的问题的细节。如上所述：如果长度大于5应用TEST1，如果大于7只应用类TEST2
@Hiral - 非常感谢，效果很好！漂亮干净的解决方案！

【解决方案2】：

id不应以#开头

<div id="global-nav">

然后

$('#global-nav #nav li a').each(function () {
    var $this = $(this),
        length = $.trim($this.text()).length;
    if (length > navChars + 3) {
        $this.addClass('TEST2');
    } else if (length > navChars) {
        $this.addClass('TEST1');
    }
});

演示：Fiddle

【讨论】：

嗨@Arun，感谢您的回答。不过，我对您的开场白有点困惑-您说 ID 不应该以 # 开头，但是在您的回答中您使用了“#”
@Dan ID 在 HTML (<div id="global-nav">)。 jQuery 选择器是另一回事。
@Dan 在 id 选择器中，在您的小提琴中，div 元素 id 属性值以 # 开头
@Dan 您是否检查了附加的小提琴...。您还可以澄清对附加类的需要，即如果长度为 8，那么是否需要同时应用 test1 和 test2 类
哦，我明白了 - 哈哈 - 不知道我是怎么错过的（漫长的一天！）。感谢您的提醒。效果非常好，但我确实注意到这两个类都添加到 else 条件影响的锚标记中：screencast.com/t/yLi7P4p0e 有没有办法只应用一个类？

【解决方案3】：

当条件是第一 - 如果 > 4 第二 - 如果 > 7 然后第二个永远不会被击中.. 您应该将顺序更改为：第一 - 如果 > 7 第二 - 如果 > 4

【讨论】：

@ArunPJohny 这不太可能。两个类都只改变边框颜色，所以没有理由同时拥有它们。
@Juhana 来自 OP 的 cmets，这是所需的
@ArunPJohny “没有“else”语句，TEST1 和 TEST2 类都被应用了” 听起来他不想发生。
这是 100% 正确的@Juhana。对不起，如果我不清楚。感谢大家的大力支持 - 有很多很棒的答案和解决方案！

【解决方案4】：

var navChars = 4;

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

//bigger than 4 but smaller than 7
if($(this).text().length > navChars && $(this).text().length < 7){
    $('#global-nav #nav li a').addClass('TEST1');

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

});

【讨论】：

【解决方案5】：

$('#global-nav #nav li a').addClass('TEST1'); 行将 TEST1 类添加到 #global-nav 内 #nav 内 li 内的 ALL 链接。为了只将类应用于当前元素，您应该使用 $(this).addClass('TEST1')。此外，您应该使用 .each() 而不是 .filter() 来迭代元素。

另外，@Arun 指的是 HTML 中的 id，而不是 javascript。

【讨论】：

【解决方案6】：

这是一个每个循环的解决方案。您在 HTML 中使用 #global-nav 而不是 id="gobal-nav"

可能打错了

小提琴可以在http://jsfiddle.net/3DU9t/找到

var navChars = 4;

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

    if($(this).html().length > navChars + 3){

        $(this).addClass('TEST2');

    } else {

        if($(this).html().length > navChars){
            $(this).addClass('TEST1');

        }

    }

});

【讨论】：

非常感谢您的回答@osi - 效果非常好。我希望我可以将有效的解决方案标记为正确！再次感谢！
没问题，帮助某人比获得标记解决方案所获得的积分更有价值。

【解决方案7】：

单行过滤器不起作用，因为它只会将类应用于那些条件为真的对象。

另外，注意条件的顺序，这里很关键！（最长的优先！）

试试这个：

$('#global-nav #nav li a').each(function() {
    // save this jQuery-obj & it's length, for better performance!
    var $obj = $(this);
    var charLen = $obj.text().length;
    // mind the order of conditions! longest lengths first!
    if (charLen > navChars + X) {
        $obj.addClass('TestX');
    }
    else if (charLen > navChars + 3) {
        $obj.addClass('Test2');
    }
    else if (charLen > navChars) {
        $obj.addClass('Test1');
    }
});

【讨论】：

我希望将类添加到条件适用的所有项目中。因此，所有字符数大于 5 的标签都应该获得 TEST1 并且所有字符数大于 7 的标签项都应该获得 TEST2 的类（仅 - 不是两个类）
我明白了，我在一个分支中忘记了“else”（通过 misakte）。解决了这个问题。除此之外，它做你想做的事。只应用一个类，对吗？永远不会超过一个。你看，条件的顺序在这里很重要！

【解决方案8】：

删除 else 语句并删除第二个条件的 Test1 类。

var navChars = 4;

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

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

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

});

【讨论】：

【解决方案9】：

试试这个：

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 > Number(navChars + 3)){
        $('#global-nav #nav li a').addClass('TEST2');
    }

});

【讨论】：