查看 JQuery 选择

Question

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

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

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

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 选择上的调试即可

$(".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 属性“outline”，这样它就不会将元素扩展 2 个像素。