在页面中上传的图像数量

Question

我创建了一些X数量的图像，我希望图像的总数量显示在顶部。请帮助我如何使用Java Script或jQuery执行此操作。

<div class="images">            
        <div class="slide">        
        <img class="photo"  src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>

    </div>

Answer 1

$('.images img').length

应该在.images类中获取所有img标记

Answer 2

使用getElementsByTagName查找所有图片，并使用.length计算。

＆＃13;

＆＃13;

var count = document.getElementsByTagName('img').length;

console.log(count);

＆＃13;

<div class="images">            
        <div class="slide">        
        <img class="photo"  src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>

    </div>

＆＃13;

＆＃13;

＆＃13;