jQuery - appendTo()发行

Question

我对appendTo函数有一个问题。我目前正在进行一项响应性设计。如果窗口小于一定大小，则将登录和搜索附加到另一个div。理论上说，如果它再变大，它们就会被转移到它们来自的地方。

接下来会发生什么？与".login"，它完美地工作。但是，".search“是他妈的把事情搞砸了。每次您调整窗口的大小，而不是附加到它，它只是被附加，所以调整窗口的大小与100 of，您将有一个2^100的那些".search"-forms。有趣的是，他们都一样。

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

找到了！

@nnnnnn实际上是对的：

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

(为了理解，它仍然被称为wrap1 )

所以不会有任何问题，但我忘记了在.wrap2中有多个嵌套(bc的pos:abs导航)中心包。这就是为什么.wrap1 .login完美的工作，但.wrap2 .search没有。

用

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

是的，我觉得很蠢。已经找了两天的答案了。

Answer 2

我希望下面的答案能对你有所帮助。

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

See Demo