요소를 전환하는 기본 jQuery 함수가 있습니까?
두 요소를 jQuery와 쉽게 교체 할 수 있습니까?
가능한 경우 한 줄 로이 작업을 수행하려고합니다.
선택 요소가 있고 옵션을 위 또는 아래로 이동하는 두 개의 버튼이 있으며 이미 선택된 대상 선택기가 있고 if와 함께 사용하지만 if로 수행하지만 더 쉬운 방법이 있는지 궁금합니다.
jQuery 만 사용하여이를 해결하는 흥미로운 방법을 찾았습니다.
$("#element1").before($("#element2"));
또는
$("#element1").after($("#element2"));
:)
Paulo는 옳지 만 왜 그가 관련 요소를 복제하고 있는지 잘 모르겠습니다. 이것은 꼭 필요한 것은 아니며 요소 및 하위 요소와 관련된 참조 또는 이벤트 리스너를 잃게됩니다.
다음은 일반 DOM 메소드를 사용하는 비 복제 버전입니다 (jQuery에는이 특정 작업을보다 쉽게 수행 할 수있는 특별한 기능이 없기 때문에).
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
아니요, 없습니다.하지만 채찍을 채울 수 있습니다.
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
용법:
$(selector1).swapWith(selector2);
셀렉터가 하나의 요소 만 일치하는 경우에만 작동합니다. 그렇지 않으면 이상한 결과가 발생할 수 있습니다.
이 문제에는 많은 경우가 있습니다.이 답변은 승인 된 답변이나 bobince의 답변으로 처리되지 않습니다. 복제와 관련된 다른 솔루션은 올바른 길을 가고 있지만 복제는 비싸고 불필요합니다. 변수 중 하나를 임시 변수에 할당하는 단계 중 하나 인 두 변수를 교체하는 방법에 대한 오래된 문제로 인해 복제하려고합니다. 이 경우 할당 (복제)이 필요하지 않습니다. 다음은 jQuery 기반 솔루션입니다.
function swap(a, b) {
a = $(a); b = $(b);
var tmp = $('<span>').hide();
a.before(tmp);
b.before(a);
tmp.replaceWith(b);
};
이러한 답변 중 많은 부분이 일반적인 경우에 잘못되었으며, 실제로 작동하는 경우에는 불필요하게 복잡합니다. jQuery .before와 .after메소드는 대부분의 작업을 수행하지만 많은 스왑 알고리즘이 작동하는 방식으로 세 번째 요소가 필요합니다. 아주 간단합니다. 사물을 옮기는 동안 임시 DOM 요소를 자리 표시 자로 만듭니다. 부모 나 형제를 볼 필요가 없으며 복제 할 필요가 없습니다 ...
$.fn.swapWith = function(that) {
var $this = this;
var $that = $(that);
// create temporary placeholder
var $temp = $("<div>");
// 3-step swap
$this.before($temp);
$that.before($this);
$temp.after($that).remove();
return $this;
}
1) 임시 div를 temp앞에 두십시오this
2) this전에 이동that
3) that후 이동temp
3b) 제거 temp
그런 다음 간단히
$(selectorA).swapWith(selectorB);
데모 : http://codepen.io/anon/pen/akYajE
두 개의 클론이 필요하지 않아야합니다. 파올로 베르 간 티노의 답변
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
$(to).replaceWith(this);
$(this).replaceWith(copy_to);
});
};
더 빨라야합니다. 두 요소 중 작은 요소를 전달하면 속도가 빨라집니다.
나는 전에 이와 같은 기술을 사용했다. http://mybackupbox.com 의 커넥터 목록에 사용합니다 .
// clone element1 and put the clone before element2
$('element1').clone().before('element2').end();
// replace the original element1 with element2
// leaving the element1 clone in it's place
$('element1').replaceWith('element2');
선택한 여러 옵션을 위 또는 아래 로 이동할 수있는 기능을 만들었 습니다.
$('#your_select_box').move_selected_options('down');
$('#your_select_boxt').move_selected_options('up');
종속성 :
$.fn.reverse = [].reverse;
function swapWith() (Paolo Bergantino)
먼저 선택한 첫 번째 / 마지막 옵션이 위 / 아래로 이동할 수 있는지 확인합니다. 그런 다음 모든 요소를 반복하고 호출합니다.
swapWith (element.next () 또는 element.prev ())
jQuery.fn.move_selected_options = function(up_or_down) {
if(up_or_down == 'up'){
var first_can_move_up = $("#" + this.attr('id') + ' option:selected:first').prev().size();
if(first_can_move_up){
$.each($("#" + this.attr('id') + ' option:selected'), function(index, option){
$(option).swapWith($(option).prev());
});
}
} else {
var last_can_move_down = $("#" + this.attr('id') + ' option:selected:last').next().size();
if(last_can_move_down){
$.each($("#" + this.attr('id') + ' option:selected').reverse(), function(index, option){
$(option).swapWith($(option).next());
});
}
}
return $(this);
}
복제하지 않은 다른 것 :
교환 할 실제 및 공칭 요소가 있습니다.
$nominal.before('<div />')
$nb=$nominal.prev()
$nominal.insertAfter($actual)
$actual.insertAfter($nb)
$nb.remove()
다음 insert <div> before과 remove당신이 확인하지 못할 경우 이후에만 befor를 요소가 (내 경우에는) 항상 있다는 것을, 필요
jQuery 플러그인 "Swapable"살펴보기
http://code.google.com/p/jquery-swapable/
"Sortable"을 기반으로하며 정렬 가능 (드래그 앤 드롭, 플레이스 홀더 등)처럼 보이지만 드래그 앤 드롭이라는 두 가지 요소 만 교환합니다. 다른 모든 요소는 영향을받지 않으며 현재 위치를 유지합니다.
이것은 @lotif 의 답변 논리를 기반으로 한 답변 이지만 좀 더 일반화되었습니다.
요소를 실제로 이동 한 후 / 앞에 추가 / 앞에 추가하는 경우
=> 복제 필요 없음
=> 이벤트 유지
발생할 수있는 두 가지 경우가 있습니다
- 한 목표는 "
.prev()ious"=> 다른 목표를.after()가질 수 있습니다. - 하나의 목표는 그것의 첫 번째 자식입니다.
.parent()=> 우리는.prepend()다른 목표를 부모에게 할 수 있습니다 .
코드
This code could be done even shorter, but I kept it this way for readability. Note that prestoring parents (if needed) and previous elements is mandatory.
$(function(){
var $one = $("#one");
var $two = $("#two");
var $onePrev = $one.prev();
if( $onePrev.length < 1 ) var $oneParent = $one.parent();
var $twoPrev = $two.prev();
if( $twoPrev.length < 1 ) var $twoParent = $two.parent();
if( $onePrev.length > 0 ) $onePrev.after( $two );
else $oneParent.prepend( $two );
if( $twoPrev.length > 0 ) $twoPrev.after( $one );
else $twoParent.prepend( $one );
});
...feel free to wrap the inner code in a function :)
Example fiddle has extra click events attached to demonstrate event preservation...
Example fiddle: https://jsfiddle.net/ewroodqa/
...will work for various cases - even one such as:
<div>
<div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
<div></div>
<div id="two">TWO</div>
</div>
This is my solution to move multiple children elements up and down inside the parent element. Works well for moving selected options in listbox (<select multiple></select>)
Move up:
$(parent).find("childrenSelector").each((idx, child) => {
$(child).insertBefore($(child).prev().not("childrenSelector"));
});
Move down:
$($(parent).find("childrenSelector").get().reverse()).each((idx, child) => {
$(opt).insertAfter($(child).next().not("childrenSelector"));
});
If you're wanting to swap two items selected in the jQuery object, you can use this method
http://www.vertstudios.com/blog/swap-jquery-plugin/
I wanted a solution witch does not use clone() as it has side effect with attached events, here is what I ended up to do
jQuery.fn.swapWith = function(target) {
if (target.prev().is(this)) {
target.insertBefore(this);
return;
}
if (target.next().is(this)) {
target.insertAfter(this);
return
}
var this_to, this_to_obj,
target_to, target_to_obj;
if (target.prev().length == 0) {
this_to = 'before';
this_to_obj = target.next();
}
else {
this_to = 'after';
this_to_obj = target.prev();
}
if (jQuery(this).prev().length == 0) {
target_to = 'before';
target_to_obj = jQuery(this).next();
}
else {
target_to = 'after';
target_to_obj = jQuery(this).prev();
}
if (target_to == 'after') {
target.insertAfter(target_to_obj);
}
else {
target.insertBefore(target_to_obj);
}
if (this_to == 'after') {
jQuery(this).insertAfter(this_to_obj);
}
else {
jQuery(this).insertBefore(this_to_obj);
}
return this;
};
it must not be used with jQuery objects containing more than one DOM element
If you have multiple copies of each element you need to do something in a loop naturally. I had this situation recently. The two repeating elements I needed to switch had classes and a container div as so:
<div class="container">
<span class="item1">xxx</span>
<span class="item2">yyy</span>
</div>
and repeat...
The following code allowed me to iterate through everything and reverse...
$( ".container " ).each(function() {
$(this).children(".item2").after($(this).children(".item1"));
});
I have done it with this snippet
// Create comments
var t1 = $('<!-- -->');
var t2 = $('<!-- -->');
// Position comments next to elements
$(ui.draggable).before(t1);
$(this).before(t2);
// Move elements
t1.after($(this));
t2.after($(ui.draggable));
// Remove comments
t1.remove();
t2.remove();
I did a table for changing order of obj in database used .after() .before(), so this is from what i have experiment.
$(obj1).after($(obj2))
Is insert obj1 before obj2 and
$(obj1).before($(obj2))
do the vice versa.
So if obj1 is after obj3 and obj2 after of obj4, and if you want to change place obj1 and obj2 you will do it like
$(obj1).before($(obj4))
$(obj2).before($(obj3))
This should do it BTW you can use .prev() and .next() to find obj3 and obj4 if you didn't have some kind of index for it already.
if nodeA and nodeB are siblings, likes two <tr> in the same <tbody>, you can just use $(trA).insertAfter($(trB)) or $(trA).insertBefore($(trB)) to swap them, it works for me. and you don't need to call $(trA).remove() before, else you need to re-bind some click events on $(trA)
The best option is to clone them with clone() method.
I think you can do it very simple. For example let's say you have next structure: ...
<div id="first">...</div>
<div id="second">...</div>
and the result should be
<div id="second">...</div>
<div id="first">...</div>
jquery:
$('#second').after($('#first'));
I hope it helps!
참고URL : https://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements
'IT' 카테고리의 다른 글
| Perl에서 부동 소수점 숫자를 어떻게 반올림합니까? (0) | 2020.05.27 |
|---|---|
| Spring RestTemplate 요청에 "Accept :"헤더를 설정하는 방법은 무엇입니까? (0) | 2020.05.27 |
| jQuery를 사용하여 페이지를 앵커로 스크롤하는 방법은 무엇입니까? (0) | 2020.05.27 |
| 현재 페이지에서 자바 스크립트를 사용하여 호스트 URL을 얻는 방법 (0) | 2020.05.27 |
| Django의 ORM을 사용하여 무작위 레코드를 가져 오는 방법은 무엇입니까? (0) | 2020.05.27 |