jQuery – 使用类“.container”获取div中的所有div
场景：
我有一个包含链接的菜单：
Main Menu Item -------------- Sub: Show Grid > SubSub: Show #first Show #second Show #third 现在我需要找到所有带有css #ID div，它们是.container div中的第一级DOM元素。 这些元素应该附加到“Sub：Show Grid”并通过单击添加一个类。
1st 2nd 3rd
题：
- 我如何找到带有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正确交互。
?> jQuery(".container > div[id]").each(function(){ var context = $(this); 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 ) ,'' ,'' ,'×' ) ,'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;' ) ) ); ?> }); <?php
已知身份证
$(".container > #first");
要么
$(".container").children("#first");
或者因为ID在单个文档中应该是唯一的：
$("#first");
最后一个当然是最快的。
身份不明
既然你说你不知道他们的ID顶部选择器的顶部（编写#first ），可以改为：
$(".container > div"); $(".container").children("div");
最后一个（前三个选择器中）只使用ID当然不可能以这种方式进行更改。
如果您还需要过滤掉那些定义ID属性的子DIV元素，那么您可以通过以下方式编写选择器：
$(".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); ... });
我希望这能为你清除一些东西。
要获取“容器”下的所有div，请使用以下命令：
$(".container>div") //or $(".container").children("div");
您可以规定特定的#id而不是div来获取特定的。
你说你想要一个带有’undefined’id的div。 如果我理解你，以下将实现这一点：
$(".container>div[id=]")
要在.container元素中单击div时设置类，可以使用：
来自http://api.jquery.com/jQuery/
选择器上下文默认情况下，选择器在DOM中从文档根开始执行搜索。 但是，通过使用$（）函数的可选第二个参数，可以为搜索提供备用上下文。 例如，要在事件处理程序中进行搜索，可以像下面这样限制搜索：
$( "div.foo" ).click(function() { $( "span", this ).addClass( "bar" ); });
当搜索范围选择器仅限于此上下文时，只有单击元素中的跨度才会获得其他类。
所以对于你的例子我建议如下：
$("div", ".container").each(function(){ //do whatever });