Let's JAM!

Selector Detector

At my current place of occupation, Kynetx, we use jQuery extensively. One of the strangest, most difficult parts of learning how to use jQuery, in my opinion, is using "selectors." Selectors are jQuery's way of selecting elements within the DOM to alter, add, delete, store, etc. Makes sense, right? Seems easy enough, yes?

It seems easy until you start trying to learn and use it. A lot of beginners struggle learning the different selectors and how they work. After seeing this, I have created a handy little bookmarklet. Click on the bookmarklet and then click on an element on a page. The element's selector is displayed and the element which would be selected when using that selector is highlighted (let's see how many times I can use select in a sentence). Granted, this is not a perfect solution. Far from it! It is, however, good at solving simple jQuery Selector problems.

In KRL (Kynetx Rule Language) jQuery selectors are used a lot. A lot of times, people have had applications made, and something breaks because of a DOM change. This application should allow for them to easily fix the application.

To get it, use the bookmarklet below:

Selector Detector

The selector detector is pretty self explanatory. Click on what you want the selector for, and that will be highlighted and the selector placed in the text box, as seen in Figure 1.

The function is a pretty intense (in my opinion) recursive program. It's available here.

If you have any problems, issues, comments, queries, etc., please leave me a comment! I'll be sure to get back to you!