有没有快捷方式可以引用我的 DIV 中的元素

Is there a shortcut way to refer to elements in my DIV?

本文关键字：DIV 元素 我的 引用 快捷方式 有没有      更新时间：2023-09-26

>我有以下内容：

<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 变量的快捷方式？

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

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

或

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

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

但是您使用的是div 的 id，因此没有选择器可以在直接选择中占据顶部。喜欢

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

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

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

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

但是，如果您想访问"#adminDialog内部<h3>"，最好使用adminDialog.find('h3')

您可以使用dialogDiv或$('#adminDialog')，因为它们引用同一对象。仅当dialogDiv存在于当前作用域中时，它才有效（这意味着，如果您在函数中分配了它，则它仅在该函数中可用）

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

$('div#adminDialog h3').text("bla bla")
相关文章：