refactor(plugins): improve how we query elements

js/src/carousel.js

@@ -492,10 +492,11 @@ const Carousel = (($) => {
     .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
 
   $(window).on(Event.LOAD_DATA_API, () => {
-    $(Selector.DATA_RIDE).each(function () {
-      const $carousel = $(this)
+    const carousels = [].slice.call(document.querySelectorAll(Selector.DATA_RIDE))
+    for (let i = 0, len = carousels.length; i < len; i++) {
+      const $carousel = $(carousels[i])
       Carousel._jQueryInterface.call($carousel, $carousel.data())
-    })
+    }
   })
 
   /**

js/src/collapse.js

@@ -72,11 +72,14 @@ const Collapse = (($) => {
         `[data-toggle="collapse"][href="#${element.id}"],` +
         `[data-toggle="collapse"][data-target="#${element.id}"]`
       ))
-      const tabToggles = $(Selector.DATA_TOGGLE)
-      for (let i = 0; i < tabToggles.length; i++) {
-        const elem = tabToggles[i]
+      const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
+      for (let i = 0, len = toggleList.length; i < len; i++) {
+        const elem = toggleList[i]
         const selector = Util.getSelectorFromElement(elem)
-        if (selector !== null && $(selector).filter(element).length > 0) {
+        const filterElement = [].slice.call(document.querySelectorAll(selector))
+          .filter((foundElem) => foundElem === element)
+
+        if (selector !== null && filterElement.length > 0) {
           this._selector = selector
           this._triggerArray.push(elem)
         }
@@ -123,11 +126,9 @@ const Collapse = (($) => {
       let activesData
 
       if (this._parent) {
-        actives = $.makeArray(
-          $(this._parent)
-            .find(Selector.ACTIVES)
-            .filter(`[data-parent="${this._config.parent}"]`)
-        )
+        actives = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES))
+          .filter((elem) => elem.getAttribute('data-parent') === this._config.parent)
+
         if (actives.length === 0) {
           actives = null
         }
@@ -216,12 +217,13 @@ const Collapse = (($) => {
         .removeClass(ClassName.COLLAPSE)
         .removeClass(ClassName.SHOW)
 
-      if (this._triggerArray.length > 0) {
-        for (let i = 0; i < this._triggerArray.length; i++) {
+      const triggerArrayLength = this._triggerArray.length
+      if (triggerArrayLength > 0) {
+        for (let i = 0; i < triggerArrayLength; i++) {
           const trigger = this._triggerArray[i]
           const selector = Util.getSelectorFromElement(trigger)
           if (selector !== null) {
-            const $elem = $(selector)
+            const $elem = $([].slice.call(document.querySelectorAll(selector)))
             if (!$elem.hasClass(ClassName.SHOW)) {
               $(trigger).addClass(ClassName.COLLAPSED)
                 .attr('aria-expanded', false)

js/src/dropdown.js

@@ -333,8 +333,8 @@ const Dropdown = (($) => {
         return
       }
 
-      const toggles = $.makeArray($(Selector.DATA_TOGGLE))
-      for (let i = 0; i < toggles.length; i++) {
+      const toggles = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
+      for (let i = 0, len = toggles.length; i < len; i++) {
         const parent = Dropdown._getParentFromElement(toggles[i])
         const context = $(toggles[i]).data(DATA_KEY)
         const relatedTarget = {

js/src/modal.js

@@ -430,23 +430,26 @@ const Modal = (($) => {
       if (this._isBodyOverflowing) {
         // Note: DOMNode.style.paddingRight returns the actual value or '' if not set
         //   while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set
+        const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT))
+        const stickyContent = [].slice.call(document.querySelectorAll(Selector.STICKY_CONTENT))
+        const navbarToggler = [].slice.call(document.querySelectorAll(Selector.NAVBAR_TOGGLER))
 
         // Adjust fixed content padding
-        $(Selector.FIXED_CONTENT).each((index, element) => {
+        $(fixedContent).each((index, element) => {
           const actualPadding = $(element)[0].style.paddingRight
           const calculatedPadding = $(element).css('padding-right')
           $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
         })
 
         // Adjust sticky content margin
-        $(Selector.STICKY_CONTENT).each((index, element) => {
+        $(stickyContent).each((index, element) => {
           const actualMargin = $(element)[0].style.marginRight
           const calculatedMargin = $(element).css('margin-right')
           $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
         })
 
         // Adjust navbar-toggler margin
-        $(Selector.NAVBAR_TOGGLER).each((index, element) => {
+        $(navbarToggler).each((index, element) => {
           const actualMargin = $(element)[0].style.marginRight
           const calculatedMargin = $(element).css('margin-right')
           $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
@@ -461,7 +464,8 @@ const Modal = (($) => {
 
     _resetScrollbar() {
       // Restore fixed content padding
-      $(Selector.FIXED_CONTENT).each((index, element) => {
+      const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT))
+      $(fixedContent).each((index, element) => {
         const padding = $(element).data('padding-right')
         if (typeof padding !== 'undefined') {
           $(element).css('padding-right', padding).removeData('padding-right')

js/src/scrollspy.js

@@ -225,7 +225,8 @@ const ScrollSpy = (($) => {
         return
       }
 
-      for (let i = this._offsets.length; i--;) {
+      const offsetLength = this._offsets.length
+      for (let i = offsetLength; i--;) {
         const isActiveTarget = this._activeTarget !== this._targets[i] &&
             scrollTop >= this._offsets[i] &&
             (typeof this._offsets[i + 1] === 'undefined' ||
@@ -302,9 +303,10 @@ const ScrollSpy = (($) => {
    */
 
   $(window).on(Event.LOAD_DATA_API, () => {
-    const scrollSpys = $.makeArray($(Selector.DATA_SPY))
+    const scrollSpys = [].slice.call(document.querySelectorAll(Selector.DATA_SPY))
 
-    for (let i = scrollSpys.length; i--;) {
+    const scrollSpysLength = scrollSpys.length
+    for (let i = scrollSpysLength; i--;) {
       const $spy = $(scrollSpys[i])
       ScrollSpy._jQueryInterface.call($spy, $spy.data())
     }

js/src/util.js

@@ -82,8 +82,7 @@ const Util = (($) => {
       }
 
       try {
-        const $selector = $(document).find(selector)
-        return $selector.length > 0 ? selector : null
+        return document.querySelector(selector) ? selector : null
       } catch (err) {
         return null
       }