如何使用 jQuery 附加到跨度内的 <h1> 标记？答案

【问题标题】：How can I append to a <h1> tag inside a span with jQuery?如何使用 jQuery 附加到跨度内的 <h1> 标记？
【发布时间】：2023-04-03 13:32:01
【问题描述】：

jsFiddle

我正在尝试将一些文本附加到跨度中的标题。但我不知道如何附加到实际标题，而不仅仅是跨度。

风格：

h1 {font-size:250%;color:red;}

HTML：

<span class="note">
    <h1>
        some text
    </h1>
</span>

我运行这个：

$('.note:first-child').append("more text");

但是文本被附加在标题标签之后，因此没有应用标题样式。如何附加到标题？

【问题讨论】：

不酷将块元素放入内联元素
@Eimantas：可能在 CSS 中的某处有 .note h1 { display:inline; }。我见过像这样的样式有用于短消息的内联标题的语义标签和类似的东西。

标签： jquery jquery-selectors

【解决方案1】：

http://jsfiddle.net/bTubp/2/

$('.note h1:first-child').append("more text");

用于在每个 .note 类的第一个 h1 中插入

和

$('.note:first-child h1').append("more text");

用于为第一个 .note 类的 h1 插入内部文本

对于第一个h1 或第一个.note

$('.note:first-child h1:first-child').append("more text");

【讨论】：

+1 用于解释选择器的性质，我认为您的第一个示例完全符合 OP 的意图。

【解决方案2】：

你需要一个空间让你的选择器做你的意思：

$('.note :first-child').append("more text");

或：

$('.note > :first-child').append("more text");

查看演示：

当您说：.note:first-child 时，它的意思是带有类注释的东西，也是其父级的第一个子级。当您说：.note :first-child 时，它的意思是 它是其父级的第一个孩子，并且位于（可能很深）带有类注释的某物的内部。当您说：.note>:first-child 时，它的意思是：它是其父级的第一个子级并且其父级具有类注释，这可能就是您的意思。

我看到在我写完之前已经有很多答案了，但我仍然会发布它，因为我希望它能解释为什么你的选择器不起作用。

【讨论】：

【解决方案3】：

$('.note:first-child h1').append("more text");

【讨论】：

为什么要重复我的回答？

【解决方案4】：

$(".note h1:first").append("more text");

这将查找类“.note”，然后是第一个 h1 标记。

【讨论】：