Javascript 除了第一行外，有没有办法用div来包装内部文本？

我正在尝试自动化一些HTML来使用jQuery手风琴脚本。有很多页面上都有这个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>

我可以让它的一部分用于以下脚本，但第一个标题需要在

.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>

$（函数（）{
$（'.accordiomine li'）.wrapInner（''）；
$（'.accordiomine li h3'）.first（）.addClass（'accordion-trigger'）；
$（'.accordiomine li h4'）.first（）.addClass（'accordion-trigger'）；
});

当前生成的HTML：（不正确）

标题编号uno
街头艺术fanny pack病毒式饮用醋食品卡车，jean短裤cray弹出式弹性镶边。不对称开衫工艺啤酒低保真核心。格纹绅士合成四罗科

Cred keytar无麸质，artisan 8位病毒性种族不对称信使包。厌居下一级，直接贸易正宗食醋。Locavore salvia媚俗，努力尝试屠夫酿酒厂cred ugh fanny pack民族



另一个副标题
Pinterest post讽刺卖完之前，Pitchfork知识分子十字架艺术派对美国服饰胡子YOLO chia umami Brooklyn 8位



第二副标题
屋顶派对生牛仔布羽衣甘蓝切片班卓信托基金Intelligentisia locavore蓝瓶。Echo Park自拍Tonx Pinterest，Crossifix mumblecore自行车版权YOLO

所以这里有一个非常简单的解决方案。您只需要修复jQuery选择器

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

$（函数（）{
$（'.accordiomine li'）.wrapInner（''）；
$（'.accordiomize h3'）.first（）.addClass（'accordion-trigger'）；
$（'.accordiomize h4'）.first（）.addClass（'accordion-trigger'）；
});

---

也来看看。显然，它不会显示手风琴效果，因为您没有为它提供javascript，但是如果您检查DOM，您可以看到这些类正在工作。如果你还有其他问题，请告诉我

更新：

<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>

这一个不挑剔哪个元素是li中的第一个元素（而且它更漂亮）

$（函数（）{
$（'.accordiomine li'）.wrapInner（''）；
$（'.accordiomine li div'）.children（“：first child”）.addClass（'accordion-trigger'）。每个（函数（）{
$（this.prependTo（$（this.parent（）.parent（））；
});
});

先前的答案：

这并不是实现这一目标的最干净的方法，但这将起作用：

<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>

$（函数（）{
$（'.accordiomine li'）.wrapInner（''）；
$（'.accordiomine li h3'）.first（）.addClass（'accordion-trigger'）；
$（'.accordiomine li h4'）.first（）.addClass（'accordion-trigger'）；
$（'.accordiomize li h3'）。每个（函数（）{
$（this.prependTo（$（this.parent（）.parent（））；
});
$（'.accordiomize li h4'）。每个（函数（）{
$（this.prependTo（$（this.parent（）.parent（））；
});
});

你只是在用手风琴触发器包装

p

标签，对吗

如果

h3

/

h4

元素始终位于列表的第一位，则可以执行以下操作：

$('.accordionize li p').wrap('<div class="accordion-content"></div>');
$('.accordionize li').children().first().addClass("accordion-trigger");

$（'.accordiomine li p'）.wrap（''）；
$（'.accordiomine li'）.children（）.first（）.addClass（“accordion触发器”）；

您可以尝试以下方法：

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

$（函数（）{
$（'.accordiomine li'）.wrapInner（''）；
$（'.accordiomine li h3'）.first（）.addClass（'accordion-trigger'））
.之前（“.手风琴内容”）；
$（'.accordiomine li h4'）.first（）.addClass（'accordion-trigger'））
.之前（“.手风琴内容”）；
});

如果要将第一个元素移出，而不考虑元素类型，则可以执行以下操作

$('.accordionize li').each(function(){
  var header=$(this).children().first().addClass('accordion-trigger');
  $(this).wrapInner('<div class="accordion-content"></div>')
    .prepend(header);
});

$（'.accordiomine li'）。每个（函数（）{
var header=$（this.children（）.first（）.addClass（'accordion-trigger'）；
$（此）.wrapInner（“”）
.prepend（标题）；
});

---

Fiddle:

我注意到答案对h标签很有效，但没有正确包装段落。要使用

包装所有段落，请使用以下命令

 $('.accordionize li p').addClass("accordionize-paragraphs").wrapAll('<div class="accordion-content"></div>');

$（'.accordiomine li p'）.addClass（“accordiomine段落”）.wrapAll（''）；

---

更新：在进一步测试后，这也不能解决问题-上面CupawnTae的回答对我有效。

我不确定我是否遵循了部分“但是第一个标题需要在.accordion内容之外”-但是对于第二个问题，一个更清晰的方法来针对li元素的第一个子元素，无论类型如何，应该是：$（'.accordiomine li>：first'）.addClass（'accordion-trigger'）；抱歉，我的意思是生成的HTML需要在.accordion content div中不包含第一个标题。我将更新问题以使其更清楚。还有一个子

ul

也需要包装。这很接近！如果我交换两行的顺序，这可以工作（否则，它会以这一点结束，谢谢！！关于如何将其与上面的脚本结合起来，使其始终以li中的第一个元素为目标，有什么想法吗？我想只是添加.children（）.first（）将目标切换到脚本中的第四行即可，并将目标切换到“.accordiomize li”，但有点关闭。添加了一个元素不可知的版本Close，但修订版会将第一个标题添加到每个li，而不是将每个第一个子项添加到其父li。@aecend获得了他们的最新注释，谢谢！观点正确。现在已修复。此版本应适用于r有些情况下，aecend没有（当

中有
时），但这可能只是吹毛求疵。
$('.accordionize li').each(function(){
  var header=$(this).children().first().addClass('accordion-trigger');
  $(this).wrapInner('<div class="accordion-content"></div>')
    .prepend(header);
});

 $('.accordionize li p').addClass("accordionize-paragraphs").wrapAll('<div class="accordion-content"></div>');