Switch to using for...of

.eslintrc.json

@@ -164,8 +164,7 @@
       },
       "rules": {
         "no-console": "off",
-        "no-new": "off",
+        "no-new": "off"
-        "unicorn/no-array-for-each": "off"
       }
     },
     {
@@ -192,8 +191,7 @@
         "ecmaVersion": 2019
       },
       "rules": {
-        "no-new": "off",
+        "no-new": "off"
-        "unicorn/no-array-for-each": "off"
       }
     },
     {

js/tests/visual/modal.html

@@ -217,9 +217,13 @@
         }
       }
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+        new bootstrap.Popover(popoverEl)
+      }
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+      for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+        new bootstrap.Tooltip(tooltipEl)
+      }
 
       const tall = document.getElementById('tall')
       document.getElementById('tall-toggle').addEventListener('click', () => {

js/tests/visual/popover.html

@@ -35,7 +35,9 @@
     <script>
       /* global bootstrap: false */
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+        new bootstrap.Popover(popoverEl)
+      }
     </script>
   </body>
 </html>

js/tests/visual/toast.html

@@ -55,14 +55,20 @@
       /* global bootstrap: false */
 
       window.addEventListener('load', () => {
-        document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
+        for (const toastEl of document.querySelectorAll('.toast')) {
+          new bootstrap.Toast(toastEl)
+        }
 
         document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
+          for (const toastEl of document.querySelectorAll('.toast')) {
+            bootstrap.Toast.getInstance(toastEl).show()
+          }
         })
 
         document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
+          for (const toastEl of document.querySelectorAll('.toast')) {
+            bootstrap.Toast.getInstance(toastEl).hide()
+          }
         })
       })
     </script>

js/tests/visual/tooltip.html

@@ -113,7 +113,9 @@
       })
       targetTooltip.show()
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+      for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+        new bootstrap.Tooltip(tooltipEl)
+      }
     </script>
 
     <script>

site/assets/js/code-examples.js

@@ -29,14 +29,13 @@
   ].join('')
 
   // Wrap programmatically code blocks and add copy btn.
-  document.querySelectorAll('.highlight')
+  for (const element of document.querySelectorAll('.highlight')) {
-    .forEach(element => {
+    // Ignore examples made by shortcode
-      // Ignore examples made by shortcode
+    if (!element.closest('.bd-example-snippet')) {
-      if (!element.closest('.bd-example-snippet')) {
+      element.insertAdjacentHTML('beforebegin', btnHtml)
-        element.insertAdjacentHTML('beforebegin', btnHtml)
+      element.previousElementSibling.append(element)
-        element.previousElementSibling.append(element)
+    }
-      }
+  }
-    })
 
   /**
    *
@@ -44,9 +43,9 @@
    * @param {string} title
    */
   function snippetButtonTooltip(selector, title) {
-    document.querySelectorAll(selector).forEach(btn => {
+    for (const btn of document.querySelectorAll(selector)) {
       bootstrap.Tooltip.getOrCreateInstance(btn, { title })
-    })
+    }
   }
 
   snippetButtonTooltip('.btn-clipboard', btnTitle)

site/assets/js/snippets.js

@@ -20,19 +20,17 @@
   // Tooltips
   // --------
   // Instantiate all tooltips in a docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  for (const tooltip of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
-    .forEach(tooltip => {
+    new bootstrap.Tooltip(tooltip)
-      new bootstrap.Tooltip(tooltip)
+  }
-    })
 
   // --------
   // Popovers
   // --------
   // Instantiate all popovers in docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="popover"]')
+  for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
-    .forEach(popover => {
+    new bootstrap.Popover(popover)
-      new bootstrap.Popover(popover)
+  }
-    })
 
   // -------------------------------
   // Toasts
@@ -50,15 +48,14 @@
   }
 
   // Instantiate all toasts in docs pages only
-  document.querySelectorAll('.bd-example .toast')
+  for (const toastNode of document.querySelectorAll('.bd-example .toast')) {
-    .forEach(toastNode => {
+    const toast = new bootstrap.Toast(toastNode, {
-      const toast = new bootstrap.Toast(toastNode, {
+      autohide: false
-        autohide: false
-      })
-
-      toast.show()
     })
 
+    toast.show()
+  }
+
   // Instantiate all toasts in docs pages only
   // js-docs-start live-toast
   const toastTrigger = document.getElementById('liveToastBtn')
@@ -103,32 +100,29 @@
   // Carousels
   // --------
   // Instantiate all non-autoplaying carousels in docs or StackBlitz
-  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
+  for (const carousel of document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')) {
-    .forEach(carousel => {
+    bootstrap.Carousel.getOrCreateInstance(carousel)
-      bootstrap.Carousel.getOrCreateInstance(carousel)
+  }
-    })
 
   // -------------------------------
   // Checks & Radios
   // -------------------------------
   // Indeterminate checkbox example in docs and StackBlitz
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
+  for (const checkbox of document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')) {
-    .forEach(checkbox => {
+    if (checkbox.id.includes('Indeterminate')) {
-      if (checkbox.id.includes('Indeterminate')) {
+      checkbox.indeterminate = true
-        checkbox.indeterminate = true
+    }
-      }
+  }
-    })
 
   // -------------------------------
   // Links
   // -------------------------------
   // Disable empty links in docs examples only
-  document.querySelectorAll('.bd-content [href="#"]')
+  for (const link of document.querySelectorAll('.bd-content [href="#"]')) {
-    .forEach(link => {
+    link.addEventListener('click', event => {
-      link.addEventListener('click', event => {
+      event.preventDefault()
-        event.preventDefault()
-      })
     })
+  }
 
   // -------------------------------
   // Modal
@@ -161,10 +155,10 @@
   // 'Offcanvas components' example in docs only
   const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
   if (myOffcanvas) {
-    myOffcanvas.forEach(offcanvas => {
+    for (const offcanvas of myOffcanvas) {
       offcanvas.addEventListener('show.bs.offcanvas', event => {
         event.preventDefault()
       }, false)
-    })
+    }
   }
 })()

site/content/docs/5.3/components/buttons.md

@@ -223,10 +223,10 @@ const bsButton = new bootstrap.Button('#myButton')
 For example, to toggle all buttons
 
 ```js
-document.querySelectorAll('.btn').forEach(buttonElement => {
+for (const buttonElement of document.querySelectorAll('.btn')) {
   const button = bootstrap.Button.getOrCreateInstance(buttonElement)
   button.toggle()
-})
+}
 ```
 
 ## CSS

site/content/docs/5.3/components/list-group.md

@@ -413,14 +413,14 @@ Enable tabbable list item via JavaScript (each list item needs to be activated i
 
 ```js
 const triggerTabList = document.querySelectorAll('#myTab a')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
   const tabTrigger = new bootstrap.Tab(triggerEl)
 
   triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
-})
+}
 ```
 
 You can activate individual list item in several ways:
@@ -491,10 +491,10 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 
 ```js
 const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
-tabElms.forEach(tabElm => {
+for (const tabElm of tabElms) {
   tabElm.addEventListener('shown.bs.tab', event => {
     event.target // newly activated tab
     event.relatedTarget // previous active tab
   })
-})
+}
 ```

site/content/docs/5.3/components/navs-tabs.md

@@ -613,14 +613,14 @@ Enable tabbable tabs via JavaScript (each tab needs to be activated individually
 
 ```js
 const triggerTabList = document.querySelectorAll('#myTab button')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
   const tabTrigger = new bootstrap.Tab(triggerEl)
 
   triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
-})
+}
 ```
 
 You can activate individual tabs in several ways:

site/content/docs/5.3/components/scrollspy.md

@@ -333,13 +333,13 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
 Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
 
 ```js
-document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+for (const el of document.querySelectorAll('#nav-tab > [data-bs-toggle="tab"]')) {
   el.addEventListener('shown.bs.tab', () => {
     const target = el.getAttribute('data-bs-target')
     const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
     bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
   })
-})
+}
 ```
 
 ## Usage
@@ -406,9 +406,9 @@ Here's an example using the refresh method:
 
 ```js
 const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
-dataSpyList.forEach(dataSpyEl => {
+for (const dataSpyEl of dataSpyList) {
   bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
-})
+}
 ```
 
 ### Events

site/content/docs/5.3/examples/cheatsheet/cheatsheet.js

@@ -4,34 +4,30 @@
   'use strict'
 
   // Tooltip and popover demos
-  document.querySelectorAll('.tooltip-demo')
+  for (const tooltip of document.querySelectorAll('.tooltip-demo')) {
-    .forEach(tooltip => {
+    new bootstrap.Tooltip(tooltip, {
-      new bootstrap.Tooltip(tooltip, {
+      selector: '[data-bs-toggle="tooltip"]'
-        selector: '[data-bs-toggle="tooltip"]'
+    })
-      })
+  }
+
+  for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+    new bootstrap.Popover(popover)
+  }
+
+  for (const toastNode of document.querySelectorAll('.toast')) {
+    const toast = new bootstrap.Toast(toastNode, {
+      autohide: false
     })
 
-  document.querySelectorAll('[data-bs-toggle="popover"]')
+    toast.show()
-    .forEach(popover => {
+  }
-      new bootstrap.Popover(popover)
-    })
-
-  document.querySelectorAll('.toast')
-    .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
-    })
 
   // Disable empty links and submit buttons
-  document.querySelectorAll('[href="#"], [type="submit"]')
+  for (const link of document.querySelectorAll('[href="#"], [type="submit"]')) {
-    .forEach(link => {
+    link.addEventListener('click', event => {
-      link.addEventListener('click', event => {
+      event.preventDefault()
-        event.preventDefault()
-      })
     })
+  }
 
   function setActiveItem() {
     const { hash } = window.location

site/content/docs/5.3/examples/checkout/checkout.js

@@ -3,10 +3,10 @@
   'use strict'
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  const forms = document.querySelectorAll('.needs-validation');
+  const forms = document.querySelectorAll('.needs-validation')
 
   // Loop over them and prevent submission
-  [...forms].forEach(form => {
+  for (const form of forms) {
     form.addEventListener('submit', event => {
       if (!form.checkValidity()) {
         event.preventDefault()
@@ -15,5 +15,5 @@
 
       form.classList.add('was-validated')
     }, false)
-  })
+  }
 })()

site/content/docs/5.3/examples/sidebars/sidebars.js

@@ -2,7 +2,7 @@
 (() => {
   'use strict'
   const tooltipTriggerList = [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
-  tooltipTriggerList.forEach(tooltipTriggerEl => {
+  for (const tooltipTriggerEl of tooltipTriggerList) {
     new bootstrap.Tooltip(tooltipTriggerEl)
-  })
+  }
 })()

site/content/docs/5.3/getting-started/javascript.md

@@ -39,8 +39,9 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst
 <script type="module">
   import { Toast } from 'bootstrap.esm.min.js'
 
-  Array.from(document.querySelectorAll('.toast'))
+  for (const toastNode of document.querySelectorAll('.toast')) {
-    .forEach(toastNode => new Toast(toastNode))
+    new Toast(toastNode))
+  }
 </script>
 ```
 

site/static/docs/5.3/assets/js/color-modes.js

@@ -41,10 +41,10 @@
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
     const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    for (const element of document.querySelectorAll('[data-bs-theme-value]')) {
       element.classList.remove('active')
       element.setAttribute('aria-pressed', 'false')
-    })
+    }
 
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
@@ -67,14 +67,13 @@
   window.addEventListener('DOMContentLoaded', () => {
     showActiveTheme(getPreferredTheme())
 
-    document.querySelectorAll('[data-bs-theme-value]')
+    for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {
-      .forEach(toggle => {
+      toggle.addEventListener('click', () => {
-        toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value')
-          const theme = toggle.getAttribute('data-bs-theme-value')
+        setStoredTheme(theme)
-          setStoredTheme(theme)
+        setTheme(theme)
-          setTheme(theme)
+        showActiveTheme(theme, true)
-          showActiveTheme(theme, true)
-        })
       })
+    }
   })
 })()

site/static/docs/5.3/assets/js/validate-forms.js

@@ -3,10 +3,10 @@
   'use strict'
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  const forms = document.querySelectorAll('.needs-validation');
+  const forms = document.querySelectorAll('.needs-validation')
 
   // Loop over them and prevent submission
-  [...forms].forEach(form => {
+  for (const form of forms) {
     form.addEventListener('submit', event => {
       if (!form.checkValidity()) {
         event.preventDefault()
@@ -15,5 +15,5 @@
 
       form.classList.add('was-validated')
     }, false)
-  })
+  }
 })()