Run results for: Test Select Widget2

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser: Firefox 121

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Before refactor	2089.9 Ops/sec
After refactor	2187.7 Ops/sec

HTML Preparation code:

<div class="select-widget store">
    <div class="select-widget-loading">
      <img class="img-responsive" src="https://op-notify.carrefour.fr/fr/carrefour/b_plateformeagriculteurs2021_14122020dev/public/images/rolling_loading.gif" />
    </div>
    <div class="select-widget-head">
        <span data=""><em>Magasin</em> <i class="fa fa-angle-down"></i></span>
        <input type="text" placeholder="search" />
        <i class="fa fa-angle-up"></i>
    </div>
    <div class="select-widget-body">
        <span class="_default" data="">Magasin</span>
        <span data="1" class="inactive"><em>#1</em> Market Ambert<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="2" class="active"><em>#2</em> Market Lezoux<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="3" class="active"><em>#3</em> Carrefour Angers<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="4" class="inactive"><em>#4</em> Store 04<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="5" class="inactive"><em>#5</em> Store 05<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="6" class="active"><em>#6</em> Store 06<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="7" class="active"><em>#7</em> Store 07<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="8" class="active"><em>#8</em> Store 08<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="9" class="inactive"><em>#9</em> Store 09<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="10" class="active"><em>#10</em> Store 10<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="750" class="inactive"><em>#750</em> hey<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="751" class="inactive"><em>#751</em> Test Store 02<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="752" class="active"><em>#752</em> Test Store 03<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="753" class="inactive"><em>#753</em> Test Store 04<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="754" class="active"><em>#754</em> Test Store 05<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="991" class="inactive"><em>#991</em> Store 01<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="992" class="active"><em>#992</em> Store 02<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="993" class="inactive"><em>#993</em> Store 03<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js'></script>

Script Preparation code:

function setSelectWidget() {
  var self = this;

  $(".select-widget").click(function() {
    if (!$(this).hasClass("active")) {
      $(".select-widget.active").removeClass("active");

      $(this).addClass("active");

      $(this).find(".fa-angle-up").unbind();
      $(this).find(".fa-angle-up").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().removeClass("active");
        $(this).parent().find("input").val("");
        $(this).parent().parent().find(".select-widget-body span").show();
      });

      $(this).find("input").keyup(function() {
        var val = $(this).val().toString().toLowerCase();

        $(this).parent().parent().find(".select-widget-body > span").each(function() {
          var data = $(this).text().toString().toLowerCase();

          if (data.search(val) < 0)
            $(this).hide();
          else
            $(this).show();
        });
      });

      $(this).find(".select-widget-body > span").unbind();
      $(this).find(".select-widget-body > span").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().find(".select-widget-head > span > em").text($(this).text().replace('-+', ''));
        $(this).parent().parent().find(".select-widget-head > span").attr("data", $(this).attr("data"));
        $(this).parent().parent().removeClass("active");

        $(this).parent().parent().find(".select-widget-head input").val("");
        $(this).parent().find("span").show();
        $(this).parent().find('span').removeClass('active').removeClass('inactive');
        $(this).addClass('active');

        //self.selectChanged($(this).parent().parent().attr("class").replace("select-widget", "").trim());
      });

      $(this).find(".select-widget-body > span > em._btn.plus").unbind();
      $(this).find(".select-widget-body > span > em._btn.plus").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().parent().find(".select-widget-head > span > em").text($(this).parent().parent().parent().find(".select-widget-body > span").first().text().replace('-+', ''));
        $(this).parent().parent().parent().find(".select-widget-head > span").attr("data", $(this).parent().parent().parent().find(".select-widget-body > span").first().attr("data"));
        $(this).parent().parent().parent().find(".select-widget-head input").val("");

        if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length || $(this).parent().parent().parent().find(".select-widget-body > span.inactive").length) {
          if (!$(this).parent().hasClass('active')) {
            if ($(this).parent().hasClass('inactive')) {
              if ($(this).parent().parent().parent().find(".select-widget-body > span.inactive").length == 1) {
                $(this).parent().parent().parent().find(".select-widget-body > span.active").removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span.inactive").removeClass('inactive');
              } else
                $(this).parent().removeClass('inactive').addClass('active');
            } else {
              if ($(this).parent().parent().find('span._default').hasClass('active')) {
                $(this).parent().parent().find('span._default').removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span").addClass('inactive');
              }

              $(this).parent().removeClass('inactive').addClass('active');
              $(this).parent().parent().parent().find(".select-widget-body > span").not('.active').addClass('inactive');
            }
          }
        } else {
          $(this).parent().parent().parent().find(".select-widget-body > span").addClass('inactive');
          $(this).parent().removeClass('inactive').addClass('active');
        }

        $(this).parent().parent().parent().find(".select-widget-body > span._default").removeClass('active').removeClass('inactive');

        if (!$(this).parent().parent().parent().find(".select-widget-body > span.active").length && !$(this).parent().parent().parent().find(".select-widget-body > span.inactive").length)
          $(this).parent().parent().parent().find(".select-widget-body > span._default").addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });

      $(this).find(".select-widget-body > span > em._btn.minus").unbind();
      $(this).find(".select-widget-body > span > em._btn.minus").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().parent().find(".select-widget-head > span > em").text($(this).parent().parent().parent().find(".select-widget-body > span").first().text().replace('-+', ''));
        $(this).parent().parent().parent().find(".select-widget-head > span").attr("data", $(this).parent().parent().parent().find(".select-widget-body > span").first().attr("data"));
        $(this).parent().parent().parent().find(".select-widget-head input").val("");

        if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length || $(this).parent().parent().parent().find(".select-widget-body > span.inactive").length) {
          if (!$(this).parent().hasClass('inactive')) {
            if ($(this).parent().hasClass('active')) {
              if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length == 1) {
                $(this).parent().parent().parent().find(".select-widget-body > span.active").removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span.inactive").removeClass('inactive');
              } else
                $(this).parent().removeClass('active').addClass('inactive');
            } else {
              if ($(this).parent().parent().find('span._default').hasClass('active')) {
                $(this).parent().parent().find('span._default').removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span").addClass('active');
              }

              $(this).parent().removeClass('active').addClass('inactive');
              $(this).parent().parent().parent().find(".select-widget-body > span").not('.inactive').addClass('active');
            }
          }
        } else {
          $(this).parent().parent().parent().find(".select-widget-body > span").addClass('active');
          $(this).parent().removeClass('active').addClass('inactive');
        }

        $(this).parent().parent().parent().find(".select-widget-body > span._default").removeClass('active').removeClass('inactive');

        if (!$(this).parent().parent().parent().find(".select-widget-body > span.active").length && !$(this).parent().parent().parent().find(".select-widget-body > span.inactive").length)
          $(this).parent().parent().parent().find(".select-widget-body > span._default").addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });
    }
  });
}

function setSelectWidget2() {
  var self = this;

  $(".select-widget").click(function() {
    var $selectWidget = $(this);

    if (!$selectWidget.hasClass("active")) {
      $(".select-widget.active").removeClass("active");

      var $selectWidgetHead = $selectWidget.find(".select-widget-head");
      var $selectWidgetBody = $selectWidget.find(".select-widget-body");
      var $closeIcon = $selectWidgetHead.find("i.fa-angle-up");
      var $searchInput = $selectWidgetHead.find("input");
      var $selectWidgetHeadItems = $selectWidgetHead.children("span");
      var $selectWidgetHeadItemsKeys = $selectWidgetHeadItems.children("em");
      var $selectWidgetBodyItems = $selectWidgetBody.children("span");
      var $selectWidgetBodyDefaultItem = $selectWidgetBodyItems.filter("._default");
      var $selectWidgetBodyItemsKeys = $selectWidgetBodyItems.children("em");
      var $selectWidgetBodyAddItemBtn = $selectWidgetBodyItemsKeys.filter(".plus");
      var $selectWidgetBodyRemoveItemBtn = $selectWidgetBodyItemsKeys.filter(".minus");

      $selectWidget.addClass("active");

      $closeIcon.off("click").on("click", function(e) {
        e.stopPropagation();

        $selectWidget.removeClass("active");
        $searchInput.val("");
        $selectWidgetBodyItems.show();
      });

      $searchInput.keyup(function() {
        var val = $(this).val().toString().toLowerCase();

        $selectWidgetBodyItems.each(function() {
          var data = $(this).text().toString().toLowerCase();

          if (data.search(val) < 0)
            $(this).hide();
          else
            $(this).show();
        });
      });

      $selectWidgetBodyItems.off("click").on("click", function(e) {
        e.stopPropagation();

        $selectWidgetHeadItems.children("em").text($(this).text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $(this).attr("data"));
        $selectWidgetBody.removeClass("active");

        $searchInput.val("");
        $selectWidgetBodyItems.show().removeClass('active inactive');
        $(this).addClass('active');

        //self.selectChanged($(this).parent().parent().attr("class").replace("select-widget", "").trim());
      });

      $selectWidgetBodyAddItemBtn.off("click").on("click", function(e) {
        e.stopPropagation();

        var $currentItem = $(this).parent();
        var $activeItems = $selectWidgetBodyItems.filter(".active");
        var $inactiveItems = $selectWidgetBodyItems.filter(".inactive");

        var activeItemsLength = $activeItems.length;
        var inactiveItemsLength = $inactiveItems.length;

        $selectWidgetHeadItemsKeys.text($selectWidgetBodyItems.first().text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $selectWidgetBodyItems.first().attr("data"));
        $searchInput.val("");

        if (activeItemsLength || inactiveItemsLength) {
          if (!$currentItem.hasClass('active')) {
            if ($currentItem.hasClass('inactive')) {
              if (inactiveItemsLength == 1) {
                $activeItems.removeClass('active');
                $inactiveItems.removeClass('inactive');
              } else
                $currentItem.removeClass('inactive').addClass('active');
            } else {
              if ($selectWidgetBodyDefaultItem.hasClass('active')) {
                $selectWidgetBodyDefaultItem.removeClass('active');
                $selectWidgetBodyItems.addClass('inactive');
              }

              $currentItem.removeClass('inactive').addClass('active');
              $selectWidgetBodyItems.not('.active').addClass('inactive');
            }
          }
        } else {
          $selectWidgetBodyItems.addClass('inactive');
          $currentItem.removeClass('inactive').addClass('active');
        }

        $selectWidgetBodyDefaultItem.removeClass('active inactive');

        if (!activeItemsLength && !inactiveItemsLength)
          $selectWidgetBodyDefaultItem.addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });

      $selectWidgetBodyRemoveItemBtn.off("click").on("click", function(e) {
        e.stopPropagation();

        var $currentItem = $(this).parent();
        var $activeItems = $selectWidgetBodyItems.filter(".active");
        var $inactiveItems = $selectWidgetBodyItems.filter(".inactive");

        var activeItemsLength = $activeItems.length;
        var inactiveItemsLength = $inactiveItems.length;

        $selectWidgetHeadItemsKeys.text($selectWidgetBodyItems.first().text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $selectWidgetBodyItems.first().attr("data"));
        $searchInput.val("");

        if (activeItemsLength || inactiveItemsLength) {
          if (!$currentItem.hasClass('inactive')) {
            if ($currentItem.hasClass('active')) {
              if (activeItemsLength == 1) {
                $activeItems.removeClass('active');
                $inactiveItems.removeClass('inactive');
              } else
                $currentItem.removeClass('active').addClass('inactive');
            } else {
              if ($selectWidgetBodyDefaultItem.hasClass('active')) {
                $selectWidgetBodyDefaultItem.removeClass('active');
                $selectWidgetBodyItems.addClass('active');
              }

              $currentItem.removeClass('active').addClass('inactive');
              $selectWidgetBodyItems.not('.inactive').addClass('active');
            }
          }
        } else {
          $selectWidgetBodyItems.addClass('active');
          $currentItem.removeClass('active').addClass('inactive');
        }

        $selectWidgetBodyDefaultItem.removeClass('active inactive');

        if (!activeItemsLength && !inactiveItemsLength)
          $selectWidgetBodyDefaultItem.addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });
    }
  });
}

Tests:

Before refactor
setSelectWidget(); $('.select-widget.stores').click(); $('.select-widget-body span[data="750"]').click(); $('.select-widget-body span[data="751"] > ._plus').click(); $('.select-widget-body span[data="10"] > ._minus').click(); $('.select-widget-head .fa-angle-up').click();
After refactor
setSelectWidget2(); $('.select-widget.stores').click(); $('.select-widget-body span[data="750"]').click(); $('.select-widget-body span[data="751"] > ._plus').click(); $('.select-widget-body span[data="10"] > ._minus').click(); $('.select-widget-head .fa-angle-up').click();

Run results for: Test Select Widget2

Before refactor

After refactor