jquery - jQuery 在每个具有 display:block 样式的子元素之后追加元素

Question

另一个 jQuery 的东西给你，我正在摸不着头脑。我有一些使用 jQuery 打开和关闭的浮动 div（如下所示）。我需要在每三个不具有 display:none 样式的子元素之后附加一些位。

<div class="ItemList">
    <div class="Item">A</div>
    <div class="Item" style="display:none;">B</div>
    <div class="Item">C</div>
    <div class="Item">D</div>
    <div class="Item" style="display:none;">E</div>
    <div class="Item">F</div>
    <div class="Item">G</div>
    <div class="Item">H</div>
    <div class="Item">I</div>
    <div class="Item" style="display:none;">J</div>
    <div class="Item">K</div>
    <div class="Item">L</div>
    <div class="Item">M</div>
    <div class="Item">N</div>
</div>

我想出了这个，但这是不对的！

$(".Item[style*='display: block']:nth-child(3n)").after("<div class='Clear'></div>");

有任何想法吗？！

Answer 1

您可以使用:visible选择器：

$(".Item:visible:nth-child(3n)").after("<div class='Clear'></div>");

或者：

$(".Item:nth-child(3n):visible").after("<div class='Clear'></div>");

请注意，选择器的顺序很重要。

Answer 2

我不确定您是否需要在选择.Item元素之前或之后过滤元素。

选择元素后。

$(".Item:nth-child(3n)").filter(function(){
     return $(this).css("display") != "none";
}).after("<div class='Clear'></div>");

@undefined 也有很好的答案。