.addclass vs .css (v4)

Revision 4 of this benchmark created by missa on

Preparation HTML

<style>
  #navigation .menu ul { display: block; position: absolute; top: 27px; left: -9999px;
  margin-left: -91px; z-index: 999; width: 195px; padding: 15px 0 0 0; background:
  url('../images/menu_sub_top.png') 0 0 no-repeat; }

#navigation .menu ul.menu-visible {
left: 50%;
margin-left: -91px;
top: 36px;
}
</style>
<div id="header-wrapper">
  <div id="header">
    <a href="http://harol.mds/nl" title="Home" rel="home" id="logo">
    <img src="http://harol.mds/sites/default/themes/harol_theme/logo.png" alt="Home">
    </a>
    <div class="region region-header">
      <div id="block-menu-menu-toolbar-belgium-nl" class="block block-menu">
        <div class="content">
          <ul class="menu">
            <li class="first leaf">
              <a href="http://harol.mds/nl/documentation" title="">Downloads</a>
            </li>
            <li class="leaf">
              <a href="http://harol.mds/nl/faq" title="">FAQ</a>
            </li>
            <li class="leaf">
              <a href="http://harol.mds/nl/content/over-harol">Over Harol</a>
            </li>
            <li class="last leaf">
              <a href="http://harol.mds/nl/dealer-locator" title="">Zoek verkooppunt</a>
            </li>
          </ul>
        </div>
      </div>
      <div id="block-search-form" class="block block-search">
        <div class="content">
          <form action="/nl" method="post" id="search-block-form" accept-charset="UTF-8">
            <div>
              <div class="container-inline">
                <h2 class="element-invisible">
                  Search form
                </h2>
                <div class="form-item form-type-textfield form-item-search-block-form">
                  <label class="element-invisible" for="edit-search-block-form--2">
                    Zoeken
                  </label>
                  <input title="Enter the terms you wish to search for." type="text" id="edit-search-block-form--2"
                  name="search_block_form" value="" size="15" maxlength="128" class="form-text">
                </div>
                <div class="form-actions form-wrapper" id="edit-actions">
                  <input type="image" id="edit-submit" name="submit" value="Zoeken" src="http://harol.mds/sites/default/themes/harol_theme/images/button_search.png"
                  class="form-submit">
                </div>
                <input type="hidden" name="form_build_id" value="form-7o3ItT-SOZ0iICoWPGlIwYllOL9v_YOR1zp1-7bYQG4">
                <input type="hidden" name="form_id" value="search_block_form">
              </div>
            </div>
          </form>
        </div>
      </div>
      <div id="block-locale-language" class="block block-locale">
        <div class="content">
          <div class="active-language">
            <span class="active-language-left">
            </span>
            <span class="active-language-middle">
              België (NL)
            </span>
            <span class="active-language-right">
            </span>
          </div>
          <ul class="language-switcher-locale-url" style="display: none; ">
            <li class="nl-BE first active">
              <a href="http://harol.mds/nl" class="language-link active active">België (NL)</a>
            </li>
            <li class="fr-BE">
              <a href="http://harol.mds/fr" class="language-link">Belgique (FR)</a>
            </li>
            <li class="de-DE">
              <a href="http://harol.mds/de-DE" class="language-link">Deutschland (DE)</a>
            </li>
            <li class="fr-FR">
              <a href="http://harol.mds/fr-FR" class="language-link">France (FR)</a>
            </li>
            <li class="nl-NL">
              <a href="http://harol.mds/nl-NL" class="language-link">Nederland (NL)</a>
            </li>
            <li class="nl-HP">
              <a href="http://harol.mds/nl" class="language-link">Harol Projects (NL)</a>
            </li>
            <li class="fr-HP">
              <a href="http://harol.mds/fr" class="language-link">Harol Projects (FR)</a>
            </li>
            <li class="int last">
              <a href="http://harol.mds/int" class="language-link">International (EN)</a>
            </li>
            <div class="submenu_footer">
            </div>
          </ul>
        </div>
      </div>
    </div>
    <div id="navigation-wrapper">
      <div id="navigation">
        <div class="region region-nav">
          <div id="block-menu-block-7" class="block block-menu-block">
            <div class="content">
              <div class="menu-block-wrapper menu-block-7 menu-name-menu-menu-belgium-nl parent-mlid-0 menu-level-1">
                <ul class="menu">
                  <li class="first leaf menu-mlid-439">
                    <a href="http://harol.mds/nl/products">Oplossingen</a>
                  </li>
                  <li class="expanded menu-mlid-730">
                    <a href="http://harol.mds/nl/content/ons-advies" title="">Ons advies</a>
                    <ul class="menu">
                      <li class="first leaf menu-mlid-731">
                        <a href="http://harol.mds/nl/content/waarom-harol">Waarom Harol?</a>
                      </li>
                      <li class="leaf menu-mlid-732">
                        <a href="http://harol.mds/nl/content/fiscale-voordelen-en-premies">Fiscale voordelen en premies</a>
                      </li>
                      <li class="leaf menu-mlid-733">
                        <a href="http://harol.mds/nl/content/wetgeving-normeringen-en-epb" title="">Wetgeving normeringen en EPB</a>
                      </li>
                      <li class="leaf menu-mlid-734">
                        <a href="http://harol.mds/nl/content/onderhoudsadvies" title="">Onderhoudsadvies</a>
                      </li>
                      <li class="last leaf menu-mlid-735">
                        <a href="http://harol.mds/nl/content/bereid-uw-bezoek-voor" title="">Bereid uw bezoek voor</a>
                      </li>
                      <div class="submenu_footer">
                      </div>
                    </ul>
                  </li>
                  <li class="expanded menu-mlid-736">
                    <a href="http://harol.mds/nl/content/kwaliteit" title="">Kwaliteit</a>
                    <ul class="menu">
                      <li class="first leaf has-children menu-mlid-737">
                        <a href="http://harol.mds/nl/content/garantie" title="">Garantie</a>
                      </li>
                      <li class="leaf has-children menu-mlid-738">
                        <a href="http://harol.mds/nl/content/service" title="">Service</a>
                      </li>
                      <li class="leaf menu-mlid-739">
                        <a href="http://harol.mds/nl/content/onderscheidingen-en-certificaten" title="">Onderscheidingen en certificaten</a>
                      </li>
                      <li class="last leaf menu-mlid-740">
                        <a href="http://harol.mds/nl/content/milieu" title="">Milieu</a>
                      </li>
                      <div class="submenu_footer">
                      </div>
                    </ul>
                  </li>
                  <li class="expanded menu-mlid-408">
                    <a href="http://harol.mds/nl/content/inspiratie" title="">Inspiratie</a>
                    <ul class="menu">
                      <li class="first last leaf menu-mlid-701">
                        <a href="http://harol.mds/nl/realizations" title="">Realisaties</a>
                      </li>
                      <div class="submenu_footer">
                      </div>
                    </ul>
                  </li>
                  <li class="last expanded menu-mlid-725">
                    <a href="http://harol.mds/nl/content/actueel" title="">Actueel</a>
                    <ul class="menu">
                      <li class="first leaf menu-mlid-726">
                        <a href="http://harol.mds/nl/events" title="">Beurzen en activiteiten</a>
                      </li>
                      <li class="leaf menu-mlid-748">
                        <a href="http://harol.mds/nl/content/links" title="">Links</a>
                      </li>
                      <li class="leaf menu-mlid-749">
                        <a href="http://harol.mds/nl/news" title="">Nieuws</a>
                      </li>
                      <li class="last leaf has-children menu-mlid-750">
                        <a href="http://harol.mds/nl/content/pers" title="">Pers</a>
                      </li>
                      <div class="submenu_footer">
                      </div>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <div class="menu-block-footer">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
css
$('#navigation .menu li').find('ul').css('left', '50%');
$('#navigation .menu li').find('ul').css('margin-left', '-91px');
$('#navigation .menu li').find('ul').css('top', '36px');
ready
linked css
$('#navigation .menu li').find('ul').css('left', '50%').css('margin-left', '-91px').css('top', '36px');
ready
css array
$('#navigation .menu li').find('ul').css({'left': '50%', 'margin-left': '-91px', 'top': '36px'});
ready
addclass
$('#navigation .menu li').find('ul').addClass('menu-visible');
ready
css with each
$('#navigation .menu li').find('ul').each(function() {
  $(this).css('left', '50%');
  $(this).css('margin-left', '-91px');
  $(this).css('top', '36px');
});
ready
linked css with each
$('#navigation .menu li').find('ul').each(function() {
  $(this).css('left', '50%').css('margin-left', '-91px').css('top', '36px');
});
ready
without find
$('#navigation .menu li ul').addClass('menu-visible');
ready
without find weird
$('#navigation .menu li' + ' ul').addClass('menu-visible');
ready
linked CSS
$('#navigation .menu li ul').css('left', '50%').css('margin-left', '-91px').css('top', '36px');
ready
CSS Array
$('#navigation .menu li ul').css({'left':'50%','margin-left': '-91px','top':'36px'});
ready
multiple .css
$('#navigation .menu li ul').css('left', '50%');
$('#navigation .menu li ul').css('margin-left', '-91px');
$('#navigation .menu li ul').css('top', '36px');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.