Click here to Skip to main content
13,450,606 members (57,814 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


5 bookmarked
Posted 9 Jun 2014

jQuery Selector Tester and Cheat Sheet

, 9 Jun 2014
Rate this:
Please Sign up or sign in to vote.
I've always appreciated these tools: Expresso and XPath Builder. They make designing regular expressions and XPath selectors almost fun! Did I say fun? I meant less painful.

I've always appreciated these tools: Expresso and XPath Builder. They make designing regular expressions and XPath selectors almost fun! Did I say fun? I meant less painful. Being able to paste/load text and then interactively play with the search criteria is infinitely better than the code/compile/run/test cycle. It's faster and you get a much better feel for how the expressions work.

So, I decided to make my own interactive tool to test jQuery selectors:  jQuery Selector Tester 

Here's a sneak peek:

Note: There are some existing tools you may like better:,%23choose

My tool is different:

  • It is one page. You can save it and run it locally without a Web Server.
  • It shows the results as a list of iterated objects instead of highlighted html.
  • A cheat sheet is on the same page as the tester which is handy.

I couldn't upload an .htm or .html file to this site so I hosted it on my personal site here: jQuery Selector Tester.

Design Highlights:

To make the interactive search work, I added a hidden div to the page:

<span style="COLOR: green"><!--Hidden div holds DOM elements for jQuery to search--></span>
<span style="COLOR: blue"><</span><span style="COLOR: #a31515">div</span> <span style="COLOR: red">id</span><span style="COLOR: blue">="HiddenDiv"</span> <span style="COLOR: red">style</span><span style="COLOR: blue">="</span><span style="COLOR: red">display</span>: <span style="COLOR: blue">none"></span>
<span style="COLOR: blue"></</span><span style="COLOR: #a31515">div</span><span style="COLOR: blue">></span> 

When ready to search, the searchable html text is copied into the hidden div…this renders the DOM tree in the hidden div:

<span style="COLOR: green">// get the html to search, insert it to the hidden div</span>
<span style="COLOR: blue">var</span> Html = $(<span style="COLOR: #a31515">"#TextAreaHTML"</span>).val();
$(<span style="COLOR: #a31515">"#HiddenDiv"</span>).html(Html);

<!--EndFragment--> When doing a search, I modify the search pattern to look only in the HiddenDiv. To do that, I put a space between the patterns.  The space is the Ancestor operator (see the Cheat Sheet):

<span style="COLOR: green">// modify search string to only search in our</span>
<span style="COLOR: green">// hidden div and do the search</span>
<span style="COLOR: blue">var</span> SearchString = <span style="COLOR: #a31515">"#HiddenDiv "</span> + SearchPattern;
<span style="COLOR: blue">try</span>
    <span style="COLOR: blue">var</span> $FoundItems = $(SearchString);

<!--EndFragment-->Big Fat Stinking Faux Pas:

I was about to publish this article when I made a big mistake: I tested the tool with Mozilla FireFox. It blowed up…it blowed up real good. In the past I’ve only had to target IE so this was quite a revelation.

When I started to learn JavaScript, I was disgusted to see all the browser dependent code. Who wants to spend their time testing against different browsers and versions of browsers? Adding a bunch of ‘if-else’ code is a tedious and thankless task. I avoided client code as much as I could.

Then jQuery came along and all was good. It was browser independent and freed us from the tedium of worrying about version N of the Acme browser.

Right? Wrong!

I had used outerHTML to display the selected elements. The problem is Mozilla FireFox doesn’t implement outerHTML.

I replaced this:

<span style="COLOR: green">// encode the html markup</span>
<span style="COLOR: blue">var</span> OuterHtml = $(<span style="COLOR: #a31515">'<div/>'</span>).text(<span style="COLOR: blue">this</span>.outerHTML).html();

With this:

<span style="COLOR: green">// encode the html markup</span>
<span style="COLOR: blue">var</span> Html = $(<span style="COLOR: #a31515">'<div>'</span>).append(<span style="COLOR: blue">this</span>).html();
<span style="COLOR: blue">var</span> OuterHtml = $(<span style="COLOR: #a31515">'<div>'</span>).text(Html).html();
Another problem was that Mozilla FireFox doesn’t implement srcElement.
I replaced this:
<span style="COLOR: blue">var</span> Row = e.srcElement.parentNode; 
With this:
<span style="COLOR: blue">var</span> Row =;
Another problem was the indexing. The browsers have different ways of indexing.
I replaced this:
<span style="COLOR: green">// this cell has the search pattern  </span>
<span style="COLOR: blue">var</span> Cell = Row.childNodes[1];  
<span style="COLOR: green">// put the pattern in the search box and search                    </span>
$(<span style="COLOR: #a31515">"#TextSearchPattern"</span>).val(Cell.innerText);
 With this:
<span style="COLOR: green">// get the correct cell and the text in the cell</span>
<span style="COLOR: green">// place the text in the seach box and serach</span>
<span style="COLOR: blue">var</span> Cell = $(Row).find(<span style="COLOR: #a31515">"TD:nth-child(2)"</span>);
<span style="COLOR: blue">var</span> CellText = Cell.text();
$(<span style="COLOR: #a31515">"#TextSearchPattern"</span>).val(CellText);
So much for the myth of browser independence. Was I overly optimistic and gullible? I don’t think so. And when I get my millions from the deposed Nigerian prince I sent money to, you’ll see that having faith is not futile.


My goal was to have a single standalone file. I tried to keep the features and CSS to a minimum–adding only enough to make it useful and visually pleasing.

When testing, I often thought there was a problem with the jQuery selector. Invariable it was invalid html code. If your results aren't what you expect, don't assume it's the jQuery selector pattern: The html may be invalid.

To help in development and testing, I added a double-click handler to the rows in the Cheat Sheet table. If you double-click a row, the search pattern is put in the search box, a search is performed and the page is scrolled so you can see the results. I left the test html and code in the page.

If you are using a CDN (non-local) version of the jQuery libraray, the designer in Visual Studio becomes extremely slow.  That's why there are two version of the library in the header and one is commented out.

For reference, here is the jQuery documentation on selectors:

Here is a much more comprehensive list of CSS selectors (which jQuery uses):

I hope someone finds this useful.

Steve Wellens


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180318.3 | Last Updated 10 Jun 2014
Article Copyright 2014 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid