Question

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

问题是我无法将我的代码仅定位到当前小部件。我尝试过通常的技术，但似乎没有人在这里工作。

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

有问题的点击功能来自问号图标。需要toggleClass的div是.widget-content和.widget-content_next

谢谢：）

Answer 1

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

$("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

我认为the .closest method不适合你，因为它只能找到祖先，而不是祖先的兄弟姐妹或后代：

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

解决方案

您可以使用the .parent function查找所有者，而不是使用.closest，然后使用the other tree traversal functions查找match certain selectors的孩子。

试试这段经过修改的代码 - 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上使用各种同级函数，而不是先获取父级父级。

jQuery仅定位父div中的元素

3 个答案:

解决方案