jquery - jQuery 仅针对父 div 中的元素

Question

我在一个页面上有许多小部件，我想在整个过程中重用类。我有一个问号图标，应该在小部件内的 2 个 div 之间切换可见性。

问题是我不能让我的代码只针对当前的小部件。我已经尝试了通常的技术，但似乎没有一个在这里工作。

小提琴在这里，http://jsfiddle.net/clintongreen/9hvVn/

有问题的单击功能从问号图标起作用。需要 toggleClass 的 div 是 .widget-content 和 .widget-content_next

谢谢 ：）

Answer 1

您可以将 parent 与兄弟姐妹一起使用

$("a.expand_widget").live("click", function () {
    $(this).parent().siblings(".widget-content").toggleClass("hidden");
    $(this).parent().siblings(".widget-content_next").toggleClass("hidden");
});

http://jsfiddle.net/KKMaW/

或者，您可以将选择器限制为父节点

$("a.expand_widget").live("click", function () {
    var root = this.parentNode.parentNode;
    $(".widget-content",root).toggleClass("hidden");
    $(".widget-content_next",root).toggleClass("hidden");
});

Answer 2

widget-content 和 widget-content_next 不是链接的直接祖先，我认为你想要这样的东西：

 $(this).closest(".widget").find('.widget-content').toggleClass("hidden");
 $(this).closest(".widget").find(".widget-content_next").toggleClass("hidden");

Answer 3

我认为该.closest方法不适用于您，因为它只找到祖先，而不是祖先的兄弟姐妹或后代：

给定一个表示一组 DOM 元素的 jQuery 对象，.closest() 方法在 DOM 树中搜索这些元素及其祖先，并从匹配的元素构造一个新的 jQuery 对象。.parents() 和 .closest() 方法的相似之处在于它们都向上遍历 DOM 树。

解决方案

.closest您可以使用该.parent函数来查找所有者，而不是使用，然后使用其他树遍历函数来查找与某些选择器匹配的子项。

试试这个编辑过的代码 - http://jsfiddle.net/9hvVn/3/：

$("a.expand_widget").live("click", function () {
    var parentWidget = $(this).parent('div.widget-head')
        .parent('li.widget');
    parentWidget.children(".widget-content").toggleClass("hidden");
    parentWidget.children(".widget-content_next").toggleClass("hidden");
});

它相当严格，但如果需要，您可以稍微放松一下。您还可以在 上使用各种同级函数，div.widget-head而不是首先获取父级父级。