prevAll（）并按子状态过滤

Question

我有以下（人工）DOM：

<div class="something">xxx</div>
<div class="something">
  <div class="essence">yyy</div>
</div>
<div class="something">zzz</div>
<div class="something">
  <div class="essence">111</div>
</div>

然后在$(document).ready我做：

$('.essence').click(function()
{
    $(this).parent().prevAll('.something > .essence').toggle();
    $(this).parent().nextAll('.something > .essence').toggle();
});

它似乎不起作用..

基本上，我想隐藏/显示点击元素的父的所有前后兄弟，它们不包含与所点击元素具有相同类的子元素。

请帮忙。如果这看起来模糊，请道歉

Answer 1

我强调了您要求的重要部分：

  

我想隐藏点击元素父的所有前后兄弟，不包含 a 与点击的元素相同的类的孩子。

将转换为

$(this).parent().siblings().not(':has(> .' + this.className + ')').hide();

或

var className = this.className;
$(this).parent().siblings().filter(function() {
    return $(this).children('.' + className).length === 0;
}).hide();

---

解释您的代码无效的原因：

.prevAll和.nextAll获取前面的元素的后续兄弟，当且仅当匹配选择器时。在您的情况下，所有兄弟姐妹都有班级something。选择器与它们中的任何一个都不匹配，因为它只匹配类essence的元素，这些元素是具有类something的元素的子元素。 我理解你试图做什么，但这不是那些方法的工作方式。

Answer 2

你可以试试这个

$('.essence').click(function()
{
    var className = $(this).attr('class');
    $(this).parent().siblings().filter(function(){
        return !$(this).children('.'+className).length;
    }).toggle();
});

DEMO.

Answer 3

您可以使用：has（）扩展名，如下所示：

$(this).parent().siblings('.something:has(.essence)').toggle();

这将选择.parent（）的所有兄弟节点，它们是类.something并包含类.essence的后代。您可以选择执行此操作，根据文档可能会更快：

$(this).parent().siblings('.something').has('.essence').toggle();

当我看到它在行动中时，这是一种奇怪的行为，所以很难知道它是否正是你所需要的。如果你想切换所有没有班级孩子的兄弟姐妹.essence然后试试这个：

$(this).parent().siblings('.something').not(':has(.essence)').toggle();

Answer 4

您的代码应更改为以下内容：

$('.essence').click(function()
{
    $(this).parent().siblings().not(':has("> div")').toggle();
});