CODEWITHSUNDEEP
jqueryeachconditional-statements
kramden88
kramden88

Reputation: 25369

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

Upvotes: 0

Views: 2911

Answers (4)

Alnitak
Alnitak

Reputation: 339786

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.

Upvotes: 1

fanfavorite
fanfavorite

Reputation: 5199

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.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

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

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12302

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

    });
});

Upvotes: 1

Related Questions