javascript - 除了第一行之外，有没有办法用 div 包裹内部文本？

Question

我正在尝试自动化一些 HTML 以使用 jQuery Accordion 脚本。有很多页面都包含此 HTML，因此如果可能的话，如果可以仅使用一个类对其进行格式化，那就太棒了。这是我希望做的事情:

启动 HTML:

<ul class="accordionize">
<li>
   <h3>Heading numero uno</h3>
   <p>Street art fanny pack viral drinking vinegar food truck, jean shorts cray pop-up flexitarian selvage. Asymmetrical cardigan craft beer lo-fi normcore. Plaid gentrify synth four loko.</p>
   <p>Cred keytar gluten-free, artisan 8-bit viral ethnic asymmetrical messenger bag. Ennui occupy next level, direct trade ethical authentic drinking vinegar. Locavore salvia kitsch, try-hard butcher distillery cred ugh fanny pack ethnic.</p>
   <ul>
   <li>
      <h4>Another subheading</h4>
      <p>Pinterest post-ironic before they sold out, Pitchfork Intelligentsia crucifix art party American Apparel mustache YOLO chia umami Brooklyn 8-bit.</p>
   </li>
   <li>
      <h4>Second subheading</h4>
      <p>Roof party raw denim kale chips banjo trust fund Intelligentsia locavore Blue Bottle. Echo Park selfies Tonx Pinterest, crucifix mumblecore bicycle rights YOLO.</p>
   </li>
   </ul>
</li>
</ul>

我想添加一个 jQuery 脚本来定位 .accordionize 并将 HTML 转换为以下内容:

理想的 HTML 效果:(目标)

<ul class="accordionize">
<li>
   <h3 class="accordion-trigger">Heading numero uno</h3>
   <div class="accordion-content">
   <p>Street art fanny pack viral drinking vinegar food truck, jean shorts cray pop-up flexitarian selvage. Asymmetrical cardigan craft beer lo-fi normcore. Plaid gentrify synth four loko.</p>
   <p>Cred keytar gluten-free, artisan 8-bit viral ethnic asymmetrical messenger bag. Ennui occupy next level, direct trade ethical authentic drinking vinegar. Locavore salvia kitsch, try-hard butcher distillery cred ugh fanny pack ethnic.</p>
   <ul>
   <li>
      <h4 class="accordion-trigger">Another subheading</h4>
      <div class="accordion-content">
      <p>Pinterest post-ironic before they sold out, Pitchfork Intelligentsia crucifix art party American Apparel mustache YOLO chia umami Brooklyn 8-bit.</p>
      </div>
   </li>
   <li>
      <h4 class="accordion-trigger">Second subheading</h4>
      <div class="accordion-content">
      <p>Roof party raw denim kale chips banjo trust fund Intelligentsia locavore Blue Bottle. Echo Park selfies Tonx Pinterest, crucifix mumblecore bicycle rights YOLO.</p>
      </div>
   </li>
   </ul>
   </div>
</li>
</ul>

我可以让它的一部分与以下脚本一起使用，但第一个 header 需要位于 .accordion-content 之外。另外，我想要一种更简洁的方法来仅定位 li 中的第一个元素，无论它是 h3 还是 h4。谢谢，感谢任何想法!

<script>
$(function() {
   $('.accordionize li').wrapInner('<div class="accordion-content"></div>');
   $('.accordionize li h3').first().addClass('accordion-trigger');
   $('.accordionize li h4').first().addClass('accordion-trigger');
});
</script>

当前生成的 HTML:(不正确)

<ul class="accordionize">
<li>
   <div class="accordion-content">
   <h3 class="accordion-trigger">Heading numero uno</h3>
   <p>Street art fanny pack viral drinking vinegar food truck, jean shorts cray pop-up flexitarian selvage. Asymmetrical cardigan craft beer lo-fi normcore. Plaid gentrify synth four loko.</p>
   <p>Cred keytar gluten-free, artisan 8-bit viral ethnic asymmetrical messenger bag. Ennui occupy next level, direct trade ethical authentic drinking vinegar. Locavore salvia kitsch, try-hard butcher distillery cred ugh fanny pack ethnic.</p>
   <ul>
   <li>
      <div class="accordion-content">
      <h4 class="accordion-trigger">Another subheading</h4>
      <p>Pinterest post-ironic before they sold out, Pitchfork Intelligentsia crucifix art party American Apparel mustache YOLO chia umami Brooklyn 8-bit.</p>
      </div>
   </li>
   <li>
      <div class="accordion-content">
      <h4 class="accordion-trigger">Second subheading</h4>
      <p>Roof party raw denim kale chips banjo trust fund Intelligentsia locavore Blue Bottle. Echo Park selfies Tonx Pinterest, crucifix mumblecore bicycle rights YOLO.</p>
      </div>
   </li>
   </ul>
   </div>
</li>
</ul>

Answer 1

更新:

这个元素并不挑剔 li 中的第一个元素(而且它更漂亮)

<script>
$(function() {
    $('.accordionize li').wrapInner('<div class="accordion-content"></div>');
    $('.accordionize li div').children(":first-child").addClass('accordion-trigger').each(function() {
        $(this).prependTo($(this).parent().parent());
    });
});
</script>

上一个答案:

不完全是实现它的最干净的方法，但这会起作用:

<script>
$(function() {
    $('.accordionize li').wrapInner('<div class="accordion-content"></div>');
    $('.accordionize li h3').first().addClass('accordion-trigger');
    $('.accordionize li h4').first().addClass('accordion-trigger');
    $('.accordionize li h3').each(function(){
        $(this).prependTo($(this).parent().parent());
    });

    $('.accordionize li h4').each(function(){
        $(this).prependTo($(this).parent().parent());
    });
});
</script>