Question

我遇到了问题，我只是不知道如何解决这个（相对）简单的功能。我想要实现的目标如下。我的客户正在使用CMS给我这个输出。

<div class="foldOutEnabled">

    <h2>Title 01</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    <h2>Title 02</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 02</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

</div>

我想要做的是在'h2'标签之间获取所有HTML并将其包装在另一个div中（因此jquery可以用它制作手风琴菜单）。为了这个工作我需要输出成为这个，

<div class="foldOutItem">
    <div class="foldOutItemTitle">
        <h2>
            <a href="#"><img class="foldoutArrow" width="17" height="20" alt="" src="../images/footer-arrow.png">Title 01</a>
        </h2>
    </div>
    <div class="foldOutItemContent">

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    </div>
</div>

etc...

在尝试了许多不同的解决方案和方法后，我的目标就是以下内容，

if ($('.foldOutEnabled').length) {

    var newHtml = '<div class="foldOutTitle"><span><a id="foldOutAll" href="#">Alles uitklappen</a></span></div>';

    $('.foldOutEnabled h2, .foldOutEnabled h3, .foldOutEnabled table, .foldOutEnabled p, .foldOutEnabled span').each(function(i) {

        if (this.nodeName == 'H2')
        {
            if (i != 0) { newHtml += '</div></div>'; }
            newHtml += '<div class="foldOutItem"><div class="foldOutItemTitle"><h2><a href="#"><img src="../images/footer-arrow.png" alt="" width="17" height="20" class="foldoutArrow" />' + $(this).html() + '</a></h2></div><div class="foldOutItemContent">';
        } else {
            newHtml += $(this).html();
        }

    });

    newHtml += '</div></div>';
    $('.foldOutEnabled').html(newHtml);
}

在我看来，这可以改进，但除了.html（）剥离所有的html标签之外，它有效。因此，所有'p'和'h3'以及内容中包含的更多标签都已消失。

现在我的问题是，我该怎样阻止这个？

Answer 1

试试这个：

jsFiddle demo

在演示中，我为新类着色，以帮助可视化变化。

$('.foldOutEnabled h2').each(function(){
  $(this).nextUntil('h2').andSelf().wrapAll('<div class="foldOutItem" />');
  $(this).nextAll().wrapAll('<div class="foldOutItemContent" />')
    .end().wrap('<div class="foldOutItemTitle" />');
});

http://api.jquery.com/each/
http://api.jquery.com/nextuntil/
http://api.jquery.com/andself/
http://api.jquery.com/wrapall/
http://api.jquery.com/nextall/
http://api.jquery.com/end/

Answer 2

使用JavaScript，您可以这样做。

let summ = 'your content here';

summ.split('/<h2>.*?<\/h2>/g');

result = summ.match(/<h2>(.*?)<\/h2>/g).map(function(val){
   return val;
});

let data = [];
let preData = '';
for(var i =0; i < result.length; i++) {
    const position = summ.indexOf(result[i]);
    if (i === 0) {
        if (position === 0) {
            preData = '';
        } else {
            preData = summ.substr(0, position);
        }
    }
    // Logic to find content and headers
    const obj = {content: '', title: ''};
    obj.title = result[i];
    if (i === result.length - 1) {
        obj.content = summ.substr(position + result[i].length, summ.length);
    } else {
        obj.content = summ.substr(position + result[i].length, summ.indexOf(result[i+1]));
    }
    data.push(obj);
}

标题将是h2标签，内容将包含两个h2标签之间存在的所有标签。

现在，您可以遍历数组以创建您选择的html结构。

jQuery - 在2个标签之间获取内容并将其包装在新元素中

2 个答案:

jsFiddle demo