<div id="menu">
  <p class="about">이곳은?</p>
  <p class="jquery">jQuery 맛보기</p>
  <p class="nodejs">node.js 맛보기</p>
  <p class="mongodb">mongo DB 맛보기</p>
</div>

위와 같은 메뉴에서 jquerymongodb의 위치를 jQuery를 이용해서 바꿔보자.

아래 실행되는 코드는 이곳에서 테스트 가능하다.

코드 1

$('.jquery').clone().appendTo( $('#menu') );    
$('.mongodb').replaceAll( $('.jquery').eq(0) );
  1. .jquery를 하나 더 만들어서 #menu 제일 하단에 넣는다

  2. .mongodb로 첫번째 .jquery를 대체

코드 2

$('.jquery').replaceWith( $('.mongodb') ).appendTo( $('#menu') );
  1. .jquery.mongodb 로 대체하고 바로 #menu 하단에 넣는다

코드 3

$('.mongodb').after( $('.jquery') );
$('.about').after( $('.mongodb') );
  1. .mongodb뒤에 .jquery 두고

  2. .about 뒤에 .mongodb

코드 4

$('.mongodb').after( $('.jquery') ).insertAfter( $('.about') );
  1. .mongodb뒤에 .jquery 두고, 바로 .about 뒤에 두기
  • replaceAll(), replaceWith()

  • after(), insertAfter()

  • append(), appendTo()

누가 selector이고 target인지만 잘 구별 할수 있으면 될듯.. 머리 아픔



blog comments powered by Disqus

Published

15 September 2012

Tags