I've decided to start writing a short series of posts highlighting some common mistakes I see in questions and, more importantly, answers on Stack Overflow. I enter this knowing fully well that I am but an amateur who is also learning new things daily. Anyway, the series kicks off with Part Zero, titled 83.333% of jQuery.

This is actually one of my biggest pet peeves in reading jQuery related information, whether it's questions or answers on SO, or in numerous blogs or articles. It's such a common occurrence that I found myself shouting at the screen whenever I saw it:

83.333% of jQuery is Query.

The one thing you must always remember is that jQuery is a query tool. Sure it's not just that any more, but it was born from inspiration taken from my previous-favourite javascript library, Behaviour (now defunct, but written by Ben Nolan).

It seems like a lot people get into jQuery by reading a "Top 20 Best Ever Amazing Useful jQuery Plugins Of All Time" list, where the only code they provide is this:

$('#yourElement').doSomethingAwesome();

...and they really don't realise the massive power sitting right in front of them in the selectors and traversal functions. Here's an example of what I mean:

<ul class="nav" id="nav">
    <li id="list1">
        <a href="#" id="link1">Toggle</a>
        <div class="submenu">
            ...
        </div>
    </li>
    <li id="list2">
        <a href="#" id="link2">Toggle</a>
        <div class="submenu">
            ...
        </div>
    </li>
</ul>

This is naturally followed with inexplicable code like this:

$('#link1').click(function() {
    $('#list1').addClass('active');
    $('#list2').removeClass('active');
    $('#link1').next('div.submenu').show();
});
$('#link2').click( /* etc... */ )

Here's my rule of thumb: for each behaviour you're writing, if you use more than one id selector, you're doing it wrong. Ids should be used only as an entry, as a front door to the house which is your HTML. From there, you can use intelligent selections and traversals to get everything you want. Here's how I'd rewrite the HTML above, assuming there was only ever going to be one menu:

<ul id="nav">
    <li>
        <a href="#">Toggle</a>
        <div> ... </div>
    </li>
    <li>
        <a href="#">Toggle</a>
        <div> ... </div>
    </li>
</ul>

That's right: every single one of the ids and classes (except for the front door) were completely redundant and unneeded (get it? ah, nevermind.)

Along with the much cleaner HTML comes much cleaner jQuery:

$('#nav a').click(function() {
    $(this)
        .next()
        .show()
        .closest('li')
        .addClass('active')
        .siblings('.active')
        .removeClass('active')
    ;
    return false;
});

This is just an example, and not actually tested and functioning code, but with a very few changes, this tiny snippet would provide all the behavioural code needed for nested menus to any depth, without a single class or id being added anywhere else.

If your HTML is littered with ids for the sake of javascript, please take another look at it. Is there any other way you could select or traverse your way to that element? If the only selectors you are writing start with a hash, then you're not using jQuery to it's potential. By my reckoning, you're only at about 16.667%.