如何使用jQuery在span标签内追加<h1>标签？

Question

jsFiddle

我正在尝试向一个包含在span中的标题添加一些文本。但是我不知道如何附加到实际标题，而不仅仅是span。

样式：

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

HTML:

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

I run this:

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

但文本被附加在标题标记之后，因此不会应用标题样式。我该如何附加到标题中？

- ben

---

不好的做法是将块级元素放到内联元素中。 - Eimantas

@Eimantas：也许 CSS 中有 .note h1 { display:inline; } 这样的东西。我曾见过像这样的样式，用于短消息的语义标签和类似的东西。 - rsp

Answer 1

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

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

将以下内容插入到每个 .note 类的第一个 h1 内：

以及

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

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

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

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

- Santosh Linkha

---

+1 是为了解释选择器的本质，我认为你的第一个例子恰好符合 OP 的意图。 - jondavidjohn

Answer 2

您需要在选择器中添加一个空格才能实现您的意图：

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

或者：

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

查看演示：

• http://jsfiddle.net/bTubp/3/
• http://jsfiddle.net/bTubp/4/

当你说：.note:first-child时，它的意思是具有class为note的元素，同时它也是其父元素的第一个子元素。当你说：.note :first-child时，它的意思是其父元素的第一个子元素且在（可能深层次）class为note的元素内部。当你说：.note>:first-child时，它的意思是：其父元素具有class为note，并且该元素是其父元素的第一个子元素，这很可能是你想要的。

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

- rsp

Answer 3

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

- Shaz

---

为什么你要重复我的答案？ - jondavidjohn

Answer 4

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

这段代码会查找类名为“.note”的元素，然后在第一个h1标签后添加“more text”文本。

- Milan Chheda