jQuery - 如何选择父元素的子元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10339124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - How to select child elements of parent?
提问by Zach Nicodemous
Sorry if the title is not accurate - I couldn't figure out how to word it.
对不起，如果标题不准确 - 我不知道如何措辞。
I have multiple widgets with the same class <div class="widget"></div>- each widget has a title, and content, structured like this:
我有多个具有相同类的小部件<div class="widget"></div>- 每个小部件都有一个标题和内容，结构如下：
<div class="widget">
<div class="widget-title">Title</div>
<div class="widget-content">Content Here</div>
</div>
The "widget-content" is hidden, and when you click on the widget-title, the content appears, and a class is applied to the widget-title, changing it to "widget-title open". This part works find, and the widget-content opens too.
“widget-content”是隐藏的，当你点击widget-title时，内容就会出现，并且一个类被应用到widget-title上，将其更改为“widget-title open”。这部分可以找到，并且小部件内容也会打开。
The problem is, its opening the widget content on ALL widgets. It should only open the widget-content in the specific widget where the title was clicked, not ALL of them. I am not sure what the proper syntax is to use so it only opens the widget-content of the specific widget the user click the title on.
问题是，它在所有小部件上打开小部件内容。它应该只在单击标题的特定小部件中打开小部件内容，而不是全部。我不确定使用什么正确的语法，所以它只打开用户单击标题的特定小部件的小部件内容。
Here is the code I have so far:
这是我到目前为止的代码：
$('.widget').find('.widget-title').click(function() {
$('.widget-content').show('slow', function() {
// Animation complete.
});
$('.widget').find('.widget-title').addClass("open");
});
Could someone please provide a working example? Thanks
有人可以提供一个工作示例吗？谢谢
回答by simshaun
$('.widget .widget-title').click(function() {
$(this)
.addClass("open")
.parent().find('.widget-content').show('slow', function() {
// Animation complete.
});
});
回答by Bram Vanroy
Try this:
尝试这个：
$('.widget-title').click(function() {
$(this).parent('.widget').children('.widget-content').show('slow', function() {
$(this).addClass('open');
});
});
回答by Elliot Bonneville
I think you want this:
我想你想要这个：
$('.widget').find('.widget-title').click(function() {
$(this).parent().show('slow', function() {
// Animation complete.
}).addClass("open");
});
It opens the parent of the selected .widget-titleelement.
它打开所选.widget-title元素的父级。
回答by Zander Rootman
I had the same problem today, here was a quick solution $('#parent > childNode'); http://api.jquery.com/child-selector/
我今天遇到了同样的问题，这是一个快速解决方案 $('#parent > childNode'); http://api.jquery.com/child-selector/
回答by rgin
.children()http://api.jquery.com/children/
.children()http://api.jquery.com/children/
I am not entirely sure if I understand you, but this may help you.
我不完全确定我是否理解你，但这可能对你有帮助。
回答by Adam
$('div.widget-title').click(function() {
var el = $(this);
el.addClass('open');siblings('div.widget-content').show('slow',function() {
//animation complete
});
});
You need to keep the callback function in context using the 'this' keyword which refers to the current DOM element. Otherwise, you'll just be grabbing all DOM elements with a class of widget-title inside your callback.
您需要使用引用当前 DOM 元素的“this”关键字将回调函数保留在上下文中。否则，您只会在回调中获取所有带有小部件标题类的 DOM 元素。
回答by Machinegon
If you select by a class, jquery will select all the members of that class. Is it possible for you to set an ID or attribute to this specific widget or parent container?
如果按类选择，jquery 将选择该类的所有成员。您是否可以为此特定小部件或父容器设置 ID 或属性？
