jQuery - 使用类".container"获取div中的所有div

Question

场景:

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

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

现在我需要找到所有div,其中css #ID是div 中的第一级DOM元素.container.这些元素应该附加到"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>

题:

• 我如何找到#ID带有jQuery 的(未定义/未知)的第一级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-link的onclick事件.我的问题是,我想为div 下面的foreach每一个调用函数,只是不知道如何与javascript和php正确交互.div[id].container

?>
<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

Answer 1

已知身份证

$(".container > #first");

要么

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

或者因为ID在单个文档中应该是唯一的:

$("#first");

最后一个当然是最快的.

身份不明

既然你说你不知道他们的ID顶部选择器(在哪里#first写),可以改为:

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

最后一个(前三个选择器中)只使用ID当然不可能以这种方式进行更改.

如果您还需要过滤掉那些DIV定义ID属性的子元素,则可以通过以下方式编写选择器:

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

附加点击处理程序

添加以下代码以将click处理程序附加到您的任何首选选择器:

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

CSS3选择器规范

我还想指出jQuery使用的CSS3选择器规范.它将在未来帮助你很多,因为可能会有一些你根本不知道的选择器,可以让你的生活更轻松.

编辑后的问题

即使你写了一些伪代码,我也不确定我知道你在追求什么......无论如何.有些部分仍然可以回答:

$(".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用法可以组合成一个链式的:

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

关于DOM元素

您始终可以从jQuery结果集中获取底层DOM元素.

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

将从jQuery结果集中获取第一个DOM元素.jQuery结果总是一组元素,即使它们中没有或只有一个.

但是当我使用.each()函数并提供将在集合中的每个元素上调用的匿名函数时,this关键字实际上是指DOM元素.

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

我希望这能为你清除一些东西.