如何使用javascript或jquery检查div中有多少图像？

我想得到这个div中的图像数量。它们是5，我想用javascript或jquery来阅读。。

---

如何操作？？？

要计算jQuery选择中的元素数，请使用

length

<div id="images">

                    <a href="resources/certified_training/1.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -1</a>
                    <a href="resources/certified_training/2.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -2</a>
                    <a href="resources/certified_training/3.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -3</a>
                    <a href="resources/certified_training/4.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -4</a>
                    <a href="resources/certified_training/5.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -5</a>


                </div>

---

您可以检查

length

属性。您还可以将选择器传递给

.children（）

或

或

试试这个：

$("#images a").length

或者

使用

.has（）

条件检查元素是否包含

元素：

 alert($("#images").children("a").length);

但是，如果每个

可能包含多个图像，则应改为使用：

$(function() {
    var imgCount = $("#images a").has("img").length;
});

p/s：我的回答是基于这样的假设，即OP打算将

嵌套在

标记中，即：

$("#images a img").length

你可以用

$("a[href*='png']").length

这将只选择

它仍然只返回5，因为那里只有5个阴影盒图像

---

这里有一个只使用Javascript的解决方案

<div id="images">
                <a href="http://google.com">google</a><br/>
                <a href="http://stackoverflow.com">Stack Overflow</a><br/>

                <a href="resources/certified_training/1.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -1</a>
                <a href="resources/certified_training/2.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -2</a>
                <a href="resources/certified_training/3.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -3</a>
                <a href="resources/certified_training/4.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -4</a>
                <a href="resources/certified_training/5.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -5</a>


            </div>

那么，我们走吧

alert(document.getElementsByTagName('a').length);
                    OR
console.log(document.getElementsByTagName('a').length);

//如果要计算元素，请使用.length属性
$（'#图像a'）。长度
//如果要按名称计数图像
var images=[“.png”、“.jpg”、“.gif”]//图像类型
var计数=0；
对于（var a=0；a<$（'#图像a'）。长度；a++）
{
对于（var b=0；b

---

希望这有帮助！：）

该分区中没有图像。有

标记，但没有

，只需为该分区中所需的元素使用匹配的选择器，然后查看返回的jQuery对象的名称…在

div

中没有图像-只有5个

a

元素

a

标记的可能副本都没有

img

标记。这是假设OP意味着他在

元素中嵌套了

。

$("#images a img").length

<a href="resources/certified_training/2.png" rel="shadowbox[certifiedtraining];width=510;height=372"><img /></a>

$("a[href*='png']").length

$('#images a[rel^="shadowbox[certifiedtraining]"]').length // 5

<div id="images">
                <a href="http://google.com">google</a><br/>
                <a href="http://stackoverflow.com">Stack Overflow</a><br/>

                <a href="resources/certified_training/1.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -1</a>
                <a href="resources/certified_training/2.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -2</a>
                <a href="resources/certified_training/3.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -3</a>
                <a href="resources/certified_training/4.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -4</a>
                <a href="resources/certified_training/5.png" rel="shadowbox[certifiedtraining];width=510;height=372">Image -5</a>


            </div>

alert(document.getElementsByTagName('a').length);
                    OR
console.log(document.getElementsByTagName('a').length);

//if you want to count elements use .length property

$('#images a').length

//if you want to count images by name
var images = [ ".png", ".jpg", ".gif" ] //images types
var count = 0;


for(var a=0; a < $('#images a').length; a++)
{
    for(var b=0; b < images.length; b++)
    {

        if( $($('#images a')[a]).attr('href').indexOf(images[b]) !== -1 ) //indexOf returns the position of the string in the other string. If not found, it will return -1:
        {
            count++
        } 
    } 
}

alert(count);