Question

假设我有这段代码：

<div class="notes">
    <div class="note">
         <div class="inner-content like"></div>
    </div>
    <div class="note">
         <div class="inner-content unlike"></div>
    </div>
    <div class="note">
         <div class="inner-content unlike"></div>
    </div>
</div>

我想要的是filter之类的，而不是子类。

我尝试了这段代码，但没有运气：

$("div.notes").filter(".note.note-inner>.like").hide();

具有类似子类的div不会隐藏。

更新

我想隐藏.note类的元素而不是.inner-note like的元素。

Answer 1

你没有.note-inner并且你的选择器错了。 .note.note-inner将是class="note note-inner"的元素。 .notes只有1个元素，因此$.filter()无法找到.notes

中的任何其他元素或子元素

我认为您的意思是$("div.notes").find(".note > .like").hide();，但您也可以在有或没有直接后代选择器的情况下进行$('div.notes > .note > .like').hide() - 它们对您共享的标记不是必需的。

如果您想要删除.note作为孩子的.like，请使用$("div.notes").find(".like").closest('.note').hide();。这将在.like内找到.notes，然后找到与类.note最近的祖先并隐藏它。

＆＃13;

$("div.notes").find(".like").closest('.note').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notes">
  <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
    <div class="note">
         <div class="inner-content like">like</div>
    </div>
    <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
    <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
</div>

＆＃13;

Answer 2

你可以试试这个

 $(".note > .inner-content.like").hide();

 $(".note > .inner-content.like").show();

和

 $(".note > .inner-content.unlike").hide();

 $(".note > .inner-content.unlike").show();

我创建了一个JSfiddle，用按钮切换显示过滤器https://jsfiddle.net/jmbm2myu/3/

Answer 3

.filter()适用于您要过滤的元素，因此您希望将其应用于<div class="inner-content .."></div>元素：

$("div.notes > .note > .inner-content").filter(".like").hide();

或者只是

$("div.notes > .note > .inner-content.like").hide();

要删除.note元素，您只需获取父级：

$("div.notes > .note > .inner-content.like").parent(".note").hide();

使用CSS类/子类

3 个答案: