jQuery를 사용하여 한 부모에서 다른 부모로 자식 요소를 이동하는 방법
저는 jQuery DataTables 플러그인을 사용하고 있습니다.등록된 Javascript 동작을 잃지 않고 드롭다운(.dataTables_length)을 표시할 검색 상자(.dataTables_filter)와 레코드 수(.dataTables_length)를 상위 요소(.dataTables_wrapper)에서 내 페이지의 다른 div로 이동하고 싶습니다.예를 들어, 검색 상자에는 '키업' 이벤트에 첨부된 기능이 있는데, 나는 그것을 그대로 유지하고 싶습니다.
DOM은 다음과 같습니다.
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<div class="dataTables_length" id="table1_length">
<select size="1" name="table1_length">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</div>
</body>
다음은 이동 후 DOM의 모습입니다.
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<div class="dataTables_length" id="table1_length">
<select size="1" name="table1_length">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</div>
</body>
.append(), .appendTo(), .prepend() 및 .prependTo() 함수를 보고 있지만 실제로는 이것들에 대해 운이 없었습니다..parent() 및 .parent() 함수도 살펴보았지만 실행 가능한 솔루션을 코딩할 수 없습니다.저는 또한 요소들이 절대적으로 위치하도록 CSS를 변경하는 것을 고려했습니다. 하지만 솔직히 말해서, 페이지는 유동적인 요소들로 구성되어 있고, 저는 이 요소들이 그들의 새로운 부모님들에게 떠 있기를 바랍니다.
이것에 대한 어떠한 도움도 매우 감사합니다.
제이지의 답변은 이벤트 핸들러와 데이터를 포함한 요소를 완전히 제거하기 때문에, 분리 기능 덕분에 그렇게 하지 않는 간단한 솔루션을 추가합니다.
var element = $('#childNode').detach();
$('#parentNode').append(element);
편집:
Igor Mukhin은 아래 댓글에서 더 짧은 버전을 제안했습니다.
$("#childNode").detach().appendTo("#parentNode");
Detach불필요합니다.
답은 간단합니다(2013년 기준).
$('#parentNode').append($('#childNode'));
http://api.jquery.com/append/ 에 따르면
페이지에서 요소를 선택하고 다른 요소에 삽입할 수도 있습니다.
$('.h2').
이 방법으로 선택한 요소가 DOM의 다른 한 위치에 삽입되면 해당 요소는 복제되지 않은 대상으로 이동됩니다.
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
당신한테 안 먹히나요?제 생각엔...
제공된 답변을 바탕으로 다음을 수행하기 위해 빠른 플러그인을 만들기로 결정했습니다.
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);
용도:
$('#nodeToMove').moveTo('#newParent');
언급URL : https://stackoverflow.com/questions/2596833/how-to-move-child-element-from-one-parent-to-another-using-jquery
'it-source' 카테고리의 다른 글
| XMLHttpRequest 대 HttpRequest (0) | 2023.08.04 |
|---|---|
| 엔티티 개체를 저장소에서 노출해야 합니까? (0) | 2023.08.04 |
| iPad/iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭합니다. (0) | 2023.08.04 |
| 개발 및 프로덕션 데이터베이스 동기화 방법 (0) | 2023.07.30 |
| aspnet core api에서 Created(또는 CreatedAtAction/CreatedAtRoute)를 사용하는 방법 (0) | 2023.07.30 |