Question

如果我有一组看起来像这样的div：

<div class="entry-container #sts01"></div>
<div class="entry-container"></div>
<div class="entry-container #sts01"></div>
<div class="entry-container #sts02"></div>
<div class="entry-container"></div>
<div class="entry-container #sts03"></div>
<div class="entry-container"></div>
<div class="entry-container #sts02"></div>

我只想显示包含某个＃的div，例如：

$('.entry-container:contains(:not("#sts01"))').hide();

关于如何使这项工作的任何想法？

Answer 1

您可以使用not和class选择器

过滤这些元素

＆＃13;

$('.entry-container').hide().filter('.\\#sts01').show(); //you need to escape the `#` in the class name

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container #sts01">1</div>
<div class="entry-container">0</div>
<div class="entry-container #sts01">1</div>
<div class="entry-container #sts02">2</div>
<div class="entry-container">0</div>
<div class="entry-container #sts03">3</div>
<div class="entry-container">0</div>
<div class="entry-container #sts02">2</div>

＆＃13;

Answer 2

尝试：

$('.entry-container').hide();//hide all
$('div[class^="#sts"]').show();//show only the elements whos class start(^) with `#sts`

或

$('.entry-container').not('[class^="#sts"]').hide();

Answer 3

＆＃13;

$('.entry-container').not('.sts01').hide();//hide all execpt class sts01

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container sts01">1</div>
<div class="entry-container">2</div>
<div class="entry-container sts01">3</div>
<div class="entry-container sts02">4</div>
<div class="entry-container">5</div>
<div class="entry-container sts03">6</div>
<div class="entry-container">7</div>
<div class="entry-container sts02">8</div>

＆＃13;

选择所有课程并使用.not()排除您要展示的课程

描述：从匹配元素集中删除元素。

Answer 4

以# are not valid开头的CSS类名称（除非您不在任何地方让它们逃脱）。您应该更好地使用其他选择器，例如data-*属性。然后，您可以使用属性选择器轻松选择它们。例如：

＆＃13;

$('.entry-container:not([data-value]').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container" data-value="#sts01"></div>
<div class="entry-container"></div>
<div class="entry-container" data-value="#sts02"></div>

＆＃13;

除非class为X，否则隐藏div

4 个答案: