Tag Archives: selector

Using a jQuery selector on an ID containing a Pipe (|) Character Programming 24 FEB 2012

I’m quite fond of using the pipe (|) character in tag, id and name properties because it just seems visually such a great delimiter to use when stuffing a string full of useful information to be extracted via splitting or exploding at a later stage.

However, here’s a nasty one which you might not be aware of – jQuery selectors do in fact no enjoy special characters like the pipe ‘|’ – for the very reason that it’s a special character!

So running a selector on an ID which contains a | in the normal fashion will fail (i.e. not find anything):


To get around identifiers that use special characters like our friend the |, you need to delimit it so:


And now you know! :)

jQuery DataTables: How to destroy a DataTable instance CodeUnit 16 MAY 2011

I really do love the awesome DataTable plugin which creates useful dynamic, with oodles of extra functionality, tables out of plain old vanilla HTML tables. Today’s quick tip however looks at how one destroys an already instantiated DataTable instance, say because you want to recreate it at a later stage in a completely different format but want to reuse the selector currently bound to the existing table.

Enter the useful bDestroy option which you can add to your constructor. Given this option set to true, DataTables with first brutally murder any existing elements attached to the selected selector before recreating the desired DataTable. If no existing table is found attached to the given selector, then the DataTable is created as it normally would.

An example:

$(document).ready(function() {
	$('#example').dataTable( {
	} );
	/* Some time later.... */
	$('#example').dataTable( {
		"bDestroy": true
	} );
} );

Simple and very useful. In other words, nifty.

Related Link: http://www.datatables.net/usage/options

jQuery: How to Locate the Selected Radio Button out of a Group of Radio Buttons CodeUnit 13 MAY 2011

If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript!

Radio buttons are pretty awesome when you need to ensure that a user has picked ONE of the given options presented to them, and using jQuery, it turns out to be a pretty simple affair to determine and manipulate exactly which radio button is currently selected from the group.

An example:

/* Your HTML...
<input type="radio" name="sample" value="1" />
<input type="radio" name="sample" value="2" checked="checked" />
<input type="radio" name="sample" value="3" />

    // displays the selected radio button in an alert box

The above will correctly select the selected radio button Sample 2 and will alert its value of… well 2.

The ‘input[name=sample]:checked’ jQuery selector is guaranteed to return us a result and of course, this result can be manipulated in which ever way you would like, as with any other jQuery selected DOM object.


jQuery: Bind Multiple Different Elements to a Function CodeUnit 09 AUG 2010

The question for today is how to bind a single function to multiple different elements (in other words, elements with either different classes or IDs) in a single call.

Well actually, this is remarkably simple, but only because I JUST discovered that since day 1, jQuery supports the concept of a multiple selector!

Simply put, you can specify as many selectors as you want to in the standard format, though you are delimiting them with a comma, and jQuery will then combine the results returned by the multiple selections into a single result set.

(Note: another way to achieve this multiple selection is by using the combinator .add() method)

An example of this in the wild could be:


Nifty. You learn something new every day! :)

Related Link: http://api.jquery.com/multiple-selector/

Getting the First Object Returned by a jQuery Selector CodeUnit 04 MAR 2010

If for instance you have just used a jQuery selector to grab a whole lot of objects and now realize that in actual fact you only want to effect the first object that the selector returned to you, you can rest easy in the knowledge that jQuery as per usual has you covered.

Now jQuery 1.4 has gone and simplified the logic for us by supplying us with a function neatly named first(), which when in action looks something like this:


However, if you are not up and running on the 1.4 library just yet, there is an older way of doing this, using either the built in selector :first or by making use of the specific object selector function, namely eq().

Using the built in selector method, your code would look like this:

$(‘li :first’)

On the other hand, using the eq() function will leave you with this:

$(‘li’).eq(0) … (where 0 is basically the beginning index of the returned object array)

In any event, using either one of these three methods will result in jQuery returning only one object, namely the first object it encountered when applying the initial selector value.


jQuery: Detect if Selector Returns a Result Programming 04 JUL 2009

The easiest way to check as to whether or not your jQuery selector is returning a value is to remember that the selector is simply returning an array of jQuery objects. If no matching elements are found it simply returns an empty array.

Which of course then means that you can either check the length or size() of the returned value to ensure that it is greater than 0, indicating that your selector has successfully matched on your search request.

In other words:

if $(‘#selectMyElement’).length > 0 returns true, then you know you’ve got a hit!

picking up a peach