2011-12-20 6 views
2

사용자 선택에 따라 결정된 콜럼의 차별화 된 양을 가진 페이지가 있습니다.Jquery를 나누어서 여러 div에 추가

3 개의 칼럼에서 2 개의 칼럼으로 바꾸어서, 모든 세 개의 칼럼에서 모든 내용 (하위 divs)을 가져 와서 나머지 두 칼럼 사이에 균등하게 (ish) 분배하려고합니다.

이것은 내가 지금까지 가지고있는 것입니다.

// gather contents from source colums and store, store target divs as well 
    var source = jQuery(".col").contents(); 
    var target = jQuery("#cols").contents(); 

// clear target divs (individually) now that their content is stored so we can append and re distribute source content 
    jQuery(".col").html(''); 

// insert source into target 
    jQuery(target).append(source); 

#cols 보이는 모든 colums을 함유하는 용기이며 .COL 이러한 개별 colums 각이다. 따라서 각 개별 열 (.col)의 내용을 성공적으로 저장하고이 열을 각 컨테이너 (각 열 또는 .col)에 배치 할 열 컨테이너 (#col)에 내용을 추가합니다.

그래서 잘 작동하지만 실제로 각 열 사이에 균등하게 나누고 싶은 각 열의 내용을 모두 복제합니다.

나는 이것이 의미가 있기를 바랍니다 ... 어떤 생각입니까?

여기에 예제를 참조하십시오. http://jsfiddle.net/Cgdyq/ 콜럼 설정을 변경하기위한 화면 옵션을 클릭하면 선택된 콜럼 수에 따라 내용이 곱해집니다.

+0

http://jsfiddle.net/ 데모와 같은 구체적인 예가 매우 유용 할 것입니다. –

+0

http://jsfiddle.net/Cgdyq/ "화면 옵션"을 클릭 한 다음 열의 수를 변경하면 내용이 배가됩니다. – Pluto

+0

'jQuery ("# cols"). contents();'는 모든 자식 노드를 반환하고 각 노드를'source'에 각각 추가합니다. 분할하고 싶다면'target'의 노드를 반복하고'source'에서 해당 노드를 추가해야합니다. –

답변

0

문제는 칼럼의 수로 소스를 나눈 다음 각 콜럼에 결과로 나오는 청크를 놓고 마지막 칼럼에 리amin러 컬럼 (있는 경우)을 배치하여 해결됩니다.

관련 문제