jQuery selector help - Can I generate a selector from clicking on an element?

Question

Hi All, I have jQuery, FireFox, Firebug, IE, and IE developer toolbar. When I am examing a page with either FireBug or IE Dev toolbar, I am able to click on an element and it shows me in the dom where the element is etc... Is there anyway to transform that selection into a valid jQuery selector? I know I can use ID, classes, and element relative to other elements etc... but what about when I am looking at some random table cell that doesn't have a class or id etc.. Can I generate a selector on the fly like that? I thought for sure there was. Any thoughts or ideas are always appreciated

Thanks, ~ck in San Diego

Answer 1

In Firebug you can write $1 which is the last selected object on the page.

Answer 2

If you're looking to add an attribute to a DOM element i.e. a <td> element with Firebug

• Right click the <td> element on the page and Inspect Element.
• On the HTML tab of Firebug Right-click on the tag i.e. <td>
• Select New Attribute
• Add an id/class/etc.

...and that's all there is to it.

Answer 3

Check out the FireQuery plugin for Firebug.

Answer 4

Typically what I do is load jQuery inside Firebug, wrap it as a grease monkey script.Below is such a script from http://joanpiedra.com/jquery/greasemonkey/

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }

Answer 5

There are a couple of free tools that will help you find your selector. One is called Selector Detector and the other is SelectorGadget.

Both are very similar and easy to implement. Just bookmark a javascript link and open it on your site (just like firebug lite). Then click on your element to display its selector.

I just wrote an article comparing the two that includes demos and download links. If you want to read more, check it out here: http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/