Question

我在包装器div外面有两个div。但是我想将两个div都推入包装器。这是我的代码

<div class="eg-section-separetor"></div>
<div class="eg-parallax-scene"></div>
<div class="eg-section-separetor-wrapper eg-section-parallax"></div>

function pushInsideSection(){
  "use strict";
  jQuery(".eg-section-separetor").each(function(){
    try{
      var elem=jQuery(this).next(".eg-section-separetor-wrapper")[0];
      jQuery(this).prependTo(elem);   
    }catch(e){
    }
  });
  jQuery(".eg-parallax-scene").each(function(){
    try{
      var elem=jQuery(this).next(".eg-section-parallax")[0];
      jQuery(this).prependTo(elem);  
    }catch(e){
    }
  });
}

jQuery(document).ready(function($) { 
    pushInsideSection();
});

问题是jQuery推送了具有“ eg-parallax-scene”类的第二个div，但没有推送具有“ eg-section-separetor”类的第一个div。

任何帮助！

Answer 1

这是因为.next()为下一个直接元素工作。而eg-section-separetor-wrapper不是eg-section-separetor之后的直接元素

因此请使用.siblings()

var elem=jQuery(this).siblings(".eg-section-separetor-wrapper")[0];

或使用.next() 2次：-

var elem=jQuery(this).next().next(".eg-section-separetor-wrapper")[0];

Answer 2

您可以使用append将元素放入另一个元素内。

function pushInsideSection() {
  var wrapper = $('.eg-section-separetor-wrapper');
  var sep = $('.eg-section-separetor');
  var scene = $('.eg-parallax-scene');
  wrapper.append(sep, scene);
}



$('#nest').click(function($) {
  pushInsideSection();
});

// To run on page load:
//$(function() {  
//  pushInsideSection();
//});

.eg-section-separetor-wrapper {
  min-height: 50px;
  background: grey;
  margin: 10px;
  padding: 10px;
}

.eg-section-separetor {
  background: white;
  border: solid 1px black;
}

.eg-parallax-scene {
  background: white;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eg-parallax-scene">this is the scene</div>
<div class="eg-section-separetor">This is the separator. it's ok if its in the wrong order in html. </br>You can append them in any order you want.</div>
<div class="eg-section-separetor-wrapper eg-section-parallax">
</div>
<button id="nest">click me to nest the divs</button>

两个.each函数在函数内部不起作用。

2 个答案: