Question

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

反而会发生什么？使用＆＃34; .login＆＃34;，它完美无缺。但是＆＃34; .search＆＃34;是f * cking事情。每当你调整窗口大小时，它不会被附加到TO，而只是附加，所以用100px调整窗口大小，你将得到2 ^ 100个＆＃34; .search＆＃34; -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

我希望以下答案可以帮到你。

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

Answer 2

找到了它！

@nnnnnn实际上是对的：

有多次换行。我的JS实际上是$(".login").appendTo(".wrap1 .centerwrap")

（它仍然被称为wrap1 for comprehension）

所以不会有任何问题，但我忘了.wrap2中有多个嵌套（pos：abs导航的bc）中心包裹。这就是.wrap1 .login完美运作但.wrap2 .search没有效果的原因。

用

解决了

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

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

jQuery - appendTo（）的问题

2 个答案: