jQuery -获取类为“.container”的div中的所有div

np8igboo 于 2022-12-22 发布在 jQuery

关注(0)|答案(4)|浏览(199)

- 方案：**

我得到了一个包含链接的菜单：

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元素。显示网格"并通过单击它添加类。

<!-- 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-link的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

jquery

来源：https://stackoverflow.com/questions/5977699/jquery-get-all-divs-inside-a-div-with-class-container

4条答案

按热度按时间

7hiiyaii1#

已知ID

$(".container > #first");

或

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

或者由于ID在单个文档中应该是唯一的：

$("#first");

最后一个当然是最快的

未知ID

既然你说你不知道它们的ID，那么上选择器的前两个（写为#first）可以改为：

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

最后一个（前三个选择器中的）只使用ID，当然不可能以这种方式更改。
如果你还需要过滤掉那些定义ID属性的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
});

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

我希望这能为你澄清一些事情。

赞(0）回复(0）举报 2022-12-22

nnvyjq4y2#

要获取“container”下的所有div，请使用以下命令：

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

您可以规定一个特定的#id而不是div来获得一个特定的#id。
你说你想要一个带有'undefined' id的div。如果我没理解错的话，下面的代码可以实现这一点：

$(".container>div[id=]")

赞(0）回复(0）举报 2022-12-22

yquaqz183#

要在单击.container元素中的div时设置类，可以用途：

<script>
$('.container>div').click(function () {
        $(this).addClass('whatever')
    });
</script>

赞(0）回复(0）举报 2022-12-22

vql8enpb4#

从http://api.jquery.com/jQuery/开始
选择器上下文默认情况下，选择器从文档根目录开始在DOM中执行搜索。但是，通过使用$（）函数的可选第二个参数，可以为搜索提供替代上下文。例如，要在事件处理程序中执行搜索，可以如下限制搜索：

$( "div.foo" ).click(function() { 
   $( "span", this ).addClass( "bar" );
});

当范围选择器的搜索被限制在这个的上下文中时，只有被单击的元素中的范围将获得额外的类。
因此，对于您的示例，我建议如下：

$("div", ".container").each(function(){
     //do whatever
 });

赞(0）回复(0）举报 2022-12-22

我来回答

jQuery -获取类为“.container”的div中的所有div

4条答案

已知ID

未知ID

附加点击处理程序

CSS3选择器规格

编辑完问题后

关于DOM元素

相关问题

热门标签

最新问答