jquery - 仅删除隐藏的类元素而不是全部

Question

.slidercard:nth-of-type(1){
    display:none;
}
.slidercard:nth-of-type(2){
    display:none;
}

js

var b = $('.slidercard').length;
console.log(b);  // result: 14 - that's ok

$('.slidercard').each(function(){
     if ($(this).css("display") == "none") {
        $(this).remove();
    }
});

var b = $('.slidercard').length;
console.log(b);  // result: 0

但结果应该是 12，因为只有两个 slidercard 是 display:none。

此外，在屏幕上我看到 - 所有 .slidecard 都被删除，而不是只有两个。

Answer 1

您的代码的问题是，当您使用 jQuery 的每个方法进行迭代时，您正在删除 sildecard 元素。每次迭代时，您都会将下一个元素设置为第一个和第二个 - 因此被 CSS 隐藏。第一个元素将始终被隐藏并因此被删除，从而导致所有元素都被删除。 使用 jQuery 选择器的更好方法是:

$('.slidercard:hidden').remove();

或者为了维持逻辑流程，替代方案可以是:

var hiddenArr = [];
$('.slidercard').each(function(){
    if ($(this).css("display") == "none") {
        hiddenArr.push($(this));
    }
});
hiddenArr.forEach((element) => {element.remove();});