私は次のスクリプトを書きましたが、動作していないようにjQuery

Question

私は常にGoogle ChromeのコンソールでのjQueryを経由してページを更新するには、画像をカウントしようとしている

、

を使用して絶えず更新するページ上の画像を数えます適切に、あなたは私を助けることができれば、私は喜んでいるでしょう：

var count = 0; 
window.setInterval(function() { 
    $('.image .big').each(function(i, obj) { 
    if ($('.box').find('img').attr("src") == "special-src/img.png") { 
     count++ 
    } else { 
     count-- 
    }; 
    $('.image .big').addClass('.done').removeClass('.image .big'); // To not count it multiple times 
    console.log(count); 
    }); 
}, 1000); 

編集：私はそのようなルックスで働いている HTML： （divのはcontantly除去され、追加されている）

<div class="box"> 
     <img src="special-src/img.png" class="image big"/> 
</div> 
<div class="box"> 
     <img src="special-src/img2.png" class="image big"/> 
</div> 

Answer 1

いくつかのクリエイティブなCSSセレクタで、カウントしたい要素を見つけることができます。各セレクターが何をしているかを明確にするためにいくつかのコメントを追加しました。答えは、特別な画像が3つ、通常の画像が1つ追加されているので、番号2を出力する必要があります。

(function() { 
 
    var 
 
    count = 0, 
 
    // Selector for finding all items with the class "box" but with the class "done". 
 
    selectorNotProcessed = '.box:not(.done)', 
 
    // Selector for all element with the classes "image" and "big" with a "src" attribute 
 
    // that contains "img1.png" and that have an ancestor with the class "box" but not 
 
    // the class "done" 
 
    selectorSpecialNotDone = `${selectorNotProcessed} .image.big[src*="img1.png"]`, 
 
    // Selector for all element with the classes "image" and "big" with a "src" attribute 
 
    // that DOESN'T contain "img1.png" and that have an ancestor with the class "box" but 
 
    // not the class "done"  
 
    selectorNotSpecialNotDone = `${selectorNotProcessed} .image.big:not([src*="img1.png"])`; 
 
    
 
    setInterval(function() { 
 
    var 
 
     // Get all the non processed special src elements. 
 
     specialElements = document.querySelectorAll(selectorSpecialNotDone), 
 
     // Get all the non processed non-special src elements. 
 
     notSpecialElements = document.querySelectorAll(selectorNotSpecialNotDone); 
 
     
 
    // Update the count of the number of special src elements vs non-special src elements 
 
    count += (specialElements.length - notSpecialElements.length); 
 
    
 
    // Add the done class to all the elements with the class "box" that do not yet have the 
 
    // class "done". 
 
    document.querySelectorAll(selectorNotProcessed).forEach(element => element.classList.add('done')); 
 
    
 
    console.log(count); 
 
    }, 1000); 
 
})();

<div class="box"> 
 
    <img src="folder/img1.png" class="image big"/> 
 
</div> 
 
<div class="box"> 
 
    <img src="folder/img2.png" class="image big"/> 
 
</div> 
 
<div class="box"> 
 
    <img src="folder/img1.png" class="image big"/> 
 
</div> 
 
<div class="box"> 
 
    <img src="folder/img1.png" class="image big"/> 
 
</div>

Answer 2

チェックアウトイメージを動的にカウントするための例を扱うため、このlink。

$(document).bind('DOMSubtreeModified', function() { 

    console.log("document changed"); 
    if (totalImages !== $(".image.big").length && !disableRecounting) { 
     disableRecounting = true; 
     console.log("recount images..", totalImages, $(".image.big").length); 
     countImages(); 
    } 
});