jquery - 使用jquery计算父元素的子元素

Question

嗨，我正在使用下面的代码来计算 div 库中的 img 元素

<script type="text/javascript">
 var numimg=$("#gallery > img").size();

 document.write(numimg);
</script>

<div class="slide" id="gallery">
             <img src="images/6.jpg"/>
             <img src="images/7.jpg"/>
            <img src="images/8.jpg"/>
                        <img src="images/9.jpg"/>
                        <img src="images/10.jpg"/>
            <img src="images/11.jpg"/>
    </div>

当有 6 个 img 元素时，我收到的值为 0。我需要在 div 元素中获取实际数量的子元素。任何人都可以帮助我吗？

Answer 1

代替

$("#gallery > img").size();

和

$("#gallery > img").length;

并将代码包装在 document.ready 中，如下所示。

$(function(){
    $("#gallery > img").length;
});

Answer 2

有多个问题，你的代码需要在dom ready handler里面，dom ready后不要使用document.write，使用length属性获取子元素个数

jQuery(function(){
    var numimg=$("#gallery > img").length;
    $('body').append(numimg)
})

如果要将计数添加到页面的特定位置，则可以添加占位符元素，然后将内容添加到其中

<span id="imgcount"></span>
<div class="slide" id="gallery">
    <img src="images/6.jpg"/>
    <img src="images/7.jpg"/>
    <img src="images/8.jpg"/>
    <img src="images/9.jpg"/>
    <img src="images/10.jpg"/>
    <img src="images/11.jpg"/>
</div>

然后

jQuery(function(){
    var numimg=$("#gallery > img").length;
    $('#imgcount').html(numimg)
})

演示：小提琴

Answer 3

很确定你需要在这里做演示

$(function(){
var c = $('#gallery  img').length;
$('#imgcount').html(c);
});