요소를 전환하는 기본 jQuery를 기능이 있습니까?

해결법

1.난 단지 jQuery를 사용하여이 문제를 해결하는 흥미로운 방법을 발견했습니다 :

난 단지 jQuery를 사용하여이 문제를 해결하는 흥미로운 방법을 발견했습니다 :
```
$("#element1").before($("#element2"));
```
또는
```
$("#element1").after($("#element2"));
```
:)
2.파울로의 권리는하지만, 나는 확실히 그가 왜 해당 요소를 복제하는 것 아니에요. 이건 정말 필요하지 않으며 요소와 그 후손와 관련된 참조 또는 이벤트 리스너를 잃게됩니다.

파울로의 권리는하지만, 나는 확실히 그가 왜 해당 요소를 복제하는 것 아니에요. 이건 정말 필요하지 않으며 요소와 그 후손와 관련된 참조 또는 이벤트 리스너를 잃게됩니다.

여기가 아닌 복제 (jQuery를 정말 쉽게이 특정 작업을하기 위해 특별한 기능을 가지고 있지 않기 때문에) 일반 DOM 방법을 사용하여 버전 :
```
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);
}
```

3.아니, 없다,하지만 당신은 하나를 차려 드려야 수 :

아니, 없다,하지만 당신은 하나를 차려 드려야 수 :

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);

그렇지 않으면 이상한 결과를 얻을 수 선택기는 1 개 요소 각각 일치하는 경우이 경우에만 작동합니다.

4.허용 대답 또는 bobince의 대답에 의해 처리되지 않는이 문제에 가장자리의 경우, 많이 있습니다. 복제를 포함하는 다른 솔루션은 궤도에 있지만, 복제는 비용이 필요하지 않습니다. 때문에 우리는 단계 중 하나를 임시 변수에 변수 중 하나를 지정하는 것입니다있는 방법 스왑 두 변수의 오래된 문제의 클론을 유혹하고 있습니다. 이 경우 할당 (복제)을, 필요하지 않습니다. 여기 jQuery를 기반 솔루션이다 :

허용 대답 또는 bobince의 대답에 의해 처리되지 않는이 문제에 가장자리의 경우, 많이 있습니다. 복제를 포함하는 다른 솔루션은 궤도에 있지만, 복제는 비용이 필요하지 않습니다. 때문에 우리는 단계 중 하나를 임시 변수에 변수 중 하나를 지정하는 것입니다있는 방법 스왑 두 변수의 오래된 문제의 클론을 유혹하고 있습니다. 이 경우 할당 (복제)을, 필요하지 않습니다. 여기 jQuery를 기반 솔루션이다 :
```
function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};
```
5.이러한 답변의 대부분은 다른 사람들이 불필요하게 그들이 사실도 일 경우 복잡, 일반적인 경우에 단순히 잘못입니다. JQuery와는 .before 및 후론 방법은 당신이 원하는 무엇의 대부분을하지만, 당신이 3 요소 방법 많은 스왑 알고리즘의 작업이 필요합니다. 그것은 매우 간단합니다 - 당신이 주변에 물건을 이동하는 동안 자리로 임시 DOM 요소를 확인합니다. 이 부모 나 형제 자매보고 할 필요는 없으며, 확실히 더 복제 할 필요가 ...

이러한 답변의 대부분은 다른 사람들이 불필요하게 그들이 사실도 일 경우 복잡, 일반적인 경우에 단순히 잘못입니다. JQuery와는 .before 및 후론 방법은 당신이 원하는 무엇의 대부분을하지만, 당신이 3 요소 방법 많은 스왑 알고리즘의 작업이 필요합니다. 그것은 매우 간단합니다 - 당신이 주변에 물건을 이동하는 동안 자리로 임시 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 온도를 넣어

2) 그 전에이 이동

3) 임시 후에 그 이동

3B) 제거 온도

그럼 간단하게
```
$(selectorA).swapWith(selectorB);
```
DEMO : http://codepen.io/anon/pen/akYajE
6.당신은 하나 할 것, 두 개의 클론을 필요가 없습니다. 파올로 Bergantino 응답을 촬영 우리는이 :

당신은 하나 할 것, 두 개의 클론을 필요가 없습니다. 파올로 Bergantino 응답을 촬영 우리는이 :
```
jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        $(to).replaceWith(this);
        $(this).replaceWith(copy_to);
    });
};
```
빨리해야한다. 두 요소의 작은에 전달하는 것은 일을 가속화해야한다.

7.나는 전에이 같은 기술을 사용했다. 나는 http://mybackupbox.com의 커넥터 목록을 위해 사용

나는 전에이 같은 기술을 사용했다. 나는 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');

8.나는 당신이 위 또는 아래로 선택한 여러 옵션을 이동할 수있는 기능을했습니다

나는 당신이 위 또는 아래로 선택한 여러 옵션을 이동할 수있는 기능을했습니다

$('#your_select_box').move_selected_options('down');
$('#your_select_boxt').move_selected_options('up');

종속 관계 :

$.fn.reverse = [].reverse;
function swapWith() (Paolo Bergantino)

첫 번째 / 마지막으로 선택한 옵션은 위 / 아래로 이동할 수 있는지 여부를 먼저 확인합니다. 그런 다음 모든 요소와 호출을 통해 루프

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);
}

9.복제가없는 다른 하나

복제가없는 다른 하나

나는 실제와 스왑에 소액의 요소가 :
```
            $nominal.before('<div />')
            $nb=$nominal.prev()
            $nominal.insertAfter($actual)
            $actual.insertAfter($nb)
            $nb.remove()
```
다음 삽입
(내 경우에는 그것이) 이전과 제거는 확인하지 못할 경우 이후에만 befor를 요소가 항상 있다는 것을, 필요
10."스왑"을 플러그인 jQuery를 살펴

"스왑"을 플러그인 jQuery를 살펴

http://code.google.com/p/jquery-swapable/

그것은 "정렬 가능한"기반으로 구축하고 외모는 정렬 (드래그 앤 드롭, 자리 등)하지만 같은 두 요소를 교환 : 드래그 떨어졌다. 다른 모든 요소는 영향을 현재 위치에 숙박하지 않습니다.
11.이것은 @ lotif의 대답 로직을 기반으로 대답이지만, 더 일반화 비트

이것은 @ lotif의 대답 로직을 기반으로 대답이지만, 더 일반화 비트

당신은 APPEND / 앞에 추가 / 후 요소는 실제로 이동하기 전에 경우 =>에는 복제가 필요하지 => 이벤트 유지

이 코드는도 단축 할 수 있습니다,하지만 난 그것을 가독성이 방법을 지켰다. (필요한 경우) 부모를 prestoring 이전 요소 것은 필수입니다 있습니다.
```
$(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 );

});
```
... 함수의 내부 코드를 감싸 주시기 :)

예 바이올린 이벤트 보존을 보여 부착 된 별도의 클릭 이벤트가 ... 예 바이올린 : https://jsfiddle.net/ewroodqa/

... 다양한 경우에 작동합니다 - 심지어 하나의 같은 :
```
<div>
  <div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
  <div></div>
  <div id="two">TWO</div>
</div>
```
12.이것은 부모 요소 내부 위아래로 여러 어린이 요소를 이동 내 솔루션입니다. 목록 상자에서 선택한 옵션을 이동 잘 작동합니다 (<선택 배수> )

이것은 부모 요소 내부 위아래로 여러 어린이 요소를 이동 내 솔루션입니다. 목록 상자에서 선택한 옵션을 이동 잘 작동합니다 (<선택 배수> )

이동:
```
$(parent).find("childrenSelector").each((idx, child) => {
    $(child).insertBefore($(child).prev().not("childrenSelector"));
});
```
아래로 이동:
```
$($(parent).find("childrenSelector").get().reverse()).each((idx, child) => {
    $(opt).insertAfter($(child).next().not("childrenSelector"));
});
```
13.스왑에 jQuery 오브젝트에서 선택한 두 항목을 원하는 경우, 당신은이 방법을 사용할 수 있습니다

스왑에 jQuery 오브젝트에서 선택한 두 항목을 원하는 경우, 당신은이 방법을 사용할 수 있습니다

http://www.vertstudios.com/blog/swap-jquery-plugin/

14.내가 솔루션 마녀가 부착 된 이벤트와 부작용이 있기 때문에 클론 ()를 사용하지 않는 원, 여기에 내가하고 결국 무엇인가

내가 솔루션 마녀가 부착 된 이벤트와 부작용이 있기 때문에 클론 ()를 사용하지 않는 원, 여기에 내가하고 결국 무엇인가

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;
};

그것은 jQuery를 하나 개 이상의 DOM 요소를 포함하는 객체와 함께 사용할 수 없습니다

15.각 요소의 여러 사본이있는 경우 자연스럽게 루프에서 뭔가를 할 필요가있다. 나는 최근에이 문제를 가지고 있었다. 두 반복 요소는 정말로했다 클래스와 컨테이너 사업부를 전환 할 필요 :

각 요소의 여러 사본이있는 경우 자연스럽게 루프에서 뭔가를 할 필요가있다. 나는 최근에이 문제를 가지고 있었다. 두 반복 요소는 정말로했다 클래스와 컨테이너 사업부를 전환 할 필요 :
```
<div class="container">
  <span class="item1">xxx</span>
  <span class="item2">yyy</span>
</div> 
and repeat...
```
다음 코드는 나에게 모든 것을 반복 및 역방향 수 ...
```
$( ".container " ).each(function() {
  $(this).children(".item2").after($(this).children(".item1"));
});
```

16.나는이 조각으로했을

나는이 조각으로했을

// 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();

17.난 내가 실험이 대상에서 후론 () .before (),이 때문에 사용되는 데이터베이스에 OBJ의 순서를 변경하기위한 테이블을했다.

난 내가 실험이 대상에서 후론 () .before (),이 때문에 사용되는 데이터베이스에 OBJ의 순서를 변경하기위한 테이블을했다.
```
$(obj1).after($(obj2))
```
obj2보다 이전으로 obj1 삽입하고,
```
$(obj1).before($(obj2)) 
```
부회장 역을한다.

그래서으로 obj1은 OBJ4의 후 OBJ3과 obj2보다 이후 인 경우, 당신은 변화의 장소 OBJ1 원한다면 당신처럼 그것을 할 것입니다 obj2보다
```
$(obj1).before($(obj4))
$(obj2).before($(obj3))
```
이 그것을해야 BTW 당신은 .prev 사용할 수 있습니다 () 당신은 이미 그것을 위해 인덱스의 일종을 가지고 있지 않은 경우 다음 내용은 () OBJ3 찾아 OBJ4 수 있습니다.

18.

$('.five').swap('.two');

이 같은 jQuery를 함수를 만듭니다

$.fn.swap = function (elem) 
{
    elem = elem.jquery ? elem : $(elem);
    return this.each(function () 
    {
        $('<span></span>').insertBefore(this).before(elem.before(this)).remove();
    });
};

https://jsfiddle.net/ARTsinn/TVjnr/에서 야닉 기네스 덕분에

19.nodeA에서와 노드 B는 형제 자매가있는 경우, 좋아하는 두 개의 같은 에서, 당신은 단지 $ (TRA) .insertAfter ($ (TRB)) 또는 $ (TRA) .insertBefore ($ (TRB)) 스왑에 사용할 수 있습니다 그, 그것은 나를 위해 작동합니다. 당신이 호출 할 필요는 없습니다 $ (TRA) .remove () 전에 다른 사람이 $에 재 바인드 약간의 클릭 이벤트에 필요 (TRA)

nodeA에서와 노드 B는 형제 자매가있는 경우, 좋아하는 두 개의 같은 에서, 당신은 단지 $ (TRA) .insertAfter ($ (TRB)) 또는 $ (TRA) .insertBefore ($ (TRB)) 스왑에 사용할 수 있습니다 그, 그것은 나를 위해 작동합니다. 당신이 호출 할 필요는 없습니다 $ (TRA) .remove () 전에 다른 사람이 $에 재 바인드 약간의 클릭 이벤트에 필요 (TRA)
20.필요가 순간 스왑 요소에 대한 모든 주요 브라우저 JQuery와 사용 없습니다. 기본 DOM 방법은 insertAdjacentElement는 상관없이이있는 방법 트릭을하지 않습니다 :

필요가 순간 스왑 요소에 대한 모든 주요 브라우저 JQuery와 사용 없습니다. 기본 DOM 방법은 insertAdjacentElement는 상관없이이있는 방법 트릭을하지 않습니다 :
```
var el1 = $("el1");
var el2 = $("el2");
el1[0].insertAdjacentElement("afterend", el2[0]);
```
21.가장 좋은 방법은 클론 () 메소드를 복제하는 것입니다.

가장 좋은 방법은 클론 () 메소드를 복제하는 것입니다.
22.나는 당신이 매우 간단 할 수 있다고 생각합니다. 예하지 말라의는 다음 구조를 가지고 말 : ...

나는 당신이 매우 간단 할 수 있다고 생각합니다. 예하지 말라의는 다음 구조를 가지고 말 : ...
```
<div id="first">...</div>
<div id="second">...</div>
```
그 결과는해야한다
```
<div id="second">...</div>
<div id="first">...</div>
```
JQuery와 :
```
$('#second').after($('#first'));
```
나는 그것이 도움이되기를 바랍니다!

from https://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 처리되지 않는 형식 오류는 : 물체 [대물 윈도우]의 속성 '$'는 함수가 아니다 (0)	2020.10.17
[JQUERY] AJAX는 크롬에 / DELETE 대신 GET / POST / PUT의 옵션을 전송? (0)	2020.10.17
[JQUERY] JQuery와이 - 전역 변수로 아약스 응답을 저장 (0)	2020.10.17
[JQUERY] n 번째의 jQuery 요소를 얻는 방법 (0)	2020.10.17
[JQUERY] jQuery를 가진 요소의 ID 변경 (0)	2020.10.17

복붙노트

[JQUERY] 요소를 전환하는 기본 jQuery를 기능이 있습니까?

요소를 전환하는 기본 jQuery를 기능이 있습니까?

해결법

1.난 단지 jQuery를 사용하여이 문제를 해결하는 흥미로운 방법을 발견했습니다 :

2.파울로의 권리는하지만, 나는 확실히 그가 왜 해당 요소를 복제하는 것 아니에요. 이건 정말 필요하지 않으며 요소와 그 후손와 관련된 참조 또는 이벤트 리스너를 잃게됩니다.

3.아니, 없다,하지만 당신은 하나를 차려 드려야 수 :

6.당신은 하나 할 것, 두 개의 클론을 필요가 없습니다. 파올로 Bergantino 응답을 촬영 우리는이 :

7.나는 전에이 같은 기술을 사용했다. 나는 http://mybackupbox.com의 커넥터 목록을 위해 사용

8.나는 당신이 위 또는 아래로 선택한 여러 옵션을 이동할 수있는 기능을했습니다

9.복제가없는 다른 하나

10."스왑"을 플러그인 jQuery를 살펴

11.이것은 @ lotif의 대답 로직을 기반으로 대답이지만, 더 일반화 비트

12.이것은 부모 요소 내부 위아래로 여러 어린이 요소를 이동 내 솔루션입니다. 목록 상자에서 선택한 옵션을 이동 잘 작동합니다 (<선택 배수> )

13.스왑에 jQuery 오브젝트에서 선택한 두 항목을 원하는 경우, 당신은이 방법을 사용할 수 있습니다

14.내가 솔루션 마녀가 부착 된 이벤트와 부작용이 있기 때문에 클론 ()를 사용하지 않는 원, 여기에 내가하고 결국 무엇인가

15.각 요소의 여러 사본이있는 경우 자연스럽게 루프에서 뭔가를 할 필요가있다. 나는 최근에이 문제를 가지고 있었다. 두 반복 요소는 정말로했다 클래스와 컨테이너 사업부를 전환 할 필요 :

16.나는이 조각으로했을

17.난 내가 실험이 대상에서 후론 () .before (),이 때문에 사용되는 데이터베이스에 OBJ의 순서를 변경하기위한 테이블을했다.

18.

20.필요가 순간 스왑 요소에 대한 모든 주요 브라우저 JQuery와 사용 없습니다. 기본 DOM 방법은 insertAdjacentElement는 상관없이이있는 방법 트릭을하지 않습니다 :

21.가장 좋은 방법은 클론 () 메소드를 복제하는 것입니다.

22.나는 당신이 매우 간단 할 수 있다고 생각합니다. 예하지 말라의는 다음 구조를 가지고 말 : ...

'JQUERY' 카테고리의 다른 글

티스토리툴바