如何仅使用具有display:block的div填充JavaScript数组？

Question

我试图使用jQuery在JavaScript中填充数组.我<div>在a中有一些元素,<section>我 只希望将<div>可见的元素(通过CSS属性display: block)添加到数组中.

HTML:

<section id="container">
    <div>shows up 1</div>
    <div style="display:none">doesn't show 2</div>
    <div>shows up 3</div>
    <div style="display:none">doesn't show 4</div>
    <div style="display:none">doesn't show 5</div>
    <div>shows up 6</div>
    <div>shows up 7</div>
    <div>shows up 8</div>
    <div style="display:none">doesn't show 9</div>
    <div>shows up 10</div>
</section>

JavaScript/jQuery

var mainList = $("#container div");

这当前获取所有<div>元素,无论它们的显示如何.是否有某种过滤器的,我可以把这个上调用get 仅是可见的元素？它应该只返回<div>表示"显示" 的6个元素.

小提琴: http ://jsfiddle.net/259chbj4/

注意:为此,我不能使用class它display: none.我正在寻找一种只修改JavaScript的解决方案.

Answer 1

您可以简单地使用:visible选择器。

$("#container div:visible");