0

我有一些与以下内容基本相同的 HTML：

<div id="row-1" class="row">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
    <div class="col5"></div>
</div>
<div id="row-2" class="row">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
    <div class="col5"></div>
</div>
<div id="row-3" class="row">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
    <div class="col5"></div>
</div>

现在，我需要使用 jQuery 选择 col2、col3、col4 并在它们周围包裹一个新的 div 对以生成如下所示的 html：

<div id="row-n" class="row">
    <div class="col1"></div>
    <div class ="wrapped-1">
        <div class="wrapped-2">
            <div class="col2"></div>
            <div class="col3"></div>
            <div class="col4"></div>
        </div>
    </div>
    <div class="col5"></div>
</div>

我遇到了一些困难。我试过用这个：

$('div[id^="row-"]')
    .children('.col2, .col3, .col4')
    .wrapInner('<div class="wrapped-2" />')
    .wrapInner('<div class="wrapped-1" />');

...这给出了最接近我想要的结果，但是我需要将标签放在外面，而不是插入到选定的元素中。.wrapAll() 似乎只是将所有项目分组到第一行并将它们从后续行中删除，这是完全错误的。

我对 jQuery 比较陌生，因此我们将不胜感激任何帮助和/或建议！

4

1 回答 1

3

实际上在这种情况下应该使用的方法是wrapAll方法，它用指定的元素包装所有选定的元素，通过使用each方法可以防止这种情况，因此只包装特定元素的子元素。

$('div[id^="row-"]').each(function() {
    $(this).children('.col2, .col3, .col4')
           .wrapAll('<div class="wrapped-1"><div class="wrapped-2"></div></div>');
});

http://jsfiddle.net/rVfp9/

于 2013-05-11T19:51:51.697 回答