jQuery – 将div中的所有div与class“.container”

情况：

我有一个包含链接的菜单：

@H_671_4@main Menu Item -------------- Sub: Show Grid > SubSub: <a>Show #first</a> <a>Show #second</a> <a>Show #third</a>

现在我需要找到一个css #ID的所有div，它们是.container div中的第一级DOM元素。这些元素应该附加到“Sub：Show Grid”，并通过点击添加一个类。

<!-- The mark up -->
<div class="container">
    <div id="first">1st</div>
    <div id="second">2nd</div>
    <div id="third">3rd</div>
</div>

题：

>我将如何使用jQuery找到具有(未定义/未知)#ID的第一级div？
>我如何与PHP中的结果进行交互 – 我会得到一个数组作为结果来构建SubSub菜单吗？

提前致谢！

编辑#1

使其更清楚我正在尝试做什么 – 在伪代码中：

$divs_received_from_jquery_fn = 'how do I get the divs (IDs?) as array(?) and interact with them in the following code?';
foreach ( $divs_received_from_jquery_fn as $div )
{
    add_menu_item( array( 
         'parent' => 'Sub: Show Grid','name'   => 'Show #'.$div,'href'   => '','Meta'   => array( 
                        'onclick' => 'jQuery(".container #".$div).toggleClass("showgrid");'
         ) 
    ) );
}

编辑#2

“现实世界”的例子。输出是a链接的onclick事件。我的问题是，我想为.container div下的每个div [id]调用函数foreach，只是不知道如何使用javascript& PHP

?>
<script type="text/javascript">
    jQuery(".container > div[id]").each(function(){
        var context = $(this);
        <?PHP 
        // SHOWGRID - parts
        // @since v0.3
        $wp_admin_bar->add_menu( // trigger the function via the global $wp_admin_bar var that calls the class
            array(
                 'parent'   => 'showgrid' // parent menu item,'id'       => 'showgrid - ' + this.id // menu item ID,'title'    => sprintf( // menu item label
                     __( '%1$s show grid parts %2$s%3$s',OXO_TEXTDOMAIN ),'<span style="BACkground: none;">','<span class="showgridparts-on hide">&#x2714;</span>','<span class="showgridparts-off">&times;</span>' 
                 ),'href'     => '' // stays empty to not trigger anything,'Meta'     => array( // HERE GOES THE ACTUAL jQuery FUNCTION
                    'onclick'   => 'jQuery("#" + this.id).toggleClass("showgrid"); jQuery(".showgridparts-on").toggleClass("hide"); jQuery(".showgridparts-off").toggleClass("hide"); return false;'
                 )
            ) 
        );
        ?>
    });
</script>
<?PHP

$(".container > #first");

$(".container").children("#first");

$("#first");

$(".container > div");
$(".container").children("div");

$(".container > div[id]");
$(".container").children("div[id]");

// use SELEctor of your choice and call 'click' on it
$(".container > div").click(function(){
    // if you need element's ID
    var divID = this.id;
    cache your element if you intend to use it multiple times
    var clickedDiv = $(this);
    // add CSS class to it
    clickedDiv.addClass("add-some-class");
    // do other stuff that needs to be done
});

$(".container > div[id]").each(function(){
    var context = $(this);
    // get menu parent element: Sub: Show Grid
    // maybe I'm not appending to the correct element here but you should kNow
    context.appendTo(context.parent().parent());
    context.text("Show #" + this.id);
    context.attr("href","");
    context.click(function(evt){
        evt.preventDefault();
        $(this).toggleClass("showgrid");
    })
});

context.text(...).attr(...).click(...);

$(...).get(0)
// or
$(...)[0]

$(...).each(function(){
    var DOMelement = this;
    var jQueryElement = $(this);
    ...
});