有没有一个工具可以帮助我理解 jQuery 中的 DOM 遍历？
我认为我对 DOM 遍历有了基本的了解，但我怀疑我是否高效地做到了这一点。
例如：
<textarea name="description"></textarea>
<p class="notes"><small>100 characters or less <span class="remainder"></span></small></p>
我在文本区域有一个 keyup 事件监听器。当用户在文本区域中键入时，我希望 .remainder 范围显示类似“（剩余 50 个字符）”的内容。
我目前正在像这样访问 .remainder 跨度：
var remainder = $('textarea').next('p').children('small').children('.remainder');
我认为有一种更简单的方法可以做到这一点 - 也许通过选择器？我希望找到某种工具，例如 WebKit 的开发人员工具，能够直观地向我展示一个元素如何与另一个元素相关。
谁能告诉我这样的事情是否存在？如果您对 DOM 遍历有任何建议，我们将不胜感激。
谢谢！
I think I have a basic understanding of DOM traversal, but I doubt I'm doing it efficiently.
For example:
<textarea name="description"></textarea>
<p class="notes"><small>100 characters or less <span class="remainder"></span></small></p>
I have a keyup event listener on the textarea. I want the .remainder span to display something like "(50 characters remaining)" as the user types in the textarea.
I am currently accessing the .remainder span like this:
var remainder = $('textarea').next('p').children('small').children('.remainder');
I assume there is a simpler way to do this - maybe through selectors? I am hoping to find some kind of tool, like WebKit's Developer Tools, to visually show me how one element relates to another.
Can anyone tell me if such a thing exists? Any advice you may have on DOM traversal would be much appreciated too.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以尝试使用 Firebug for Firefox。该插件使您可以访问 DOM，并且可以直接在控制台中执行代码并立即看到效果。
例如，安装 Firebug 后，打开它并选择控制台选项卡。然后在右侧窗口中输入 Javascript 代码（包括 jQuery 选择器等），然后单击运行。
You can try using Firebug for Firefox. This plugin gives you access the the DOM and you can execute code right in the console and see the effect immediately.
For example, After you install Firebug, open it and choose the console tab. Then in the right hand window type your Javascript code including your jQuery selectors etc and click run.
我建议您多研究一下 CSS 选择器。正如您从其他评论中看到的，还有其他方法可以更快地访问该元素。根据经验，CSS 选择器比 JS 函数调用更快，因此除非必要，否则请尽量减少调用。
至于您询问的工具，Firebug 规则，正如其他人提到的。您有一个内置控制台，您可以从当前网页调用函数，因此无需在每次测试后按刷新。它还以良好、全面的方式显示您需要的所有数据。此外，在构建 CSS 查询时，您可以使用 HTML 选项卡来研究文档结构并决定使用哪些选择器。
Chrome也有一个开发者控制台扮演同样的角色，它也有firebug Lite，而且这个不需要特定的浏览器（它只用JS编写）。
I'd recommend you study CSS selectors a little more. As you can see from the other comments there are other ways to get to that element in a faster way. As a rule of thumb, CSS selectors are faster than JS function calls, so try to minimize the calls unless necessary.
As for the tool you asked about, Firebug rules, as others mentioned. You have a built-in console where you can call functions from the current web page, so there no need to press refresh after every test. It also displays all the data you need in a nice, comprehensive way. Also, when building your CSS queries, you may use the HTML tab to study the document structure and decide what selectors to use.
Chrome also has a developer console filling in the same role, and it also exists firebug Lite, and this one does not require a specific browser(it's written in JS only).
更简单的方法是使用
.find()代替.children()的。The simpler way to do that would be to use
.find()instead of.children().如果只有一个带有
remainder类的元素，您可以执行以下操作：... 选择它。如果还有更多，那么您将不得不缩小搜索范围。 Firebug 也是我推荐的。
If there is only one element with class
remainderyou can do:... to select it. If there are more, then you will have to narrow down your search. And Firebug is what I recommend as well.
Firebug for Firefox 是一个非常方便的工具。
另外，我建议您使用 Chrome 中自带的开发人员工具。您可以查看页面中的资源、编写脚本并即时测试它们。
Firebug for Firefox is a very handy tool.
Also, I suggest you using Developer Tools that comes within Chrome. You can see the resources in the page, write scripts and test them on the fly.