Question

希望使用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和后续段落将在第二列。
剩下的H3s（在这种情况下是三个，可能更多）将在第三列。

因此...

<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标签。

试图说服用户以不同方式/单独输入内容已经被排除在我之外。

有一种简单的方法吗？

感谢您的帮助！

Answer 1

最后一个选择器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" />');

Answer 2

我想我得到了你想要的答案，只是调整了最后一个选择器：

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

请参阅http://codepen.io/ian-pvd/pen/GKryq

使用jQuery在单独的DIV中包装任意内容（H2，H3，P等）

2 个答案: