JQuery ElementTraversal implementation
Table of Contents
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 Queen of Hearts, she made some tarts,
2All on a summer day;
3The Knave of Hearts, he stole those tarts
4And took them quite away!"
- 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.
"The Queen of Hearts, she made some tarts,
2All on a summer day;
3The Knave of Hearts, he stole those tarts
4And took them quite away!"
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;
});
A. References
- [ElementTraversal]
- Element Traversal Specification, Doug Schepers, Robin Berjon. World Wide Web Consortium, 22 December 2008. The Element Traversal Specification Recommendation.