0

我有一个使用 Wordpress 的高级自定义字段的灵活布局。我想用portrait包含 div 的类名包装图像，我已经用 jQuery 的wrapAll函数完成了这个，我面临的问题是我只希望它们成对分组，并保持在相同的位置大教堂。理论上，元素可以在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>")
});

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

谁能指出我正确的方向？任何帮助是极大的赞赏！

4

2 回答 2

0

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

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

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

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

于 2015-03-25T14:18:39.177 回答
0

这个怎么样：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 将最终选择的元素全部包装在一起

于 2015-03-25T14:27:36.253 回答