2011-04-23 5 views
4

버튼을 클릭 할 때 특정 클래스가있는 li 요소를 분리하기 위해 JQuery 1.5와 다음 코드를 사용하고 있습니다. 내가 알고 싶은 것은, 버튼을 다시 클릭하면 요소를 페이지에 다시 추가하는 것입니다..detach()를 실행 취소하는 방법은 무엇입니까?

<script> 
    $("#remove").click(function() { 
     $('li.type').fadeOut(300, function() { $(this).detach(); }); 
    });</script> 
+0

그러나 이것은 수용할만한 것이 아닙니다. 내가 아는 사람들은 용서하지 않습니다. 새로운 질문을하기 전에 몇 가지 대답을 수락하십시오. :) (나쁜 감정은 없지만) –

+2

왜 그것을 떼어 내고 그냥 숨기는 것이 아닌가? 그렇지 않으면 요소에 대한 참조를 유지해야합니다. –

+0

@Felix, 내 스타일 시트에서 nth-of-type (odd) 및 (even)을 사용하여 요소를 다르게 배치했습니다. .hide를 사용하면 숨겨진 요소의 홀수/짝수 상태가 유지되어 다른 모든 배치를 엉망으로 만듭니다. .detach는이 문제를 해결하지만이 방법으로 요소를 다시 가져 오는 방법을 모르겠습니다. – binaryorganic

답변

5

질문은 : 페이지 다시 요소를 넣어 하시겠습니까? 여기

var items = []; 
$('li.type').fadeOut(300, function() { 
    items.push($(this).detach()); 
}); 

$('#replace').click(function() { 
    for(var i = 0; i < items.length; i++) { 
     $("ul#foo").append(items[i]); 
    } 
    items = []; 
}); 
+0

그게 문제 야. 순서가 지정된 목록입니다. 클래스의 요소를 목록의 원래 위치에 다시 넣으려고합니다. – binaryorganic

+1

그 다음 질문은 : 한 번 이상'제거 '를 클릭 할 수 있습니까? 즉, 먼저 한 세트의 요소를 제거한 다음 다른 요소를 제거하십시오. 또는 한 번에 하나의 요소 만 제거됩니까? – VoteyDisciple

+0

좋아요, 그래서 ... 내 마음에는 5 개의 버튼이 있습니다. 모두 5 개의 클래스로 구성된 목록 항목을 제거했습니다. 다시 클릭하면 해당 단추가 해당 목록 항목을 원래 순서대로 페이지로 가져옵니다. 나는 JavaScript가 좋지 않으므로 어쩌면 나는 overthinking을하고있다. 필자는 본질적으로 실제 목록 내용이 아닌 지정된 클래스를 기반으로 필터링 가능한 목록을 작성하고있다. – binaryorganic

1

u는 할 수 없습니다 루프 : 예를 들어, 모든 li 요소 <ul id="foo"></ul> 안에 다시 이동하는 경우는 다음과 같이 사용할 수 있습니다.

var demo; 
$('li.type').fadeOut(300, function() { 
    demo = $(this).detach(); 
}); 

$('#replace').click(function() { 
    $("ul#foo").append(demo); 
}); 
관련 문제