计算图像或“rel”属性

Question

我想分别计算一个<div class="thumbnail">的所有图片。

我的代码：

    <div class="thumbnail">     

    <a rel="first" href="#">
        <div>
        <div></div>
        <img src="...">
        </div>
    </a>

    <div class="hidden-fb"> <!-- // CSS display: none -->                                                                                                 
        <a rel="first" href="#">
            <div>
            <div></div>
            <img src="...">
            </div>
        </a>                                               
    </div><!-- .hidden-fb -->

</div><!-- .thumbnail -->

<h2>Contains 2* images </h2>

我试试这个

var featureImageCount = $('div.thumbnail img').length;    
$('div.thumbnail').after('<div><h1>' + featureImageCount + ' Images</h1></div>');

但我得到的只是所有的div“（6）” 我可以用jquery做这个，图像的数量*会自动填写吗？ 或者jquery可以按不同的rel属性计算项目吗？

jsFiddle

感谢
Ogni

Answer 1

您需要使用.thumbnail分别查看每个.each元素。然后，您可以在回调中使用$(this)来访问实际元素。从那里，您可以找到所有特定的后代<img>元素。从那里开始，您可以.after使用$(this)，$(document).ready(function () { $("div.thumbnail").each(function () { var $this = $(this), count = $this.children("a").children("img").length; $this.after("<div><h1>" + count + " Images</h1></div>"); }); }); 。

{{1}}

http://jsfiddle.net/yCazz/8/

Answer 2

$('div.thumbnail').each(function () {

    var $this = $(this),
        count = $this.find('img').length;

    $this.after('<h2>', {
        text: 'Contains (' + count  + '*) image' + (count == 1 ? '' : 's')
    });

});