Question

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

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

有时我可以使用alert()或console.log()来隔离问题。有时虽然即便如此也无法解决问题。 我很好奇是否有人知道有什么好的技巧可以知道我使用的选择器实际上选择了什么（如果有的话）。我不知道是否有任何firebug工具，或者其他什么是是有用的。

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

Answer 1

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

除了我总是`console.log（）`一切都要确保我在嵌套树上选择正确的元素，例如，如果你的目标是`div＆gt; ul＆gt; li> a`我`console.log（$（div））`首先然后我只是添加到jQuery选择器

最后我只是`$（element）.css（'background-color'，'red'）;`所以我可以直观地找到我的目标

Answer 2

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

双击它后，它将在elements中打开。

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

Answer 3

我通常使用console.log（）来查看[Object object]，从那里我可以看到里面有什么，或者我是在操纵特定的东西，很多时候我会快点做

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

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

Answer 4

一个选项是将查询结果保存在变量中并检查它的“length”属性。如果长度> 0，则您选择了一些内容。

示例：

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

Answer 5

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