jquery - 查看 JQuery 选择

Question

是否可以查看我在特定 jquery 选择中选择了哪些项目/元素？

我看到有人演示 jquery，他们使用某种形式的控制台为每个选择返回一组项目，然后他们可以将鼠标悬停在每个项目上，它会在浏览器中突出显示它。

我目前正在使用 alert($('div').length); 看看我选择了哪些没有帮助的。

Answer 1

前段时间我为此编写了一个 jquery 插件。它使用 firebug 的日志控制台来记录 jquery 的选择。（如果你不使用 Firebug 进行 Web 开发，你真的应该考虑一下）

(function ($) {
    function logThis() {
        console.debug(this);
    }

    jQuery.fn.debug = function (msg) {
        console.group(msg || "no message");
        this.each(logThis);
        console.groupEnd();
        return this;
    };
})(jQuery);

要使用它，只需在带有可选消息的 jquery 选择上调用 debug

$(".example").debug("nodes found")

Answer 2

如果这纯粹是为了调试，您可以将其记录到您的 javascript 控制台：

$('div').each(function() {
    console.log($(this).id);
})

注意：如果您还没有使用它，我强烈建议您使用firebug 。

Answer 3

您只需要Firebug和代码中的这一行：

console.log(<<myJQuerySelection>>);

例如：

console.log($('div'));

将鼠标移到结果上，它们将在页面上突出显示。

Answer 4

这些都是很好的例子，我也做的一件事是在元素周围创建一个边框。

$('div').css({border: '1px solid red'});

然后，您可以在浏览器中轻松查看已选择的内容（除非某些元素从视口中隐藏）。当未安装/启用 Firebug 时，这也很方便。

可能应该使用 CSS 属性“大纲”，这样它就不会将元素扩展 2 个像素。