jQuery - 将div中的所有div与class“.container” [英] jQuery - get all divs inside a div with class ".container"
问题描述
场景
我有一个包含链接的菜单：
I got a menu containing links:
Main Menu Item
--------------
Sub: Show Grid > SubSub: <a>Show #first</a>
<a>Show #second</a>
<a>Show #third</a>
现在我需要找到所有带有CSS的divs #ID 谁是 .container div之内的第一级DOM元素。这些元素应该附加到Sub：Show Grid，并通过点击添加一个类。
Now i need to find all divs with an css #ID who are first level DOM elements inside the .container div. These elements should get appended to "Sub: Show Grid" and add a class via a click on it.
<!-- 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菜单吗？
- How would i find the first level div with an (undefined/not known)
#IDwith jQuery? - How can i interact with the result in php - will I get an array as result to build the SubSub menu out of it?
提前感谢
编辑＃1
更清楚我想要做什么 - 在伪代码中：
To make it more clear what I'm trying to do - In pseudo code:
$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事件。我的问题是，我想为 foreach > .container div，根本不知道如何与javascript& php。
The "real world" example. The output is an onclick event for an a-link. My problem is that i want to call the function foreach for every div[id] below the .container div and simply don't know how to interact properly with 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
推荐答案
/ h2>
Known ID
$(".container > #first");
或
$(".container").children("#first");
或由于ID在单个文档中应该是唯一的：
or since IDs should be unique within a single document:
$("#first");
最后一个当然是最快的。
既然你说你不知道他们的ID顶级选择器（其中 #first 被写入），可以更改为：
Since you're saying that you don't know their ID top couple of the upper selectors (where #first is written), can be changed to:
$(".container > div");
$(".container").children("div");
只使用ID的最后一个（前三个选择器）当然不可能
The last one (of the first three selectors) that only uses ID is of course not possible to be changed in this way.
如果您还需要过滤出定义ID属性的那些 DIV 元素'以这种方式写入选择器：
If you also need to filter out only those child DIV elements that define ID attribute you'd write selectors down this way:
$(".container > div[id]");
$(".container").children("div[id]");
附加点击处理程序
添加以下内容将点击处理程序附加到任何首选选择器的代码：
Attach click handler
Add the following code to attach click handler to any of your preferred selector:
// 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选择器规范。这将有助于您，因为您可能会选择一些您根本不了解的选择器，并且可以让您的生活变得更加简单。
CSS3 Selectors specification
I would also like to point you to CSS3 selector specification that jQuery uses. It will help you lots in the future because there may be some selectors you're not aware of at all and could make your life much much easier.
我不完全确定，即使你已经写了一些伪代码，我也知道你在后面。一些部分仍然可以回答：
I'm not completey sure that I know what you're after even though you've written some pseudo code... Anyway. Some parts can still be answered:
$(".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");
})
});
最后一个上下文用法可以组合进入一个链接的一个：
the last thee context usages could be combined into a single chained one:
context.text(...).attr(...).click(...);
关于DOM元素
从jQuery结果集中获取底层DOM元素。
Regarding DOM elements
You can always get the underlaying DOM element from the jQuery result set.
$(...).get(0)
// or
$(...)[0]
将获得第一个来自jQuery结果集的DOM元素。 jQuery结果始终是一组元素，即使它们中没有一个也可以只有一个元素。
will get you the first DOM element from the jQuery result set. jQuery result is always a set of elements even though there's none in them or only one.
但是当我使用 .each（）函数，并提供一个匿名函数，将在集合中的每个元素上调用，这个关键字实际上是指DOM元素。
But when I used .each() function and provided an anonymous function that will be called on each element in the set, this keyword actually refers to the DOM element.
$(...).each(function(){
var DOMelement = this;
var jQueryElement = $(this);
...
});
我希望这可以清除一些东西。
I hope this clears some things for your.
这篇关于jQuery - 将div中的所有div与class“.container”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
