Question

我有以下内容：

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

Answer 1

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

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

或者

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

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

但是你正在使用div的id，所以没有选择器可以直接选择。像

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

Answer 2

您可以使用dialogDiv或$('#adminDialog')来引用同一个对象。它仅在当前范围中存在dialogDiv时有效（意味着，如果您已在函数中指定它，则仅在该函数中可用）

Answer 3

只要您可以访问当前范围内的dialogDiv，它甚至可以使用dialogDiv.find("#dialog-heading").text("new text")，因为它不必再次遍历整个DOM，因此可以稍微执行一些

Answer 4

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

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

但是，如果您想访问“<h3>内的#adminDialog”，请更好地使用adminDialog.find('h3')

Answer 5

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

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

有没有一种快捷方式来引用我的DIV中的元素？

5 个答案: