jquery 选择器建议器答案

【问题标题】：jquery selector suggestorjquery 选择器建议器
【发布时间】：2011-06-21 18:52:20
【问题描述】：

我们都知道可以使用许多不同的选择器组合来创建一组独特的包装 jQuery 元素。

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

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

【问题讨论】：

为什么不直接看一下 DOM，然后说“哦，我需要这个选择器”。这需要 30 秒。使用 jQuery 选择器也是一种浪费，只需使用 CSS3 选择器，因为这不会硬连接 jQuery 依赖项
一些选择器比其他选择器更好。当使用 selector1 构建复杂的应用程序时可能会带来麻烦，而 selector2 更健壮并且不需要修改。最好有一个简单的列表可供选择，尤其是对于 jQuery 新手。

标签： jquery

【解决方案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()

                  );
});

希望这会有所帮助！

【讨论】：

有趣的方法，我更多地考虑了一个工具的思路，该工具具有 jQuery 选择器的内部知识，并且可以在其他替代方案中建议 $("table tr:last-child") 最后一行一张桌子。（例如）显然这是一个简单的选择，但如果该工具能够提供 10-20 个“智能”选择器，同时考虑到它周围的元素，那么 DOM 等...可能会很有帮助。
@Jordan ：我重新编辑了一些代码。（我认为这对我未来的一个 CMS 项目也有帮助。;）
@Raynos - 嗨，伙计，我想这是一个不好的评论。或者？（我在未来的项目中也需要类似的东西，所以我对这个 Q 非常感兴趣。请不要误会。）
@roXon 你用于显示选择器详细信息的 UI 很丑，并且没有给我一个简单的复制和可粘贴元素的唯一选择器。
@Raynos - 我很欣赏你的评论。我同意，这是网络上最丑陋的代码，但在再次了解如何使用 ev.target 并充分利用它之后，它会有所帮助。（使用 .get() 也是可能的。）你有更好更整洁的建议吗？

【解决方案2】：

你可以试试这个名为SelectorGadget的小书签

【讨论】：

有趣，但实际上并没有比萤火虫等更多的成就。谢谢！
是的，我明白了......所以我搞砸了@roXon 的尝试并想出了这个：jsfiddle.net/Mottie/Htgtg/1 这并不完美，但它是一个开始。

【解决方案3】：

Chrome 开发者工具中有一些东西可以做到这一点。不是万无一失的，但可能值得一试。如果您在开发工具中检查您的元素，在 elmements 选项卡（CSS 样式）的右侧面板中有一个小齿轮，单击它并单击“新样式规则”，这会在样式面板中添加一个新的 CSS 样式规则与您的元素匹配的选择器。

【讨论】：

绝对不是万无一失的。我刚刚检查了最后一个表格行......我正在查询的未知工具将提供类似 $("table tr:last-child") 以及其他相关选择器的内容。然而，Chrome 只提供为一个简单的 tr 填写 css。感谢您的建议，但错过了标记。有人知道其他解决方案吗？
哦，好吧，我会为您的问题 +1，因为我不知道有什么好的替代方案，而且这将是一个不错的功能。虽然这是 Chrome 开发工具的一个相对较新的功能，所以如果他们在接下来的几个月左右让它变得更好，我不会感到惊讶。