将容器中的所有匹配元素包装在灵活的布局中答案

【问题标题】：wrapAll matching elements in container within flexible layout将容器中的所有匹配元素包装在灵活的布局中
【发布时间】：2015-05-29 05:13:33
【问题描述】：

我有一个使用 Wordpress 的高级自定义字段的灵活布局。我想用类名portrait 在包含的 div 中包装图像，我已经用 jQuery 的 wrapAll 函数完成了这个，我面临的问题是我只希望它们成对分组，并留下在dom中的相同位置。理论上，这些元素可以在article 标记中以任意顺序出现。

唯一不变的是具有portrait 类的图像将始终彼此相邻出现。

这是一个典型布局的示例：

<article class="new-post">

    <img src="image.jpg" class="landscape">

    <div class="text-block-type-a">
        <p>Some text</p>
    </div>

    <img src="image2.jpg" class="portrait">
    <img src="image3.jpg" class="portrait">

    <div class="text-block-type-b">
        <p>Some different text</p>
    </div>

    <img src="img4.jpg" class="landscape">

    <img src="img6.jpg" class="landscape">

    <img src="img7.jpg" class="portrait">
    <img src="img8.jpg" class="portrait">

    <div class="text-block-type-c">
        <p>even more text</p>
    </div>

    <img src="img9.jpg" class="landscape">

 </article>

这是我想要实现的标记：

 <article class="new-post">

    <img src="image.jpg" class="landscape">

    <div class="text-block-type-a">
        <p>Some text</p>
    </div>

    <div class="portrait-wrap">
        <img src="image2.jpg" class="portrait">
        <img src="image3.jpg" class="portrait">
    </div>

    <div class="text-block-type-b">
        <p>Some different text</p>
    </div>

    <img src="img4.jpg" class="landscape">

    <img src="img6.jpg" class="landscape">

    <div class="portrait-wrap">
        <img src="img7.jpg" class="portrait">
        <img src="img8.jpg" class="portrait">
    </div>  
    <div class="text-block-type-c">
        <p>even more text</p>
    </div>

    <img src="img9.jpg" class="landscape">

 </article>

这是我正在使用的 jQuery：

$(".new-post img.portrait").each(function(index) {
    $(this).next("img.portrait").andSelf().wrapAll("<div class='portrait-set clear'></div>")
});

我认为这是正确的，但上面的 sn-p 产生的标记与我需要的略有不同。它将两个图像包装在一个 div 中，但随后也将第二个图像包装在另一个 div 中。可以在这里看到一个演示：https://jsfiddle.net/kycmmkdx/

谁能指出我正确的方向？非常感谢任何帮助！

【问题讨论】：

标签： jquery html wordpress advanced-custom-fields wrapall

【解决方案1】：

所以我想我用这个解决了这个问题：

$(function(){
    var cWrap=$('<div class="portrait-set clear"></div>');
    $('img.portrait').each(function(){
        var o = $(this).next('img.portrait').length;
        $(this).replaceWith(cWrap).appendTo(cWrap);
        if (!o) cWrap=$('<div class="portrait-set clear"></div>');
    });
});

正确包装了我要定位的图像。

任何人都可以提出更好的方法吗？

【讨论】：

【解决方案2】：

这个怎么样：JSfiddle

var portraits = $(".new-post img.portrait");
$(portraits).wrapAll('<div>');
var count = portraits.length;
var isOdd = count%2!=0;
for(var i=0;i<count;i+=2)
    $(portraits[i]).add(portraits[i+1]).wrapAll("<div class='portrait-set clear'></div>");
if(isOdd) $(portraits[count-1]).wrapAll("<div class='portrait-set clear'></div>");

注意：还优化为循环 n/2 次并考虑奇数个元素.. 我找不到一个选择器在没有循环的情况下选择两个两个，而 wrapAll 将最终选择的元素全部包装一起

【讨论】：