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 div。

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

$(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();
}

供参考 - plunker

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()方法将这一切带到一行：

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

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

2 个答案: