上一页全部(） 并按子状态进行筛选

prevAll() and filter by child presence

本文关键字：状态 筛选 一页 全部      更新时间：2023-09-26

我有以下（人工）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();
});

它似乎不起作用..

基本上，我想隐藏/显示单击元素的父级的所有前后兄弟姐妹，这些兄弟姐妹不包含与单击元素具有相同类的子级。

请帮忙。如果这看起来含糊不清，请道歉

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

我想隐藏单击元素父级的所有前后兄弟姐妹，这些兄弟姐妹不包含与单击元素具有相同类的子级。

这将转化为

$(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 的元素的子元素。
我理解你试图做什么，但这不是这些方法的工作方式。

你可以

试试这个

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

演示。

你可以像这样使用 ：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();

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

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