Question

我试图自动化一些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>

我想添加一个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>

我可以使用以下脚本来使用它，但第一个标头需要在.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

<强>更新

对于哪一个元素是李中的第一个（并且它更漂亮），这个人并不挑剔

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

Answer 2

您只是使用p包裹accordion-trigger代码，对吧？

如果h3 / h4元素始终位于列表中的第一位，您可以这样做：

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

Answer 3

如果你想移动第一个元素而不管元素类型如何，你可以

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

小提琴：http://jsfiddle.net/maMcw/1/

Answer 4

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

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

另请查看this JS Fiddle。显然，它不会显示手风琴效果，因为你没有为它提供javascript，但如果你检查DOM，你可以看到这些类正在运行。如果您有任何其他问题，请与我们联系。

Answer 5

你可以试试这个：

$(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');
});

Answer 6

我注意到这些答案适用于h标签但在正确包装段落时缺少标记。要使用<div class="accordion-content"></div>包装所有段落，请使用以下内容。

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

更新：这在进一步测试后无法解决 - 上面的回答是由CupawnTae为我工作。

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

6 个答案: