jQuery-appendTo（）问题

Question

我的appendTo函数有问题。 我目前正在研究响应式设计。 如果窗口小于特定大小，则登录和搜索将附加到另一个div。 如果再次变大，理论上它们将被移到它们的来源。

而会发生什么呢？ 使用“ .login”，它可以完美运行。 但是“ .search”正在搞砸了。 每次调整窗口大小时，它不会被附加到TO，而是被附加，所以将窗口大小调整为100px，您将获得2 ^ 100的“ .search”形式。 有趣的是，它们都是一样的。

的HTML

...
<div class="wrap1">
  <div class="login">
    <form method="post" action="#">
      <input type="text" name="user" placeholder="Username"/>
      <input type="text" name="pass" placeholder="Password"/>
      <input type="submit" value="Submit"/>
    </form>
  </div>
</div>
<div class="wrap2">
  <div class="search">
    <form method="get" action="#">
      <input type="text" name="search" placeholder="Search"/>
      <input type="submit" value="Search"/>
    </form>
  </div>
</div>
<div class="wrap3">
</div>
...

JavaScript / jQuery

$(document).ready(function(){
  $(window).resize(function(){
    if ($(window).width() < 461) {
      $(".login, .search").prependTo($(".wrap3"));
    } else {
      $(".login").appendTo(".wrap1");
      $(".search").appendTo(".wrap2");
    }
  })
})

有任何想法吗？ 我会对jQ感到满意，但也欢迎使用纯JS答案。

Answer 1

希望以下答案对您有所帮助。

function searchPos(){
if ($(window).width() < 461) {
      $(".wrap1 .login, .wrap2 .search").prependTo($(".wrap3"));
    } else {
      $(".wrap3 .login").appendTo(".wrap1");
      $(".wrap3 .search").appendTo(".wrap2");
    }
}
searchPos();    
$(window).resize(function(){
    searchPos();    
});

观看演示

Answer 2

找到了！

@nnnnnn实际上是正确的：

有多个包装。 我的JS实际上是$(".login").appendTo(".wrap1 .centerwrap")

（为了理解，它仍称为wrap1）

因此不会有任何问题 ，但是我忘记了.wrap2中有多个嵌套的（wc：pos：abs导航的bc） .wrap2 。 这就是.wrap1 .login完美运行但.wrap2 .search不能正常运行的原因。

解决了

$(".login").appendTo(".wrap1 > .centerwrap");
$(".search").appendTo(".wrap2 > .centerwrap");

是的，我感到愚蠢。 一直在寻找答案已有2天了。