无法计算 div jquery 中的图像

Question

我正在尝试计算 div 中的所有 img。要将图像添加到 div，我使用如下所示的 jquery 函数：

function AddImages(namearray, amount, speed) {      
...

            }, speed)

所有图像都正确添加到 div 元素。。在此之后我想用这个来计算图像标签的数量：

var count = $("#myDiv").find('img').length;

或

var count = document.getElementById("#myDiv").getElementsByTagName("img").length

尽管在计数之前执行了函数 AddImages()，但这并没有起作用。

有人对此有想法吗？

Answer 1

问题是图像是在多个帧的过程中添加的，但函数立即返回，因此尚未添加任何图像。

您可以向 AddImages 添加回调（首选），以便您知道图像已全部添加的时间，或者只需等待一段时间在检查之前（这实际上是您对调试器所做的）。

例如

var i = 0;
var uniekeid = 0;
function plaatsRandomPion(naamarray, aantal, snelheid, callback) {
    setTimeout(function () {
        uniekeid = uniekeid + 1;
        var xpictures = Math.floor(sizepictures * Math.random())
        var item = $("<img src='" + naamarray[xpictures] + "' id='" + uniekeid + "' />").hide().fadeIn();
        $('#depionnen').append(item);
        console.log(item);

        i++;
        if (i < aantal) {
            plaatsRandomPion(naamarray, aantal, snelheid, callback);
        }
        else {
            // We are done... callback to let the caller know
            // Note: check whether the callback exists first
            callback && callback();
        }
    }, snelheid)

}

然后这样调用：

plaatsRandomPion(pictures, 20, 100, function(){
    var count = $("#box").find('img').length;
    // Now the count will be set!
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/kcffgq26/4/

一个更 "modern" 的解决方案是使用 jQuery promises，但现在对于这个简单的问题来说这太多了。

注意：在函数之外进行全局设置（例如 uniekeid 和 i）通常是 不可重用 代码的标志。您可以获得相同的效果，没有计数器，只需每次使用 slice 减少数组并递归传递较短的数组直到它为空。由于您似乎想要随机选择图像，我建议先对数组进行随机排序（以避免重复图像）。

无法计算 div jquery 中的图像

Unable to count images in div jquery

html

jquery

image

count