Home & blog  /  2010  /  Jun  /

How to: get the node index of an element

posted: 26 Jun '10 10:12 tags: siblings, index, Javascript, jQuery, how-to

Javascript has no in-built way of returning the node index of an element from amongst its siblings.

That is, if you have a

    of 5
  • s, and you click the second of them, how can you get JS to know it was the second?

    The trick is to count the node's previous siblings. If you count them then add one, you'll have the node index of your element. Here's a jQuery plugin for this:

    1jQuery.fn.nodeIndex = function() {

    2     return $(this).prevAll().length + 1;

    3};

    Here's how you'd use it:

    1$('ul#myUL li').click(function() {

    2     alert("You clicked

  • number "+$(this).nodeIndex());

    3});

This is a good opportunity to show just how much time and code frameworks like jQuery (motto: "write less, do more") can save. Here's the same thing in native Javascript:

1function nodeIndex(node) {

2     if (node && typeof node == 'object') {

3         var siblings = node.parentNode.childNodes;

4         var counter = 0;

5         for(var i=0; i

6             if (siblings[i].tagName != undefined)

7                 if (siblings[i] === node) break;

8             else

9                 counter++;

10         }

11         return counter;

12     }

13}

And to use this:

1var lis = document.getElementById('myUL').getElementsByTagName('li');

2for (var k=0; k

3     lis[k].onclick = function() {

4         alert(nodeIndex(this));

5     }

6}

The whole point of frameworks like jQuery is to automate industrial, utility tasks such as this.

post a comment

Match elements via REGEXP in jQuery

posted: 20 Jun '10 17:35 tags: REGEXP, jQuery, extension, Javascript

One of the odd omissions from jQuery's famous selectors is the ability to filter by regular expression. The usual work-around is to iteratively interrogate each chain element's text in a callback function inside .filter(), but this is a little clunky and feels unnecessasry.

Mitya to the rescue. I've just posted a plugin and core extension which allows precisely this, both via a pseudo selector, :regexp, and via a method, .regexp().

Head over here to download, get usage info or view a demo.

So for example, to use the pseudo selector:

$('selector:regexp(/pattern/)') //etc

or, to achieve the same effect with the method:

$(selector).regexp(/pattern/) //etc

Note that, to use the pseudo method, you'll need to double-escape any characters that need escaping. This is because you're specifying a REGEXP pattern inside a string.

post a comment
^^ top of page

GD barchart generator

posted: 18 Jun '10 13:26 tags: chart, statistics, PHP, GD

Just posted this in the script section. It's a script for generating bespoke barcharts. It's powered by PHP's superb GD library, which I've long loved using and which allows the creation of dynamic images via PHP.

Head over here to download, get usage info or view a demo.

The script gives you full control over how your chart looks, including the data displayed, the axis increments, the colours, font angle and much more.

post a comment
^^ top of page

Table sort - now REGEXP friendly

posted: 14 Jun '10 10:52 tags: table, sort, Javascript, jQuery, animation, REGEXP

Just modified my animated table sort plugin to allow sorting on a regular expression match against the content of each .

This would be hugely useful if, say, you had a table showing product categories and, for each, the number of products therein, in brackets, e.g. "Lawnmowers (15)".

You can also specify an index of the returned matches array to use for the sort, in case your REGEXP pattern returns more than one match or specifies a sub-pattern.

Head over here to download, get usage info or view a demo.

post a comment
^^ top of page
older posts >