JQuery selector help Can I generate a selector by clicking on an element?

Question

I have a jQuery, FireFox, Firebug, IE, and IE toolbar. When I view a page using the FireBug or IE Dev toolbar, I can click on an element and it shows me in dom where the element is located, etc. Is there a way to convert this selection into a valid jQuery selector? I know that I can use ID, classes and element in relation to other elements, etc .... but what about when I look at some random cell of a table that does not have a class or identifier, etc. d. Can I create a selector to fly like this? I definitely thought. Any thoughts or ideas are always welcome.

Thank you ~ ck in San Diego

Answer 1

There are several free tools to help you find your selector. One of them is called Selector Detector, and the other is SelectorGadget.

Both are very similar and easy to implement. Just write down the javascript link and open it on your website (like firebug lite). Then click on your item to display its selector.

I just wrote an article comparing two versions, including demos and download links. If you want to read more, look here: http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/

Answer 2

Let's open the FireQuery plugin for Firebug.

Answer 3

Firebug $1, .

Answer 4

DOM, <td> Firebug

• <td> .
• On the Firebug HTML tab Right-click the ie tag <td>
• Select New Attribute
• Add id / class / etc.

... and that everything connected with it.

Answer 5

I usually load jQuery inside Firebug, wrap it like a grease monkey script. Below is the 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 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
    }