Test your jQuery Selectors using this Cool Tool

Tweet

I recently stumbled upon the Interactive jQuery Tester tool created by Samuli Kärkkäinen and thought of letting you all know about this handy tool.

Using this tool, all you have to do is paste the markup in the right textarea labelled ‘Markup to test against’ and then type your selector in the textbox given at the top labelled ‘A jQuery selector expression (version 1.3.2):’. The tools automatically acts upon your selector and turns the matching elements to Green.

Let’s do a simple test. I want to test my selector expression and see if it selects all td’s greater than the index 3. I used the following markup

<table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
 </table>

and the following selector expression against it

td:gt(3)

Observe that I have not added quotes in the selector expression while using it with the tool. In a normal scenario, I would have tested it using $("td:gt(3)")

The results are as shown below with the td’s greater than index 3, highlighted in Green

Nice tool! Go check it out!

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.