情境:
我有一个包含链接的菜单:
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>
问题:
#ID
的第一级div?提前致谢!
编辑#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事件。我的问题是,我想为foreach
div下方的每个div[id]
调用函数.container
,并且根本不知道如何正确地与javascript和amp; 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
答案 0 :(得分:64)
$(".container > #first");
或
$(".container").children("#first");
或者因为ID在单个文档中应该是唯一的:
$("#first");
最后一个当然是最快的。
既然你说你不知道他们的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
});
我还想指出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
用法可以合并为一个链式:
context.text(...).attr(...).click(...);
您始终可以从jQuery结果集中获取底层DOM元素。
$(...).get(0)
// or
$(...)[0]
将从jQuery结果集中获取第一个DOM元素。 jQuery结果总是一组元素,即使它们中没有或只有一个。
但是当我使用.each()
函数并提供将在集合中的每个元素上调用的匿名函数时,this
关键字实际上是指DOM元素。
$(...).each(function(){
var DOMelement = this;
var jQueryElement = $(this);
...
});
我希望这能为你清除一些事情。
答案 1 :(得分:2)
要获取“容器”下的所有div,请使用以下命令:
$(".container>div") //or
$(".container").children("div");
您可以规定特定的#id
代替div
来获取特定的$(".container>div[id=]")
。
你说你想要一个带有'undefined'id的div。如果我理解你的话,以下就可以做到这一点:
{{1}}
答案 2 :(得分:1)
要在.container元素中立即单击div时设置类,可以使用:
<script>
$('.container>div').click(function () {
$(this).addClass('whatever')
});
</script>
答案 3 :(得分:0)
来自http://api.jquery.com/jQuery/
选择器上下文 默认情况下,选择器在从文档根开始的DOM内执行搜索。但是,通过使用$()函数的可选第二个参数,可以为搜索提供备用上下文。例如,要在事件处理程序中进行搜索,可以限制搜索:
$( "div.foo" ).click(function() {
$( "span", this ).addClass( "bar" );
});
当搜索范围选择器仅限于此上下文时,只有单击元素中的跨度才会获得附加类。
因此,对于您的示例,我建议使用以下内容:
$("div", ".container").each(function(){
//do whatever
});