JQuery sibling shorthand

I am trying to detect an elements direct sibling using a short hand notation which开发者_开发技巧 I thought worked. The following is my code:

$menuContainer = $('<div></div>').attr('id', 'menuContainer').attr('class', 'menu-container'); //.hide();
$menuContainerInner = $('<div></div>').attr('class', 'container-inner');
$menuContainer.append($menuContainerInner);
$menuContainer.insertAfter($('div#block-views-Menu-block_1'));
$($menuContainer + ' > div.container-inner').css('background', 'red');

In the above code I dynamically create 2 div and assign them to variables for latter reference. I embed the second div in the first.

So, using $($menuContainer + ' > div.container-inner').css('background', 'red'); I am trying to find and change the inner-div's background color without using the normal div-id's path.

Isn't there some notation that does this or am I mistaken??

$menuContainer is an object, which you're going to implicitly call toString on, which probably isn't what you want.

I'd use children instead:

$menuContainer.children('div.container-inner').css('background', 'red');

But if you like this (passing the object separately as the root) also works:

$('> div.container-inner', $menuContainer).css('background', 'red');

Gratuitous live example

"$menuContainer" seems to be a jquery object, not a string, I believe what you want is:

$menuContainer.children('.container-inner');

Try using the context of the selector:

$('div.container-inner', $menuContainer).css('background', 'red');