是否有一种快捷方式来引用我的 DIV 中的元素？答案

【问题标题】：Is there a shortcut way to refer to elements in my DIV?是否有一种快捷方式来引用我的 DIV 中的元素？
【发布时间】：2012-04-16 07:50:33
【问题描述】：

我有以下几点：

<div class="modal hide fade" id="adminDialog" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close">×</a>
         <h3 id='dialog-heading'></h3>
    </div>
</div>

我创建了这个变量：

dialogDiv = $('#adminDialog');

我想更改标题的文字。如果我想这样做，我需要使用$('#dialog-heading').text() 还是有基于 dialogDiv 变量的快捷方式？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果它必须基于 dialogDiv，那么这是我所知道的最好的一个

$("h3", $("#adminDialog")).text('new text');

或者

$("h3", dialogDiv).text('new text');

此选择器告诉您在 #adminDialog 范围内查找 h3。

但是您正在为 div 使用 id，因此没有选择器可以置顶直接选择。喜欢

$('#dialog-heading').text('new text');

【讨论】：

h3 先来？我以前从未见过这种选择器。我也可以用 dialogDiv 替换 $("#adminDialog") 吗？
所以 $("h3", dialogDiv).text() 会好吗？这对我来说看起来很干净:-)
@MarieJ，是的，在范围内选择是可以且非常清晰的方法。

【解决方案2】：

只要您在当前范围内可以访问dialogDiv，甚至更喜欢使用dialogDiv.find("#dialog-heading").text("new text")，因为它不必再次遍历整个DOM，因此性能略高。

【讨论】：

$('#adminDialog') 不会被 jQuery 缓存吗？
@KooiInc 会吗？我一直读到您应该自己缓存对象以提高性能。缓存是新的还是我错过的？有什么好读的吗？
你没有错过任何东西，我的错，什么都没有被缓存。见stackoverflow.com/questions/291841/…。
@KooiInc 啊，好，你让我一时糊涂了 :)

【解决方案3】：

这在很大程度上取决于您的需求。

由于您的元素有一个 ID，$('#dialog-heading') 将是访问它的最快方式。

不过，如果你想访问“#adminDialog里面的<h3>”，最好使用adminDialog.find('h3')

【讨论】：

【解决方案4】：

您可以使用dialogDiv 或$('#adminDialog')，因为它们指的是同一个对象。仅当 dialogDiv 存在于您当前的范围内时它才有效（意思是，如果您已在函数中分配它，则它仅在该函数中可用）

【讨论】：

按 ID 查找将比基于 dialogDiv 的查找更快，因为 ID 查找很可能是 O(1)。
但我的意思是我设置 H3 标题的最干净的方式。如果我可以使用 dialogDiv 作为基础，我认为它看起来更干净一些，但我不知道该怎么做。
定义干净，它不是“一成不变的”。如果你需要用它做很多事情，你可以将它保存在一个变量中，但如果你只做一件事，直接使用jquery，这样你就没有所有的变量。关于速度：您在这里看到的是次要、次要、微优化，请不要为此烦恼。

【解决方案5】：

假设您的 div#adminDialog 中只有一个 h3 子元素，您还可以使用 CSS 选择器：

$('div#adminDialog h3').text("bla bla")

【讨论】：