Question

请帮帮我，我需要在DOM结构中替换（切换）标签。我有这个：

<div class="wrap">
    <ul>
        <li>
            <div class="block">
                <div class="title">title 1</div>
                <div class="image">image 1 for title 1</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 2</div>
                <div class="image">image 2 for title 2</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 3</div>
                <div class="image">image 3 for title 3</div>
            </div>
       </li>
       <li>
            <div class="block">
                <div class="title">title 4</div>
                <div class="image">image 4 for title 4</div>
            </div>
       </li>
   </ul>            
</div>

我在结果中需要这个，我怎么得到它？

<div class="wrap">
            <ul>
                <li>
                    <div class="block">
                        <div class="image">image 1 for title 1</div>
                        <div class="title">title 1</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 2 for title 2</div>
                        <div class="title">title 2</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 3 for title 3</div>
                        <div class="title">title 3</div>
                    </div>
                </li>
                <li>
                    <div class="block">
                        <div class="image">image 4 for title 4</div>
                        <div class="title">title 4</div>
                    </div>
                </li>
            </ul>
      </div>

我正在尝试使用jQuery .each()，但结果我得到了像这样的结构

图片4
图片3
图片2
图片1
title 1
image 4
image 3
image 2
image 1
title 2
image 4
image 3
image 2
image 1
title 3
image 4
image 3
image 2
image 1
title 4

Answer 1

您可以使用 insertBefore()

$.each($('.wrap .image'), function() {
    $(this).insertBefore($(this).prev());
});

顺便说一下，您的HTML标记无效，您应该使用title正确关闭与</div>类的div，并在演示中为您修复了它。

<强> Fiddle Demo

Answer 2

尝试.before()

$('.block .title').before(function(){
    return $(this).next()
})

演示：Fiddle

使用jQuery的多开关标签

2 个答案: