Question

我目前正在尝试显示图库中图像数量的计数（即“此库中有'x'图像”）。每页都有多个画廊，因为它们嵌入了Wordpress Feed中的帖子中。

在我的本地主机上，我实际上可以让它显示计数，但它会计算页面上的每个图像，就好像它不会被约束到父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;

Answer 2

您需要使用this来引用当前循环索引，并使用find来定位子项。

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

计算父div中的特定子项

2 个答案: