Define a javascript variable under conditions with jquery

Question

Like the title says, I would like to fill a variable up under some conditions

I thought I could do like that but no :

var content = $(function() {
    if ($('#content').length) {
        return  $('#content');
    }

    if ($('#content_no_decoration').length) {
        return  $('#contenu_no_decoration');
    }

    if ($('#full_content').length) {
        return  $('#full_content');
    }

    if ($('#full_content_no_decoration').length) {
        return  $('#full_content_no_decoration');
    }
});

So I thought that the javascript variable 'content' would be one of the jquery object representing an element in the dom. But it seems that 'content' is the function.

I guess you imagine what i want to do.. What is the syntax with JQuery ?

Thank you

jQuery doesn't introduce new syntax. It's just JavaScript. — Pointy
– Pointy, Commented Dec 20, 2013 at 15:17

BenM · Accepted Answer · 2013-12-20 15:24:17Z

3

$(function() { }) is short-code for the DOMReady event. You need to explicitly define a function, and then assign the return value to your variable.

For example:

function getObj() 
{
    if($('#content').length) 
    {
        return  $('#content');
    }

    if($('#content_no_decoration').length) 
    {
        return  $('#contenu_no_decoration');
    }

    if($('#full_content').length) 
    {
        return  $('#full_content');
    }

    if($('#full_content_no_decoration').length) 
    {
        return  $('#full_content_no_decoration');
    }
}

You can then assign the value as :

var content = getObj();

You will need to call the assignment when the DOM is ready though, otherwise the selectors will not trigger as expected. For example:

$(function() {  
    var content = getObj();
});

edited Dec 20, 2013 at 15:24

answered Dec 20, 2013 at 15:16

BenM

53.3k26 gold badges116 silver badges172 bronze badges

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

2 Comments

jbabey Over a year ago

I think OP wants to wait until the DOM is ready to do this, otherwise these jQuery selectors will all come back as empty (assuming the script is at the top of his page).

BenM Over a year ago

He only needs to add the assignment inside $(function() { });. Anyway, updated with this instruction, thanks.

KooiInc · Accepted Answer · 2013-12-20 16:00:27Z

1

You are only declaring the function, so content contains a pointer to the function.

Execute it and you are fine:

var content = function() {
    if ($('#content').length) {
        return  $('#content');
    }

    if ($('#content_no_decoration').length) {
        return  $('#contenu_no_decoration');
    }

    if ($('#full_content').length) {
        return  $('#full_content');
    }

    if ($('#full_content_no_decoration').length) {
        return  $('#full_content_no_decoration');
    }
}();

But you don't really need a function here. If the script tag is at the bottom of the page (right before the closing </body>-tag), or the assignment is within a load handler you could use:

var content = $('#content').length 
               ? $('#content') 
               : $('#content_no_decoration').length 
                 ? $('#content_no_decoration')
                 : $('#full_content').length 
                   ? $('#full_content')
                   : $('#full_content_no_decoration').length 
                     ? $('#full_content_no_decoration')
                     : undefined;

Or use jQuery to your advantage and keep things really short:

var content = 
  $('#content,#content_no_decoration,#full_content,#full_content_no_decoration')
   .get(0);
// if none of the elements exist, content will be undefined, otherwise
// it will contain [a JQuery Object of] the first existing element

edited Dec 20, 2013 at 16:00

answered Dec 20, 2013 at 15:16

KooiInc

124k32 gold badges145 silver badges181 bronze badges

3 Comments

jbabey Over a year ago

I think OP wants to wait until the DOM is ready to do this, otherwise these jQuery selectors will all come back as empty (assuming the script is at the top of his page).

mlwacosmos Over a year ago

second part : it is great thank you.. exactly what i was looking for

KooiInc Over a year ago

Hi @mlwacosmos, glad I could help. I added a shorter assignment to my answer.

kevpoccs · Accepted Answer · 2013-12-20 15:16:13Z

1

why you don't do like that ?

function thatsAGoodName() {
    if ($('#content').length) {
        return  $('#content');
    }

    if ($('#content_no_decoration').length) {
        return  $('#contenu_no_decoration');
    }

    if ($('#full_content').length) {
        return  $('#full_content');
    }

    if ($('#full_content_no_decoration').length) {
        return  $('#full_content_no_decoration');
    }
}
var content = thatsAGoodName();

answered Dec 20, 2013 at 15:16

kevpoccs

6355 silver badges8 bronze badges

Comments

Captain John · Accepted Answer · 2013-12-20 15:16:33Z

1

The function

$(function() {
    // DOM safe to use do stuff
})

Is shorthand for the document ready event. This tells you the coder that the dom is safe to use.

You would not really return anything from this event.

answered Dec 20, 2013 at 15:16

Captain John

2,0112 gold badges19 silver badges34 bronze badges

Comments

Julio · Accepted Answer · 2013-12-20 15:16:20Z

0

content is an object because you're setting it to a object here:

var content = $(function() {

What you probably intended was:

var content;

if ($('#content').length) {
    content = $('#content');
}

if ($('#content_no_decoration').length) {
    content = $('#contenu_no_decoration'); // Is #contenu a typo???
}

if ($('#full_content').length) {
    content = $('#full_content');
}

if ($('#full_content_no_decoration').length) {
    content = $('#full_content_no_decoration');
}

Note, that this will have a reference to an element now. If you want the actual content you'll need to pull it out with something like html() or val().

answered Dec 20, 2013 at 15:16

Julio

2,3004 gold badges30 silver badges59 bronze badges

1 Comment

BenM Over a year ago

Actually, content isn't a function. It's a jQuery object.

Nick Tomlin · Accepted Answer · 2013-12-20 15:17:45Z

0

You are using the shorthand for the jQuery ready event ($(function() {. What I believe you want is a self invoking function:

// remove the call to jQuery 
var content = (function() {
   if ($('#content').length) {
        return  $('#content');
    }
   // ... more
})(); // invoke the function, which should return a jQuery object

You may need to wrap this in a document.ready, depending on where your script is executed.

answered Dec 20, 2013 at 15:17

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

Comments

jbabey · Accepted Answer · 2013-12-20 15:22:45Z

Rearrange it a little bit and it should work:

$(function () {
    var content = (function() {
        var regularContent = $('#content');
        if (regularContent.length !== 0) {
            return regularContent;
        }

        var contentNoDecoration = $('#content_no_decoration');
        if (contentNoDecoration.length !== 0) {
            return contentNoDecoration;
        }

        var fullContent = $('#full_content');
        if (fullContent.length !== 0) {
            return fullContent;
        }

        var fullContentNoDecoration = $('#full_content_no_decoration');
        if (fullContentNoDecoration.length !== 0) {
            return fullContentNoDecoration;
        }
    }());
});

This code is basically saying once the DOM is ready (the $(function () { ... }); part), run this anonymous function (the (function () { ... }()); part) and assign its return value to content.

Edit: Also, you're losing efficiency by running each of your selectors twice instead of just once.

pstenstrm · Accepted Answer · 2013-12-20 15:33:15Z

-1

It's true that content is the function, but you can use that function. Like:

var result = content();

Edit:

Remove the $() around var content = $({/* code */}) and it works.

edited Dec 20, 2013 at 15:33

answered Dec 20, 2013 at 15:17

pstenstrm

6,5195 gold badges45 silver badges63 bronze badges

2 Comments

mlwacosmos Over a year ago

Obviously, with or without the $, I cannot do that

pstenstrm Over a year ago

Without $() you can. I was wrong with about that it works with.

Collectives™ on Stack Overflow

Define a javascript variable under conditions with jquery

8 Answers 8

2 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Edit:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Edit:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related