JQuery ElementTraversal implementation

Table of Contents

1. About
2. Download
3. Examples
   1. Basic usage
   2. Using the API within scripts
4. References

1. About

This page presents a jQuery implementation of the Element Traversal Specification published at the end of 2008 as a W3C Recommendation. Concretely, this implementation makes the ElementTraversal API available into browsers when the plugin is loaded.

John Resig has presented on his blog a complementary plugin that replaces the internals of the existing jQuery .prev(), .next(), .prevAll(), .nextAll(), .siblings(), and .children() methods with the Element Traversal API methods.

Please send feedback and comments to Xavier Lacot - <xavier [at] lacot.org>.

2. Download

The implementation is availabe as a jQuery plugin: jquery.element-traversal.js

3. Examples

3.1. Basic usage

This example displays four lines taken from the novel Alice's Adventures in Wonderland:

• The firstElementChild attribute for the #example element has the value
• The firstElementChild attribute for the #inexistant element has the value
• The lastElementChild attribute for the #example element has the value
• The childElementCount attribute for the #example element has the value
• The childElementCount attribute for the #inexistant element has the value
• The previousElementSibling attribute before the #line3 element has the value
• The nextElementSibling attribute after the #line3 element has the value
• The previousElementSibling attribute before the #line1 element has the value
• The nextElementSibling attribute after the #line4 element has the value

Here is the HTML code for this example:

<div id="example">

  1 <p id="line1">"The <em>Queen of Hearts</em>, she made some tarts,</p>
  2 <p id="line2">All on a summer day;</p>
  3 <p id="line3">The <em>Knave of Hearts</em>, he stole those tarts</p>

  4 <p id="line4">And took them quite away!"</p>
</div>

3.2. Using the API within scripts

The W3C Recommendation about the Element Traversal Specification gives some examples. One of these examples has been ported to the jQuery syntax, and you may want to test it by clicking on this link: test the Element Traversal API.

function spaceChildren(el) {
  // get count of element nodes
  var elCount = el.childElementCount();
  var eachWidth = window.innerWidth / (elCount + 1);

  // get first child element
  var childEl = el.firstElementChild();

  // set initial position
  var nextPos = eachWidth/2;

  // step through child elements one by one
  while (childEl) {
    // position child
    childEl.css('position', 'absolute', '');
    childEl.css('left', nextPos + 'px', '');
    childEl.css('width', eachWidth - 50 + 'px', '');

    // increment position by width
    nextPos += eachWidth;

    // then navigate to next child element
    childEl = childEl.nextElementSibling();
  }
}

$('#test-button').click(function() {
  $("#example2").each(function() {
    spaceChildren($(this));
  });

  return false;
});

4. References

[ElementTraversal]

Element Traversal Specification, Doug Schepers, Robin Berjon. World Wide Web Consortium, 22 December 2008. The Element Traversal Specification Recommendation.