Cut Out The jQuery Middle Man

Benchmark created by Matt Stow on November 10, 2014

Description

Preparation HTML

<a href="#jquery" id="jquery-link-id1" class="jquery-link-class">jQuery Link 1</a>
<a href="#jquery" id="jquery-link-id2" class="jquery-link-class">jQuery Link 2</a>
<a href="#jquery" id="jquery-link-id3" class="jquery-link-class">jQuery Link 3</a>
<a href="#jquery" id="jquery-link-id4" class="jquery-link-class">jQuery Link 4</a>
<a href="#jquery" id="jquery-link-id5" class="jquery-link-class">jQuery Link 5</a>
<br />
<input type="text" name="jquery-input-name1" class="jquery-input-class" value="jQuery Input 1" />
<input type="text" name="jquery-input-name2" class="jquery-input-class" value="jQuery Input 2" />
<input type="text" name="jquery-input-name3" class="jquery-input-class" value="jQuery Input 3" />
<input type="text" name="jquery-input-name4" class="jquery-input-class" value="jQuery Input 4" />
<input type="text" name="jquery-input-name5" class="jquery-input-class" value="jQuery Input 5" />

<hr />

<a href="#vanilla" id="vanilla-link-id1" class="vanilla-link-class">Vanilla Link 1</a>
<a href="#vanilla" id="vanilla-link-id2" class="vanilla-link-class">Vanilla Link 2</a>
<a href="#vanilla" id="vanilla-link-id3" class="vanilla-link-class">Vanilla Link 3</a>
<a href="#vanilla" id="vanilla-link-id4" class="vanilla-link-class">Vanilla Link 4</a>
<a href="#vanilla" id="vanilla-link-id5" class="vanilla-link-class">Vanilla Link 5</a>
<br />
<input type="text" name="vanilla-input-name1" class="vanilla-input-class" value="Vanilla Input 1" />
<input type="text" name="vanilla-input-name2" class="vanilla-input-class" value="Vanilla Input 2" />
<input type="text" name="vanilla-input-name3" class="vanilla-input-class" value="Vanilla Input 3" />
<input type="text" name="vanilla-input-name4" class="vanilla-input-class" value="Vanilla Input 4" />
<input type="text" name="vanilla-input-name5" class="vanilla-input-class" value="Vanilla Input 5" />

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

Setup

var $jqueryLinks = $('.jquery-link-class');
    var $jqueryInputs = $('.jquery-input-class');
    var $vanillaLinks = $('.vanilla-link-class');
    var $vanillaInputs = $('.vanilla-input-class');

Test runner

$jqueryLinks.each(function(index) {
  var $this = $(this);
  var href = $this.attr('href');
  var id = $this.attr('id');
  $this.attr('data-id', id);
  $this.css('color', 'red');
  $this.html('Replaced jQuery Link ' + (index + 1));
});

$jqueryInputs.each(function(index) {
  var $this = $(this);
  var name = $this.attr('name');
  var value = $this.attr('value');
  var type = $this.attr('type');
  $this.attr('data-value', value);
  $this.css('background-color', 'yellow');
  $this.val('Replaced jQuery Input ' + (index + 1));
});

$vanillaLinks.each(function(index) {
  var $this = $(this);
  var href = this.href;
  var id = this.id;
  this.setAttribute('data-id', id);
  this.style.color = 'red';
  $this[0].innerHTML = 'Replaced Vanilla Link ' + (index + 1);
});

$vanillaInputs.each(function(index) {
  var $this = $(this);
  var name = this.name;
  var value = this.value;
  var type = this.getAttribute('type');
  this.setAttribute('data-value', value);
  this.style.backgroundColor = 'yellow';
  $this[0].value = 'Replaced Vanilla Input ' + (index + 1);
});

Revisions

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

• Revision 1: published by Matt Stow on November 10, 2014