jquery append variable if variable is not empty

Question

I have several variables in my code :

var     titre = bloc_movie_parent.attr("titre"),
    director = bloc_movie_parent.attr("director"),
    prod = bloc_movie_parent.attr("prod"),
    agency = bloc_movie_parent.attr("agency");

using this variables i'm building a div using a for each function, and inside this div I have spans that should show but only if the variable exists.

here is my code :

        $(".bloc_movie[type='"+ type + "']").each(function(){

            var titre = $(this).attr("titre"),
            director = $(this).attr("director"),
            prod = $(this).attr("prod"),
            agency = $(this).attr("agency"),
            hash = $(this).children('a').attr("href");

            $(".caption_slideshow").append('<div class="bloc_movie"><div class="legende"><div class="titre_caption">'+ titre +'</div><div><span class="initial_director">D/ </span>'+ director +'</div><div><span class="initial_prod">P/ </span>'+ prod +'</div><div><span class="initial_agency">A/ </span>'+ agency +'</div></div></div>');});

it works fine.

but sometimes my variable is empty. And when the variable is empty, I want the span to be hidden. for example if "director" is empty, I want the "initial_director" span to be hidden. same for "prod" with "initial_prod" span & "agency" with "initial_agency".

I can't find a way of doing it inside the append function.

can anybody help me with this ?

which variable do you mean when "my variable is empty " ? and which span do you want to hide explain please — Fadi Abo Msalam
– Fadi Abo Msalam, Commented May 11, 2017 at 14:21
what about appending them one by one so that you can check them individually before each append — Matt
– Matt, Commented May 11, 2017 at 14:23
@FadiAboMsalam for example if "director" is empty, I want the "initial_director" span to be hidden. same for "prod" with "initial_prod" span & "agency" with "initial_agency". — mmdwc
– mmdwc, Commented May 11, 2017 at 14:26
@Matt I can't append them individually because my divs are built after an onclick function, they are not built on the document.ready function — mmdwc
– mmdwc, Commented May 11, 2017 at 14:28

Fadi Abo Msalam · Accepted Answer · 2017-05-11 14:50:06Z

1

first define css class called .display-none{ display:none;} then the main idea is

if(!director){$('.initial_director').addClass("display-none")}

one way of doing it like this adding always a class of display-none concatinated with the value of you variable like this "display-none"+director here we have two cases the first is empty then the result is display-none which will hide your div the second case will have a value so the result would be display-nonevalue which doesn't add any styles

<div><span class="initial_prod display-none"+prod+"\"">P/ </span>'+ prod +'</div>

edited May 11, 2017 at 14:50

answered May 11, 2017 at 14:38

Fadi Abo Msalam

7,2952 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mmdwc Over a year ago

it's not working as its not looping my for each function. If one of my agency var is empty, then all the span are getting the "disply-none" class

mmdwc Over a year ago

nice trick ! I had to adapt the code a bit but it works like a charm now ! thanks a lot

Fadi Abo Msalam Over a year ago

@mmdwc my pleasure :)

Collectives™ on Stack Overflow

jquery append variable if variable is not empty

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related