#Nr. 30 - Elemente auf der Seite zählen und Anzahl aktualisieren

Überprüfen Sie, wie viele Elemente mit einem bestimmten Attribut auf der Seite vorhanden sind, und wenden Sie diese Zahl auf einen Text an.

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

35 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #30 v0.1 💙 COUNT ITEMS AND DISPLAY COUNT -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    const rollupItems = document.querySelectorAll('[ms-code-rollup-item]');
    const rollupNumbers = document.querySelectorAll('[ms-code-rollup-number]');

    const updateRollupNumbers = function() {
      const rollupCountMap = new Map();

      rollupItems.forEach(item => {
        const rollupKey = item.getAttribute('ms-code-rollup-item');
        const count = rollupCountMap.get(rollupKey) || 0;
        rollupCountMap.set(rollupKey, count + 1);
      });

      rollupNumbers.forEach(number => {
        const rollupKey = number.getAttribute('ms-code-rollup-number');
        const count = rollupCountMap.get(rollupKey) || 0;
        number.textContent = count;
      });
    };

    updateRollupNumbers(); // Initial update

    // Polling keywordfunction to periodically update rollup numbers
    const pollRollupNumbers = function() {
      updateRollupNumbers();
      setTimeout(pollRollupNumbers, 1000); // Adjust the polling interval as funcneeded(in milliseconds)
    };

    pollRollupNumbers(); // Start polling
  }, 2000);
});
</script>