4

希望使用 jQuery 将任意数量的用户提供的内容包装到有效的三列中。初始 HTML 如下所示：

<div#content>
    <h2>Page Title</h2>
    <p>Some arbitrary number of paragraphs followed by some arbitrary number of biographies, with an arbitrary number of paragraphs.</p>
    <p>Paragraph.</p>
    <h3>First Person</h3>
    <p>Paragraph.</p>
    <p>Paragraph.</p>
    <h3>Second Person</h3>
    <p>Paragraph.</p>
    <h3>Person Three</h3>
    <p>Paragraph.</p>
    <h3>Person Four</h3>
    <p>Paragraph.</p>
    <h3>Person Five</h3>
    <p>Paragraph.</p>
</div>

目标是将内容包装成三列：

  • 第一个 H2 和后续段落将在第一列中。
  • 接下来的两个 H3 和后续段落将在第二列中。
  • 剩余的 H3（在这种情况下是三个，可能更多）将在第三列中。

所以...

<div#content>
    <div.col1>
        <h2>Page Title</h2>
        <p>Paragraph.</p>
        <p>Paragraph.</p>
    </div>
    <div.col2>
        <h3>First Person</h3>
        <p>Paragraph.</p>
        <p>Paragraph.</p>
        <h3>Second Person</h3>
        <p>Paragraph.</p>
    </div>
    <div.col3>
        <h3>Person Three</h3>
        <p>Paragraph.</p>
        <h3>Person Four</h3>
        <p>Paragraph.</p>
        <h3>Person Five</h3>
        <p>Paragraph.</p>
        <!-- etc. -->
    </div>
</div>

我在这里设置了 CodePen：http: //codepen.io/ian-pvd/pen/GKryq

它使用以下方法：

jQuery('h2').nextUntil('h3').andSelf().wrapAll('<div class="col1" />'); 

jQuery('h3:nth-of-type(1)').nextUntil('h3:nth-of-type(3)').andSelf().wrapAll('<div class="col2" />');

jQuery('h3:nth-of-type(3)').nextUntil('p:last-of-type').wrapAll('<div class="col3" />');

这一直有效，直到第三列，我无法包装第三列中剩余的任何内容。

我检查了这些其他问题，这些问题提供了一些帮助：

但是解决方案更具体地是从 H2 包装到 H2，而不是在 H2 和 H3 标签之间切换，或者在一组中包含两个 H3 标签。

我已经排除了试图说服用户以不同方式/分别输入内容的可能性。

有没有一种简单的方法可以做到这一点？

谢谢你的帮助！

4

2 回答 2

2

最后一个选择器h3:nth-of-type(3)没有按预期匹配，因为您已经完成了第一个和第二个 h3；曾经是第三的 h3 现在是第一类型。

尝试以相反的顺序包装列：

jQuery('#content>h3:nth-of-type(3)').nextUntil('div').andSelf().wrapAll('<div class="col3" />');

jQuery('#content>h3:nth-of-type(1)').nextUntil('div').andSelf().wrapAll('<div class="col2" />');

jQuery('#content>h2').nextUntil('div').andSelf().wrapAll('<div class="col1" />');
于 2013-01-17T22:27:46.433 回答
2

我想我得到了您正在寻找的答案，只是将最后一个选择器调整为：

jQuery('h3:eq(2)').nextUntil('p:last').andSelf().wrapAll('<div class="col3" />');

见http://codepen.io/ian-pvd/pen/GKryq

于 2013-01-17T22:35:10.687 回答