Question

使用jQuery我想改变它：

<h3>Question 1</h3>
<p>Answer 1 P1</p>
<p>Answer 1 P2</p>

<h3>Question 2</h3>
<p>Answer 2 P1</p>
<p>Answer 2 P2</p>
<p>Answer 2 P3</p>

分为：

<ul>
   <li>
       <h3>Question 1</h3>
       <div>
          <p>Answer 1 P1</p>
          <p>Answer 1 P2</p>
       </div>
    </li>
    <li>
       <h3>Question 2</h3>
       <div>
          <p>Answer 2 P1</p>
          <p>Answer 2 P2</p>
          <p>Answer 2 P3</p>
       </div>
    </li>
</ul>

任何建议都会非常感激。

谢谢！

Answer 1

我正在使用nextUntil选择每个p元素之后的所有h3元素，然后使用wrapAll将其包裹在div之前{{3} } h3元素并将其包裹在li中，然后将其附加到ul。基本上，

var ul = $('<ul>').prependTo('body');

$('h3').each(function(){
    $(this).nextUntil('h3')
        .wrapAll('<div>').parent().add(this)
        .wrapAll('<li>').parent().appendTo(ul);
});

有关简单演示的信息，请参阅：adding

Answer 2

有趣！我急切地等待着不同类型的解决方案。

理论上：我会使用选择器$('h3, p').each(logic)来浏览所有这些项目，当我遇到标记 h3 时，我会创建 li ， h3 和 div 当我遇到 p 时，我会将 p 添加到 div

在<h3> </h3> </div>之间将多个<p>元素包装到</p> <div>中

2 个答案: