隐藏1、3、4、6、7、9、10、12 div容器

Question

我有以下数组，它们是html页面中的元素：

["1", "1", "1","2", "2", "2","3", "3", "3","4", "4", "4",];

更具体地说，这些是div：

<div class="abc1">1</div>
<div class="abc2">1</div>
<div class="abc3">1</div>
<div class="abc4">2</div>
<div class="abc5">2</div>
<div class="abc6">2</div>
<div class="abc7">3</div>
<div class="abc8">3</div>
<div class="abc9">3</div>
<div class="abc10">4</div>
<div class="abc11">4</div>
<div class="abc12">4</div>

我想隐藏1、3、4、6、7、9、10、12格。

我尝试了这段代码，但它只隐藏了每个奇数。

$(document).ready(hideLabelFF);

function hideLabelFF(){
$('*[class^="abc"]').each(function (i){
    $('*[class^="abc"]:nth-of-type(2n+1)').hide();
});
};

Answer 1

使用2n + 1时 ，您将目标定为奇数div 。 您有2个系列，一个是1,4,7,10 ...，另一个是3,6,9,12 ...

只需尝试以下

function hideLabelFF(){
    $('*[class^="abc"]:nth-of-type(3n+1)').hide();
    $('*[class^="abc"]:nth-of-type(3n)').hide();
}

供参考- 朋克

Answer 2

我不确定此操作的目的是什么； 听起来像是一项家庭作业，以找到最聪明的方式来做到这一点。

最直接的方法是这样的：

[1, 3, 4, 6, 7, 9, 10, 12].forEach(num => $(`.abc${num}`).hide());

虽然不聪明。 您已经注意到那里的模式。 所示元素为2、5、8、11，即3n-1。 因此，您可以这样做：

$('*[class^="abc"]:nth-of-type(3n-2)').hide();
$('*[class^="abc"]:nth-of-type(3n)').hide();

反隐藏：

$('*[class^="abc"]').hide();
$('*[class^="abc"]:nth-of-type(3n-1)').show();

或最后，使用.not()方法将所有内容.not()为一种：

$('*[class^="abc"]').not(":nth-of-type(3n-1)").hide();