동적으로 목록 채우기 (jQuery)

<ul> 
    <li>item x</li> 
    <li>item y</li> 
    <li>item z</li> 
</ul> 
<a href="#">Populate</a>

'채우기'링크를 클릭하면 모든 <li>을 복사 (복사 및 추가)하고 싶습니다. 어떻게해야합니까? 동적으로 목록 채우기 (jQuery)

 
$(function(){ 
    $('.anchorClass').click(function(){ 
     var ul = $('.ulClass'); 
     ul.append(ul.html()); 
    }); 
});

편집 :

당신은 당신의 HTML을 변경해야합니다

 <ul class="ulClass"> 
    <li>item x</li> 
    <li>item y</li> 
    <li>item z</li> 
</ul> 
<a class="anchorClass" href="#">Populate</a>

출처

2010-02-04 3zzy

빠르고 간결한 버전입니다.

$('a').click(function() { 
    $('ul').children().clone().appendTo('ul'); 
})

물론 'a'와 'ul'을 클래스 또는 ID로 정의하여보다 구체적으로 지정할 수 있습니다.

편집 : 그것은 모두 'A'와 'UL'요소에 영향을 미칠 것으로

은 위의 면책 조항을 확장하려면이 다소 깨지기 쉬운 솔루션이 될 것입니다. 이것은 아마도 당신이 원하는 것이 아닐 수도 있습니다.

더 나은 양식은 html 요소 클래스 나 ID를 부여한 다음 이벤트를 첨부하는 것입니다.

예 : 선제 용액의 포함을위한 제안 에드 우드 콕 덕분으로

$('#myPopulateAnchorElement').click(function() { 
$('#myExpandableUL').children().clone().appendTo('#myExpandableUL'); 
}); 

<ul id='myExpandableUL'> 
    <li>item x</li> 
    <li>item y</li> 
    <li>item z</li> 
</ul> 
<a href="#" id='myPopulateAnchorElement'>Populate</a>

출처

2010-02-04 14:46:32 user113716

페이지에 다른 UL이있는 경우 이것은 매우 심하게 손상됩니다. 클래스 또는 id 선택자없이 jQuery를 사용하는 것은 거의 항상 나쁜 생각입니다! –

@Ed Woodcock - 나머지 답변을 읽었습니다 ... 나는 주어진 것에 대해 작업하고 있었고 클래스 또는 ID로 'a'와 'ul'을 지정하도록 제안했습니다. – user113716

그래, 나는 당신의 대답에 동의하지 않았다, 나는 단지 그것이 선택자를 사용하지 않는 것이 좋지 않다는 것을 밝히고 있었다. 당신의 답과 같이 반 정확한 코드를 게시 할 때의 문제점은 경험이 없거나 혼란스러워서 나머지를 읽지 않고 코드를 사용할 것이라는 것이다. 대답의, 그리고 그것은 나쁜 것입니다! –

이 시도

$('a').click(function(){ 
    $('li').each(function(){ 
     $(this).clone().appendTo('your selector where to put the copy'); 
    }) 
})

출처

2010-02-04 14:18:29

당신은 같은 것을 할 수 있습니다

감사

출처

2010-02-04 14:22:29 Reigel

var ul = $('ul'); 

$('a').click(function(){ 
    ul.children().clone(true).appendTo(ul); 
});

출처

2010-02-04 14:49:35 James

동적으로 목록 채우기 (jQuery)

답변

관련 문제