jquery选择器suggestor

Question

我们都知道，有许多不同的选择器组合可以用来创建一组唯一的jQuery元素。

是否有工具(插件、扩展等)允许用户直观地单击DOM的任何部分(类似于Firebug的inspect功能)，并自动建议与该元素匹配的相关潜在选择器？

该工具将拥有jQuery选择器的内部知识(CSS选择器不足)，并将考虑周围的元素+ DOM，以提供10-20个有用的选择器建议。

Answer 1

这里是一个起点，你可以尝试一下你需要的东西(我希望是这样)，或者只是为了理解：

JSFIDDLE DEMO

$("body").click(function(event) { // if you are not interested on 'body' himself use: $("body>*")

    // QUESTIONS:
    var Q_qwer = 'Not a parent';
    var Q_children = 'Not a children';
    var Q_last = 'Not last';
    var Q_first = 'Not first';

    //#

    if ($(event.target).children().size() > 0) {
        myChildren = $(event.target).children();
        var Q_parent = myChildren[0].nodeName + ' (ID: ' + myChildren[0].id + ' || CLASS: ' + myChildren[0].className + ' )';
    }
    if ($(event.target).parent().size() > 0) {
        myParent = $(event.target).parent();
        var Q_children = myParent[0].nodeName + ' (ID: ' + myParent[0].id + ' || CLASS: ' + myParent[0].className + ' )';     
    }
    if ($(event.target).is(':last-child')) {
        Q_last = 'LAST!' ;      
    }
    if ($(event.target).is(':first-child')) { // or use: $(event.target).index() == 0
        Q_first = 'FIRST!' ;     
    }

    $("#log").html(' event.target: ' + event.target +
                   ' <br> nodeName: ' + event.target.nodeName +
                   ' , Tag: ' + event.target.tagName +
                   ' <br> ID: ' + event.target.id +
                   ' <br> Class: ' + event.target.className +
                   ' <br> Href: ' + event.target.href +
                   ' <br> Value: ' + event.target.value +
                   ' <br> Children of: ' + Q_children +
                   ' <br> Parent of: ' + Q_parent + ' (First children)' +
                   ' <br> Last children?: ' + Q_last +
                   ' <br> First children?: ' + Q_first +
                   ' <br> .index( ' + $(event.target).index() + ')' +
                   ' <br> .eq( ' + $(event.target).prevAll().length + ')' +
                   ' <br> <hr>' + $(event.target).html()

                  );
});

希望这能有所帮助！

Answer 2

您可以尝试这个名为SelectorGadget的书签小程序

Answer 3

Chrome开发人员工具中有一些东西可以做到这一点。不是愚蠢的证明，但可能值得一试。如果您在开发工具中检查您的元素，在elmements选项卡(CSS样式)的右侧面板中有一个小齿轮，单击它，然后单击"New Style Rule"，这将在style面板中添加一个新的CSS样式规则，其中有一个与您的元素匹配的选择器。