Question

我正在尝试使用jquery计算img元素的总数，然后计算父div标签中存在的样式标记的数量。当前的HTML看起来像这样：

<div id="origin" class="ui-test">
    <div class="polaroid ui-test">
        <img src="http://example.com/84655/l/72105d6f46205a948f00f6e59c299930.jpg" >
    </div>
    <div class="polaroid ui-test">
        <img src="http://example.com/77676/l/819e2093be4c61d2e21b1175f9d0f0f9.jpg" >
    </div>
    <div class="polaroid ui-test" style="left: 288.328125px; top: -8px; display: none;">
        <img src="http://example.com/47901/l/79f936ef9847793254bad21e16b2448f.jpg" >
    </div>
    <div class="polaroid ui-test" style="left: 94.328125px; top: 6px; display: none;">
        <img src="http://example.com/49761/l/6d10064d6b189c6934fd264ac295f5f8.jpg" >
    </div>
</div>

基于上面的例子，我试图获取父源容器下的总img元素数，然后显示有多少元素显示display: none;

我希望看到：4个img标签总数和2个隐藏的img标签

我想我可以通过以下方式获得图像的数量：

var totalImages = $("#origin img").length;

如何获得显示display：none？

的图像总数

Answer 1

试试这个：

var totalImages = $("#origin img").length;
var totalImagesWithStyle = $("#origin div[style] img").length;
//or
var totalImagesWithStyle = $("#origin div:hidden img").length;
//or
var totalImagesWithStyle = $("#origin .polaroid:hidden img").length;

Fiddle

Answer 2

:hidden选择器选择隐藏的所有元素。

$( "#origin div:hidden" ).length;

Answer 3

尝试使用:hidden jQuery selector。

 $('#origin img:hidden');

Answer 4

见http://jsfiddle.net/35uvZ/。它由你的HTML部分组成;我留下了左边和顶部的声明。除此之外只是一些jQuery：

var $imgWrp = $('#origin .polaroid');
var $images = $imgWrp.find('img');
var $hiddenImages = $imgWrp.filter(':hidden').find('img');

console.log($images.length);
console.log($hiddenImages.length);

Answer 5

为了提高效率，我会将其分解为两个步骤：

var allImages = $("#origin").find("img");
var hiddenImages = allImages.filter(":hidden");

然后你可以检索其中一组或两组的长度（根据需要）并从那里开始。

计算div容器中样式标记的数量

5 个答案:

Fiddle