尝试在一组子元素的 first-child 元素之前添加 <h2>

Question

我有以下标记：

<ul class="expertise-list">
  <li>
    <p>Some text</p>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
  <li>
    <p>Some text</p>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
  <li>
    <p>Some text</p>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
</ul>

我只是想在每个里的第一个 div 之前包含一个 header。例如：

<ul class="expertise-list">
  <li>
    <p>Some text</p>
    <h2>Case title</h2>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
  <li>
    <p>Some text</p>
    <h2>Case title</h2>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
  <li>
    <p>Some text</p>
    <h2>Case title</h2>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
    <div>Case title</div>
  </li>
</ul>

我尝试过以下 jquery，但我只设法让标题出现在第一个列表项中：

$('.expertise-list li div:first-child').before('<h2>Cases</h2>');

我相信这真的很容易实现！提前致谢！

Answer 1

在您的代码中，p 是 first-child 但不是 div。所以你可以使用 first-of-type:

$('.expertise-list li div:first-of-type').before('<h2>Cases</h2>');

Answer 2

试试这个：您可以将 .after() 用于 li

中的 p 标签

$('.expertise-list li p').after('<h2>Cases</h2>');

Answer 3

您可以在 <p>

之后追加

$('.expertise-list li p').after('<h2>Cases</h2>');

尝试在一组子元素的 first-child 元素之前添加 <h2>

Trying to prepend a <h2> before the first-child element of a set of sub elements

jquery

html

jquery-selectors