Question

这有点工作，我只是得到了我不止一次克隆的元素。

当浏览器达到移动尺寸时，我希望我的JS能够切换元素，就像这样。

发件人：

<div class="sar--img-right-first">
   <div class="sar--first">text</div>
   <div class="sar--second">img</div>
</div>
<div class="">
   <div class="">img</div>
   <div class="">text</div>
</div>
<div class="sar--img-right-first">
   <div class="sar--first">text</div>
   <div class="sar--second">img</div>
</div>

要

<div class="sar--img-right-first">
       <div class="sar--second">img</div>
       <div class="sar--first">text</div>
    </div>
    <div class="">
       <div class="">img</div>
       <div class="">text</div>
    </div>
    <div class="sar--img-right-first">
       <div class="sar--second">img</div>
       <div class="sar--first">text</div>
    </div>

但目前它给了我：

<div class="sar--img-right-first">
   <div class="sar--second">img</div>
   <div class="sar--second">img</div>
   <div class="sar--second">img</div>
   <div class="sar--first">text</div>
</div>
<div class="">
   <div class="">img</div>
   <div class="">text</div>
</div>
<div class="sar--img-right-first">
   <div class="sar--second">img</div>
   <div class="sar--second">img</div>
   <div class="sar--first">text</div>
</div>

我的代码：

    jQuery(document).ready(function() {
        if(jQuery(window).width() <= 1000) {

            jQuery( ".sar--img-right-first").each(function() {
               var thiz = jQuery(this);

               thiz.find(".sar--second").remove().clone().insertBefore(".sar--first"); 
             });

        }
    });

提前致谢

Answer 1

你非常接近。但是您不需要使用删除或克隆功能。这是一个简单的工作示例：

$(document).ready(function() {
  if ($(window).width() <= 1000) {
    $(".sar--img-right-first").each(function() {
        $(this).find('.sar--second').insertBefore($(this).find('.sar--first'));
    });
  }
});

Working fiddle

Answer 2

当您致电.insertBefore(".sar--first")时，它会找到所有这些元素并在每个元素之前插入。我认为您可以通过查找父级来限制搜索之前插入的元素来完成您想要的任务。此外，您不需要使用clone()，remove()会返回已删除的元素。实际上，如果您只是重新排列它们，则可能需要使用detach()来保留与这些元素相关联的任何事件处理程序和数据。

＆＃13;

$('.p3').each(function() {
  var ele = $(this);
  var sib = ele.parent().find('.p1');
  var det = ele.detach();
  det.insertBefore(sib);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
</div>
<h3>Second Set</h3>
<div>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
</div>

＆＃13;

Answer 3

看起来你真的只想在窗口大小小于1000时交换div。试试这段代码：

jQuery(document).ready(function () {

    if (jQuery(window).width() <= 1000) {
        jQuery(".sar--second").each(function () {
            var previousSibling = jQuery(this).prev();
            jQuery(this).prev().remove();
            jQuery(this).append(previousSibling);                    
        });
    }            
});

Jquery - 每个父元素，删除并克隆子元素

3 个答案: