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">✔</span>','<span class="showgridparts-off">×</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");
或者因为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 selector specification。它将来可以帮助您，因为可能有一些您根本不了解的选择器，可以让您的生活更加轻松。
编辑后的问题
即使你写了一些伪代码，我还没有完全确定我知道你在做什么…反正。一些零件仍然可以回答：
$(".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(...);
关于DOM元素
您可以随时从jQuery结果集中获取底层DOM元素。
$(...).get(0) // or $(...)[0]
将会从jQuery结果集中获取第一个DOM元素。 jQuery结果始终是一组元素，即使它们中没有，也只有一个。
但是当我使用.each()函数并提供了一个匿名函数，它将在集合中的每个元素上被调用，这个关键字实际上是指DOM元素。
$(...).each(function(){
var DOMelement = this;
var jQueryElement = $(this);
...
});
我希望这可以为你清除一些东西。
