Question

我正在尝试创建一个jQuery函数来计算每个锚标记的字符长度＆amp;如果字符数大于“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＆amp; TEST2类正在应用于锚标签。使用else语句，只有TEST1应用于锚标记。

我使用的原始JS＆amp;我基于上述内容对于一个单一的条件非常有效但现在我需要适应至少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");
    }
});

DEMO here.

Answer 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

Answer 3

当条件是首先 - 如果＆gt; 4 第二 - 如果＆gt; 7 然后第二个从未被击中.. 您应该将订单更改为：首先 - 如果＆gt; 7 SECOND -if＆gt; 4

Answer 4

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

另外，请注意条件的顺序，这在这里至关重要！（最长的长度！）

试试这个：

$('#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');
    }
});

Answer 5

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

});

Answer 6

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

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

Answer 7

这是每个循环的解决方案。您在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');

        }

    }

});

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

});

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

});

if / else条件基于字符数jQuery

9 个答案: