Question

我有这个JQuery函数：

$(document).ready(function() {
    $("div.descript_long").each(function() { 
        var descript_length = $("div.descript_long").text().length;

        if(descript_length < 160)
        $(this).next().("a.toggle_more").attr('style','display:none');
    else
        $(this).next().("a.toggle_more").removeAttr("style");

    });
});

此页面包含多个带有descript_long类的div。我希望这个函数能够遍历每个函数，如果div中文本的长度小于160，我希望通过将样式设置为display：none来隐藏类toggle_more的下一个。否则我不希望发生任何事情。

这是一个示例div（其中有几个）：

<div class="descript_short" dir="">
test
<a class="toggle_more" href="#">show more</a>
</div>
<div class="descript_long" dir="" style="display:none">
test
<a class="toggle_less" href="#">show less</a>
</div>

所以我的问题是它没有做任何事情。我希望这是一个语法错误。但也许我写错了函数，并没有表达我真正希望它做的事情。另外一组眼睛检查这一点将非常感激。

Answer 1

我认为你的代码实际上并没有寻找下一个元素，因为a元素在找到的div中，你可以使用.find()来实现这个目的。然后，您应该使用.hide()和.show()而不是直接自己应用该样式，或者甚至更好地添加和删除您定义的css类，这将为该元素设置display:none。

$(document).ready(function() {
    $("div.descript_long").each(function() { 
        var descript_length = $("div.descript_long").text().length;

        if(descript_length < 160)
        $(this).find("a.toggle_more").hide();
    else
        $(this).find("a.toggle_more").show();

    });
});

Answer 2

您的.next()来电已被破坏。这是为了测试兄弟节点，而不是测试子节点。

尝试：

$(document).ready(function() {
    $("div.descript_long").each(function() { 
       var descript_length = $(this).text().length;

        if(descript_length < 160) {
            $(this).find("a.toggle_more").first().hide();
        } else {
            $(this).find("a.toggle_more").first().show();
        }
    });
});

编辑最初有.nextAll()而不是find，因为我误读了OP的标记。

Answer 3

尝试对文本使用“this”并使用find。

$(document).ready(function() {     
    $("div.descript_long").each(function() {          
        var descript_length = $(this).text().length;
        if(descript_length < 160)         
           $(this).next().find("a.toggle_more").attr('style','display:none');     
        else         
           $(this).next().find("a.toggle_more").removeAttr("style");     
    }); 
});

已编辑添加查找。

Answer 4

试试这个

$(document).ready(function() {
    $("div.descript_long").each(function() { 
       $(this).nextAll("a.toggle_more").css({display: ($(this).text().length < 160)?"none":"block"});
    });
});

每个JQuery条件

4 个答案: