Why jQuery function returns null?

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?

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?

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');
});

$('#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.

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>

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(...

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.