javascript - 计算父级 div 中的特定子级

Question

我目前正在尝试显示图库中图像的数量(即“该图库中有‘x’张图像”)。每个页面上都有多个画廊，因为它们嵌入在 Wordpress 提要的帖子中。

在我的本地主机上，我实际上可以让它显示计数，但它会计算页面上的每个图像，就好像它没有被限制到父 div 进行计数一样。

任何意见都将受到极大的赞赏 - http://jsfiddle.net/fvoLaad1/2/或以下代码:

编辑:感谢@Mohamed-Yousef和@Tom Millard - 工作版本在这里http://jsfiddle.net/kuLsjLgg/

jQuery

jQuery(function($) {
  $('.iso-post').each(function(i) {
    var n = $('.gallery-item').length;
    $(".image-count").text("There are " + n + " images in this gallery.");
  });
});

HTML

<li class="iso-post">
    <span class="image-count"></span>
    <div class="post-content">
        <div class="gallery">
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
        </div>
    </div>
</li>

<li class="iso-post">
    <span class="image-count"></span>
    <div class="post-content">
        <div class="gallery">
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
            <figure class="gallery-item">IMG</figure>
        </div>
    </div>
</li>

Answer 1

您需要循环遍历每个图库以获取其中的图像数量

jQuery(function($) {
   $('.gallery').each(function(){
    var n = $(this).find('.gallery-item').length;
    $(this).closest('.iso-post').find(".image-count").text("There are " + n + " images in this gallery.");
   });
});

Working Demo

要获取所有图像长度，只需使用

$('.gallery-item').length;