Test your jQuery Selectors using this Cool Tool

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>

and the following selector expression against it


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!

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: