javascript - Point-n-Click JQuery selector Generator? - Stack Overflow

admin管理员组

文章数量:1291299

Are there any plugins or other tools that would allow me to point to an element on a web page and get back a jquery (or css) selector query?

I'm looking for something to be used by very non-technical people to use where they could "highlight" a page item and then get the appropriate jquery statement to "navigate" properly to that element - anything out there that exists for this?

Are there any plugins or other tools that would allow me to point to an element on a web page and get back a jquery (or css) selector query?

I'm looking for something to be used by very non-technical people to use where they could "highlight" a page item and then get the appropriate jquery statement to "navigate" properly to that element - anything out there that exists for this?

• javascript
• jquery
• css

Share Improve this question Follow asked Dec 17, 2011 at 13:03 SC28SC28 16111 gold badge33 silver badges44 bronze badges 2

• 3 That's not a very concrete question. There are numerous selectors which can be used to point to a certain element - IDs, classes, attributes, ... – pimvdb Commented Dec 17, 2011 at 13:05
• 1 William, please explain what you want to achieve in a bit more detail. I didn't quite get what you want it to do. – Joonas Commented Dec 17, 2011 at 13:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Both Firefox's Firebug and Chrome's inspect tool have this feature. Just right click->inspect, and it lists out a CSS selector structure.

Is this something like what you are looking for?

Updated, its probably not the nicest solution but I'm hungry ^__^ :

var root = document.body;
var listen = function(element, evt, func){
    if(element.addEventListener)
        element.addEventListener(evt, func, false);
    else if(element.attachEvent)
        element.attachEvent('on'+evt, func);
};

var buildchain = function(element, chain){
    if(element == document.body){
        return true;
    }
    else if(element.id != ""){
        chain.push("#" + element.id);
        return true;
    }
    else if(element.className != "")
        chain.push("." + element.className);
    else
        chain.push("" + element.tagName);
    buildchain(element.parentNode, chain);
}

var buildstring = function(){
    var str = "$('" + chain[chain.length-1] + "')";
    for(var i = chain.length-2; i >= 0; i--){
        str += (".children('" + chain[i] + "')");
    }
    return str;
}
listen(root, 'click', function(evt){
    chain = [];
    buildchain(evt.target, chain);
    var s = buildstring();
    alert(s);
});

http://selectorgadget.

https://chrome.google./webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb

SelectorGadget is an open source tool that makes CSS selector generation and discovery on plicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you e up with the perfect CSS selector for your needs.

How could I use this?

1. for webpage scraping with tools such as Nokogiri and Beautiful Soup

2. to generate jQuery selectors for dynamic sites

3. as a tool to examine JavaScript-generated DOM structures

4. as a tool to help you style only particular elements on the page with your stylesheets

5. for selenium or phantomjs testing

Created by Andrew Cantino and Kyle Maxwell. You can find the current version on GitHub, and please feel free to leave ments below.

i make some modifications incase you don't want to use jquery and need the selector to work with document.querySelector()

const root = document.body;
const listen = function(element, evt, func){
    if(element.addEventListener)
        element.addEventListener(evt, func, false);
    else if(element.attachEvent)
        element.attachEvent('on'+evt, func);
};

const buildchain = function(element, chain){
    if(element == document.body){
        return true;
    }
    else if(element.id != ""){
        chain.push("#" + element.id);
        return true;
    }
    else if(element.className != ""){
        let strclass = ""
        element.className.split(" ").map((value) => {
            if (value) {
                strclass += "." + value
            }
        })
        chain.push(strclass);
    }
    else {
        chain.push("" + element.tagName);
    }
    buildchain(element.parentNode, chain);
}

var buildstring = function(){
    let str
    if (chain[chain.length-1]) {
        str = chain[chain.length-1];
    }
    for(let i = chain.length-2; i >= 0; i--){
        if (chain[i]) {
            str += (" " + chain[i]);
        }
    }
    return str;
}
listen(root, 'click', function(evt){
    chain = [];
    buildchain(evt.target, chain);
    var s = buildstring();
    alert(s);
});

本文标签： javascriptPointnClick JQuery selector GeneratorStack Overflow