jQuery - 如何选择父级的子元素？

Question

对不起，如果标题不准确 - 我无法弄清楚如何说出它。

我有相同的类<div class="widget"></div>多个部件 - 每个插件都有标题和内容，结构是这样的：

<div class="widget"> 
    <div class="widget-title">Title</div> 
    <div class="widget-content">Content Here</div> 
</div> 

“微件内容”是隐藏的，当你点击小工具-title，内容出现，一个类被应用到widget标题，将其改为“widget-title open”。这部分工作发现，并且小部件内容也打开。

问题是，它打开所有小部件上的小部件内容。它只应该在标题被点击的特定小部件中打开小部件内容，而不是所有这些内容。我不确定使用正确的语法，所以它只打开用户点击标题的特定小部件的小部件内容。

这里是我到目前为止的代码：

$('.widget').find('.widget-title').click(function() { 
    $('.widget-content').show('slow', function() { 
    // Animation complete. 
    }); 
    $('.widget').find('.widget-title').addClass("open"); 
}); 

可能有人请提供一个工作的例子吗？由于

Answer 1

$('.widget .widget-title').click(function() { 
    $(this) 
     .addClass("open") 
     .parent().find('.widget-content').show('slow', function() { 
      // Animation complete. 
     }); 
}); 

Answer 2

.children()http://api.jquery.com/children/

我不能完全肯定，如果我理解你，但是这可能会帮助你。

Answer 3

我想你想要这样的：

$('.widget').find('.widget-title').click(function() { 
    $(this).parent().show('slow', function() { 
     // Animation complete. 
    }).addClass("open"); 
}); 

它打开所选.widget-title元素的父。

Answer 4

$('div.widget-title').click(function() { 
var el = $(this); 
el.addClass('open');siblings('div.widget-content').show('slow',function() { 
    //animation complete 
}); 
}); 

你需要使用“这个”关键字是指当前的DOM元素，以保持回调函数的上下文。否则，您只需在回调中使用一组widget标题抓取所有DOM元素。

Answer 5

如果您按类选择，jquery将选择该类的所有成员。是否可以为此特定窗口小部件或父容器设置ID或属性？

Answer 6

试试这个：

$('.widget-title').click(function() { 
    $(this).parent('.widget').children('.widget-content').show('slow', function() { 
    $(this).addClass('open'); 
    }); 
}); 

Answer 7

今天我有同样的问题，这里是一个快速的解决方案 $（ '＃父> childNode'）; http://api.jquery.com/child-selector/