Question

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="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>

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.

Answer 1

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.