javascript - 有没有工具可以帮助我理解 jQuery 中的 DOM 遍历？

Question

我认为我对 DOM 遍历有基本的了解，但我怀疑我是否有效地完成了它。

例如:

<textarea name="description"></textarea>
<p class="notes"><small>100 characters or less <span class="remainder"></span></small></p>

我在 textarea 上有一个 keyup 事件监听器。我希望 .remainder 跨度在用户在文本区域中键入时显示类似“(剩余 50 个字符)”的内容。

我目前正在像这样访问 .remainder 跨度:

var remainder = $('textarea').next('p').children('small').children('.remainder');

我假设有一种更简单的方法可以做到这一点——也许是通过选择器？我希望找到某种工具，例如 WebKit 的开发人员工具，以直观地向我展示一个元素与另一个元素之间的关系。

谁能告诉我是否存在这样的事情？如果您对 DOM 遍历有任何建议，我们也将不胜感激。

谢谢!

Answer 1

您可以尝试使用 Firebug for Firefox .这个插件让您可以访问 DOM，您可以直接在控制台中执行代码并立即查看效果。

例如，安装 Firebug 后，打开它并选择控制台选项卡。然后在右侧窗口中键入您的 Javascript 代码，包括您的 jQuery 选择器等，然后单击运行。