wrapAll 在灵活布局的容器中匹配元素

Question

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

唯一不变的是 class 为 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>")
});

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

有人能给我指出正确的方向吗？非常感谢任何帮助！

Answer 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>');
    });
});

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

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

Answer 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 在灵活布局的容器中匹配元素

wrapAll matching elements in container within flexible layout

html

wordpress

jquery

wrapall

advanced-custom-fields