jquery - 我怎么知道我的 jquery 选择器选择了什么？

Question

所以我有一个普遍的问题。通常，在遍历不同的树元素时，我发现我认为我需要的 JQuery 选择器最终选择了其他东西，或者更糟糕的是，它似乎什么也没选择。

例如，有时使用.child()或.sibling()很容易忘记实际选择的内容。

有时我可以使用alert()s 或 aconsole.log()来隔离问题。有时即使这样也不能解决问题。 我很好奇是否有人知道任何好技巧来知道我正在使用的选择器实际选择了什么（如果有的话）。 我不知道是否有任何萤火虫工具，或者其他有用的东西。

有什么建议么？非常感谢。

score 1 · Accepted Answer

有这个Chrome 扩展，我不知道它是否也适用于 Firefox，但你可以随时尝试。

此外，我总是`console.log()` 确保我选择正确的元素，例如在嵌套树上，如果你的目标是`div > ul > li > a` I `console.log($(div ))` 首先，然后我只是添加到 jQuery 选择器

最后我只是`$(element).css('background-color','red');` 所以我可以直观地定位我的目标

score 1 · Accepted Answer

只需使用 chrome 扩展并在控制台面板中编写您的选择器，例如。$('div#foobar');然后按回车。它将在下一行显示 div。如果您将鼠标悬停在选定的 div 上，它将在浏览器上显示。

一旦你双击它，它将在elements.

同样的事情适用firefox于firebug extension. 我们直接在firefox中编写选择器firebug console来检查我们的选择器。

score 0 · Accepted Answer

我通常使用 console.log() 来查看 [Object object] 并从那里我可以看到里面有什么，或者如果我正在操作特定的东西，很多时候我会做一个快速的

$(element).css('background', '#000');

只是为了在页面上直观地看到它。

score 0 · Accepted Answer

一种选择是将查询结果保存在变量中并检查它的“长度”属性。如果长度> 0，你选择了一些东西。

例子：

var $listItem = $("li");
if($listItem.length>0) doSomething();

score 0 · Accepted Answer

我曾经这样做过以下方式。
console.log($('.myElementClass'));当您将元素悬停在上面时，firebug console您可以看到您的元素被突出显示，因此您可以查看它是否是正确的元素。
alert($('.myElementClass').length);

5 回答 5