如何检查在javascript或jQuery的div中有多少图像？

-3

<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>

我想获取这个div中的图像数量。他们是5，我想用JavaScript或jQuery阅读它.. 如何做到这一点？如何检查在javascript或jQuery的div中有多少图像？

来源

2013-10-28 r.r

该div中没有图像。有''标签，但没有'' – CodingIntrigue

只需使用该div中所需元素的匹配选择器，然后查看['length']（http://api.jquery.com/length/）返回的jQuery对象... – CBroe

该''div'中没有图像 - 只有5'a'个元素 –

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

$('#images a').length

来源

2013-10-28 12:53:26

您可以检查length财产。您也可以选择传递给.children()

$("#images").children().length

或

$("#images").children('a').length

或

$("#images a").length

DEMO

来源

2013-10-28 12:53:34 Satpal

试试这个：

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

或者，

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

来源

2013-10-28 12:53:53 maverickosama92

使用.has()条件检查元素包含了<img>元素：

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

如果每个<a>可以包含多个图像虽然，你应该使用这样的：

$("#images a img").length

p/s：我的回答是基于假设该OP打算窝<img>的<a>标签内，即：

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

如果OP指的是计算的链接图像的数量，他可以使用：

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

来源

2013-10-28 12:54:56 Terry

没有'a'标签有'img'标签。 – plalx

这是假设OP意味着他有''嵌套在''元素中。 – Terry

你可以使用

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

这将只选择<a>元素，其rel属性以"shadowbox[certifiedtraining]"开头。例如，如果你有这个HTML：

<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>

它仍然只会返回5，因为那里只有5个shadowbox图像。

JSFiddle

来源

2013-10-28 12:54:59 Doorknob

这里是一个只有JavaScript的解决方案。

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

来源

2013-10-28 13:00:36 MarsOne

那么，让我们开始吧！

//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);

JSFiddle Example

希望这有助于！ :)

来源

2013-10-28 13:11:18 PabloWeb18

如何检查在javascript或jQuery的div中有多少图像？

回答

相关问题