JQuery Conditional For Each

I have this JQuery function:

$(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");

    });
});

This page has multiple divs with the class descript_long. I want this function to go through each one and for each, if the length of the text in the div is less than 160, I want the next a with class toggle_more to be hidden by setting the style to display:none. Otherwise I don't want anything to happen.

This is a sample div (of which there are several):

<div class="descript_short" dir="">
test
<a class="togg开发者_StackOverflow中文版le_more" href="#">show more</a>
</div>
<div class="descript_long" dir="" style="display:none">
test
<a class="toggle_less" href="#">show less</a>
</div>

So my problem is that it's just not doing anything. I'm hoping it's a syntax error. But maybe I've written the function wrong and it's not expressing what I actually want it to do. Another set of eyes checking this would be greatly appreciated.

Your .next() call is broken. That's for testing siblings, not child nodes.

Try:

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

EDIT originally had .nextAll() instead of find as I had misread the OP's markup.

I think your code is not actually looking for the next a element, since the a elements are inside the found divs, you can use .find() for that purpose. Then you should use .hide() and .show() instead of directly applying the style yourself, or even better adding and removing a css class you defined which will set display:none to the element.

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

    });
});

Try this

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

Try using "this" for the text and use 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");     
    }); 
});

EDITED TO ADD FIND.