jQuery - appendTo() 문제

Question

appendTo 함수에 문제가 있습니다. 현재 반응 형 디자인을 연구 중입니다. 창이 특정 크기보다 작 으면 다른 div에 로그인 및 검색이 추가됩니다. 다시 커지면 이론적으로 그들이 어디로 오는지 이동합니다.

그리고 어떻게 되나요? ".login"을 사용하면 완벽하게 작동합니다. 그러나 ".search"는 일을 끝내는 것입니다. 추가 할 때마다 창의 크기를 조정할 때마다 추가되므로 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> 
... 

자바 스크립트/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 실제로 옳았다 : 여러 랩이

했다. 에 centerwraps : 내 JS 실제로

는

그래서이 문제 수 있지만 나는 여러 중첩 (ABS 네비게이션 POS의 BC) 있었다는 것을 잊었하지 않을 (가 여전히 이해에 대한 wrap1를 불렀다) $(".login").appendTo(".wrap1 .centerwrap")

입니다 .wrap2. 그렇기 때문에 .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