2013-02-07 3 views
1

jquery에서 var으로 일련의 div가 표시되고 브라우저 너비가 변경되면 div가 nth-child을 통해 위치가 변경됩니다.div 클래스에 HTML 삽입하기

여기에 div를 표시하는 var 코드가 있습니다.

var theDivs={ 
"div1":$("<div />").addClass("test"), 
"div2":$("<div />").addClass("test2"), 
"div3":$("<div />").addClass("test3"), 
"div4":$("<div />").addClass("test4") 
}; 

그래서 4 개의 div를 만든 다음 일련의 "테스트"클래스를 추가합니다. 예를 들어 ..이 잘 작동하지만, 대신 사업부 클래스 이름을 추가, 나는 많은 .after 코드와 같은 일부 HTML을 추가 할 수 있도록하고 싶습니다 : 여기

$('.somedivclass').after('<div class="test"><a href="#"></a></div>'); 

내 현재 코드의 전체 예입니다 (div의 n 번째 자식의 위치 변화를 볼 수있는 HTML 창 크기를 조절) :

http://jsfiddle.net/EUqEm/85/

그래서 그래, 나는 그것이 작동하는 동안 테스트 된 div 내에서 내 자신의 HTML 코드를 추가 할 수 있도록하고 싶습니다 현재 코드 내가 divs 위치 브라우저 너비 변경 위치를 변경 내 jsfiddle 참조하십시오.

모든 입력이나 도움이 정말 좋고 작동하는 jquery가 더 좋을 것입니다! :)

답변

1

당신은 당신의 div 요소에 HTML 콘텐츠를 추가 할 .html()를 사용할 수 있습니다.

var theDivs={ 
    "div1":$("<div />").addClass("test").html('<span>RED</span>'), 
    "div2":$("<div />").addClass("test2").html('<span>BLUE</span>'), 
    "div3":$("<div />").addClass("test3").html('<span>GREEN</span>'), 
    "div4":$("<div />").addClass("test4").html('<span>PURPLE</span>') 
}; 

크기를 조정할 때 콘텐츠가 제거되도록하려면 .empty()을 사용할 수 있습니다.

$("#wrapper div").attr("class","inner").empty(); 

jsfiddle

+0

이 대부분 루벤 작동,하지만 당신은 HTML 창 크기를 조정할 때이를 제거해야 할 때 스팬 텍스트에 제거 할 수 있다면 스팬 텍스트는 여전히 ..이 유지 현재 divs처럼 브라우저 너비가 변경되면 좋을 것입니다! – Dyck

+0

정확히 언제 HTML이'div' 요소에 추가되어야하고 언제 제거되어야합니까? –

+0

div가 제거되고 다른 브라우저 너비에 추가되었습니다 (jsfiddle에서 html 창 크기 조정 시도). 그러나 창 크기를 조정하면 div가 제거되고 다른 브라우저 너비에 추가되지만 범위 텍스트는 그대로 유지됩니다. 그래서 스팬 텍스트는 divs와 일치해야합니다. 추가/제거 .. 또는 "이동"... ... – Dyck

0

이 말은 무엇입니까?

var theDivs={ 
"div1":$("<div />").addClass("test").text('Some text'), 
"div2":$("<div />").addClass("test2").text('Some text'), 
"div3":$("<div />").addClass("test3").text('Some text'), 
"div4":$("<div />").addClass("test4").text('Some text') 
};