Why jQuery function returns null?

Question

I have this form:

<form action="javascript:;" class="iceFrm" enctype="application/x-www-form-urlencoded" id="frmMainMenu" method="post" onsubmit="return false;">
.....
</form>

I do not understand why this script:

<script type="text/javascript">
$(document).ready(function () {
    $("#frmMainMenu").$("#menuPopupAP").$("#menuItem0").$("#out").css('padding','0 0 0 29px');
});
</script>

says:

$("#frmMainMenu") is null

in Firebug.

UPDATE: This is the html element (from the above form) I want to change the padding on:

<span id="frmMainMenu:menuPopupAP:menuItem0:out" class="iceOutTxt iceMnuItmLabel graMenuPopupMenuItemLabel">My Applications</span>

Update 2:

I've forgot to mention that this span is within a menu, so basically it's hidden normally and displayed only when hovering on some div... Does jQuery finds it even if it's not displayed?

Do you know why?

The result of $(...) does not have another property $(...). — pimvdb
– pimvdb, Commented Mar 23, 2011 at 16:40
$("#frmMainMenu").$("#menuPopupAP").$("#menuItem0").$("#out") is not correct. What exactly are you trying to do? — gen_Eric
– gen_Eric, Commented Mar 23, 2011 at 16:40
I've updated my post, maybe the way I try to find this elements is wrong... — Cristian Boariu
– Cristian Boariu, Commented Mar 23, 2011 at 16:41

Alnitak · Accepted Answer · 2011-03-23 16:46:28Z

2

I'm not sure exactly why you're getting the null error, but if your intent is to apply that style to those four specific elements the syntax should be:

$("#frmMainMenu, #menuPopupAP, #menuItem0, #out").css('padding','0 0 0 29px');

If (and I can't tell as we've been giving an insufficient markup sample) those four elements are successive nodes in a hierarchy (i.e. #out is a child of #menuItem is a child of #menuPopupAp is a child of #frmMainMnenu) then remove the commas between them.

EDIT colons in an id? That'll cause problems with jQuery selectors. Try using an underscore instead?

edited Mar 23, 2011 at 16:46

answered Mar 23, 2011 at 16:36

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

1 Comment

gen_Eric Over a year ago

IDs can contain colons, it's valid, but jQuery can't select IDs with colons like that, because the : is read as a selector. You need to do [id="value"] instead.

Community · Accepted Answer · 2017-05-23 09:58:38Z

1

Update after your question update:

$('#frmMainMenu\3AmenuPopupAP\3AmenuItem0\3Aout').css('padding','0 0 0 29px');

You cant use the : in your selector but you can use the hexadecimal equivalent - \3A

There are few other workarounds on this SO thread.

Are your trying to search the children of frmMainMenu? try this instead:

$(document).ready(function () {
            $("#frmMainMenu").find("#menuPopupAP")
                             .find("#menuItem0")
                             .find("#out")
                             .css('padding','0 0 0 29px');
});

edited May 23, 2017 at 9:58

CommunityBot

11 silver badge

answered Mar 23, 2011 at 16:35

Geoff Appleford

18.9k4 gold badges66 silver badges87 bronze badges

2 Comments

gen_Eric Over a year ago

$('#frmMainMenu:menuPopupAP:menuItem0:out') doesn't actually work, because jQuery uses the : as a selector.

Geoff Appleford Over a year ago

@Rocket - yes, I realised that. Thanks. Have update my answer.

gen_Eric · Accepted Answer · 2011-03-23 16:41:55Z

0

~~$('#frmMainMenu:menuPopupAP:menuItem0:out').css('padding','0 0 0 29px');~~

$('span[id="frmMainMenu:menuPopupAP:menuItem0:out"]').css('padding','0 0 0 29px');

You need to use the [id="value"] syntax, because in a jQuery selector the : can be used as a selector, so it doesn't realize that the IDs can contain them.

answered Mar 23, 2011 at 16:41

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

5 Comments

Cristian Boariu Over a year ago

Well, very strange it still gives me null...please note that the above id is taken from Firebogu so basically it's the composed id of all parent components...

gen_Eric Over a year ago

@Cristian: What do you mean by "composed id"?

Cristian Boariu Over a year ago

I mean that it takes the ids of all parents and shown the results with : between ids...

gen_Eric Over a year ago

@Cristian: I didn't know Firebug did that.

Cristian Boariu Over a year ago

Thanks! Your solution worked and I also needed to replace $ with jQuery.

Chris Dixon · Accepted Answer · 2011-03-23 16:36:08Z

0

It's not that - it's one of the children that is null. You need to change your script to something like this

<script type="text/javascript">
 $(document).ready(function () {
            $("#frmMainMenu #menuPopupAP #menuItem0 #out").css('padding','0 0 0 29px');
        });
        </script>

answered Mar 23, 2011 at 16:36

Chris Dixon

9,1777 gold badges38 silver badges69 bronze badges

Comments

silkcom · Accepted Answer · 2011-03-23 16:36:28Z

0

Surely you don't mean to use # each time (otherwise you could just use #out, but it sounds like it should be something like

$("#frmMainMenu .menuPopupAP .menuItem0 .out").css(...

answered Mar 23, 2011 at 16:36

silkcom

5021 gold badge6 silver badges14 bronze badges

Comments

Mohammed Swillam · Accepted Answer · 2011-03-23 16:38:22Z

0

Can you post what do you need to accomplish? from your selector, I think you are taking a hard selector approach to interact with your DOM.

answered Mar 23, 2011 at 16:38

Mohammed Swillam

9,2524 gold badges38 silver badges47 bronze badges

Collectives™ on Stack Overflow

Why jQuery function returns null?

6 Answers 6

1 Comment

2 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related