Question

我需要将我的博客内容包装成一个div，以及如何使用jQuery。但是应该省略图像和div和表格。

此标记：

<div class="entry-content">
    <h1>Title</h1>
    <div class="into">Some text is here</div>
    <p>Paragraph text</p>
    <p>Paragraph text</p>
    <ul>
        <li>Maybe list too</li>
        <li>Like this</li>
    </ul>
    <div class="media">
        <img src="" alt="" />
    </div>
    <p>Paragraph text</p>

    <h2>Another title</h2>
    <p>Paragraph text</p>
    <h3>Yet another title</h3>
    <p>Paragraph text</p>
    <p>Paragraph text</p>
    <blocquote>
        <p>Quote</p>
    </blockquote>

    <h1>Second title</h1>
    <h2>Sub Title</h2>
    <p>Paragraph text</p>
    <im src="" alt="" />
    <p>Paragraph text</p>
    <table>
        <td></td>
    </table>
    <p>Paragraph text</p>
    <h2>Title</h2>
    <div class="media">
        <img src="" alt="" />
    </div>
    <p>Paragraph text</p>
</div>

进入这个：

<div class="entry-content">
    <div class="container">
        <h1>Title</h1>
        <div class="into">Some text is here</div>
        <p>Paragraph text</p>
        <p>Paragraph text</p>
        <ul>
            <li>Maybe list too</li>
            <li>Like this</li>
        </ul>
    </div>
    <div class="media">
        <img src="" alt="" />
    </div>
    <div class="container">
        <p>Paragraph text</p>

        <h2>Another title</h2>
        <p>Paragraph text</p>
        <h3>Yet another title</h3>
        <p>Paragraph text</p>
        <p>Paragraph text</p>
        <blocquote>
            <p>Quote</p>
        </blockquote>

        <h1>Second title</h1>
        <h2>Sub Title</h2>
        <p>Paragraph text</p>
    </div>
    <img src="" alt="" />
    <div class="container">
        <p>Paragraph text</p>
    </div>
    <table>
        <td></td>
    </table>
    <div class="container">
        <p>Paragraph text</p>
        <h2>Title</h2>
    </div>
    <div class="media">
        <img src="" alt="" />
    </div>
    <div class="container">
        <p>Paragraph text</p>
    </div>
</div>

所以除了img，.media和table之外基本上包装所有内容。这样做是因为当表格和图像将是浏览器宽度时，文本宽度将达到660px。

我正在使用Drupal，这是来自wysiwyg的内容，所以如果有人知道如何在php级别上做这将是很好的但我相信这应该在jQuery中也可行。也许有一些正则表达式？

任何帮助都会受到赞赏，因为我有点失落。

Answer 1

您可以执行类似

的操作

var $els = $();

$('.entry-content').children().each(function(){
    if($(this).is('img, .media')){
        $els.wrapAll('<div class="container" />');
        $els = $();
    }else {
        $els = $els.add(this);
    }
});
$els.wrapAll('<div class="container" />');

演示：Fiddle

使用jQuery将元素包装到div中

1 个答案: