2

我有一个问题，我只是不知道如何解决这个（相对）简单的功能。我想要实现的是以下。我的客户正在使用 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”以及内容包含的更多标签都消失了。

现在我的问题是，我该如何防止这种情况？

4

2 回答 2

2

试试这个：

jsFiddle 演示

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

$('.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/

于 2012-06-21T18:42:30.540 回答
0

使用 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 结构。

于 2017-10-14T13:45:33.957 回答