Question

由于某种原因，此代码仅捕获 if语句中的第一个div。如果我删除，那么“！” （不是）所有这些都是正确的。如果我添加“！”其中只有一个是真的。

我知道我可以使用CSS和：not来显示：无，但是我需要从DOM中删除这些元素。

你能告诉我我在这里想念什么吗？

$(".filtr-item").each(function() {
    // If this does not have class item-1 or item-1 or item-1 or item-1
    if (! $( this ).hasClass( "item-1" ) || $(this).hasClass( "item-2" ) || $(this).hasClass( "item-3" ) || $(this).hasClass( "item-4" ) ) {
			
       // Add class red
        $(this).remove();
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtr-item item-1">Red</div>
<div class="filtr-item item-2">Red</div>
<div class="filtr-item item-3">Red</div>
<div class="filtr-item">Black</div>
<div class="filtr-item">Black</div>

Answer 1

问题出在if语句中。您可以通过在每个条件中添加!并使用&&而非||来解决此问题：

$(".filtr-item").each(function() {
  if (!$(this).hasClass("item-1") && !$(this).hasClass("item-2") && !$(this).hasClass("item-3") && !$(this).hasClass("item-4")) {
    $(this).remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtr-item item-1">Red</div>
<div class="filtr-item item-2">Red</div>
<div class="filtr-item item-3">Red</div>
<div class="filtr-item">Black</div>
<div class="filtr-item">Black</div>

Answer 2

您可以只使用not()来过滤掉项目。

$(".filtr-item")
  .not(".item-1,.item-2,.item-3,.item-4")
    .remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtr-item item-1">Red</div>
<div class="filtr-item item-2">Red</div>
<div class="filtr-item item-3">Red</div>
<div class="filtr-item">Black</div>
<div class="filtr-item">Black</div>

您的代码问题是逻辑错误。它说它不是item-1还是item-2还是item-2还是item-4。

它需要包装

var elem = $(this);
if (! (elem.hasClass("item-1") || elem.hasClass("item-2") || elem.hasClass("item-3") || elem.hasClass("item-4") )) {}

Answer 3

只需在一个OR系列问题中添加!即可。因此，无论您拥有什么类，只需列出它们并添加!。

$(".filtr-item").each(function() {
  // If this does not have class item-1 or item-1 or item-1 or item-1
  if (!($(this).hasClass("item-1") || $(this).hasClass("item-2") || $(this).hasClass("item-3") || $(this).hasClass("item-4"))) {

    // Add class red
    $(this).remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtr-item item-1">Red</div>
<div class="filtr-item item-2">Red</div>
<div class="filtr-item item-3">Red</div>
<div class="filtr-item">Black</div>
<div class="filtr-item">Black</div>

但是不要忘了像这样将整个条件包装起来：

if (!(hasClass || hasClass || hasClass))

Answer 4

您需要将!添加到每个条件中，或将它们包装在括号中以一次全部检查它们，但是您可以像这样用.is()编写得更简洁：

$(".filtr-item").each(function() {
    // If this does not have class item-1 or item-1 or item-1 or item-1
    if ( !$(this).is('.item-1, .item-2, .item-3, .item-4') ) {
        // Remove item
        $(this).remove();
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtr-item item-1">Red</div>
<div class="filtr-item item-2">Red</div>
<div class="filtr-item item-3">Red</div>
<div class="filtr-item">Black</div>
<div class="filtr-item">Black</div>

如果div没有class-a或class-b或class-c，怎么做？

4 个答案: