요소를 전환하는 기본 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 의 답변 논리를 기반으로 한 답변 이지만 좀 더 일반화되었습니다.

요소를 실제로 이동 한 후 / 앞에 추가 / 앞에 추가하는 경우
=> 복제 필요 없음
=> 이벤트 유지

발생할 수있는 두 가지 경우가 있습니다

1. 한 목표는 " .prev()ious"=> 다른 목표를 .after()가질 수 있습니다.
2. 하나의 목표는 그것의 첫 번째 자식입니다. .parent()=> 우리는 .prepend()다른 목표를 부모에게 할 수 있습니다 .

코드

이 코드는 더 짧아 질 수 있지만 가독성을 위해이 방식으로 유지했습니다. 부모 (필요한 경우)와 이전 요소를 보존하는 것은 필수입니다.

$(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>

이것은 부모 요소 내에서 여러 자식 요소를 위아래로 이동하는 솔루션입니다. 목록 상자에서 선택한 옵션을 이동하는 데 적합합니다 ( <select multiple></select>).

이동:

$(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"));
});

jQuery 객체에서 선택한 두 항목을 바꾸려면이 방법을 사용할 수 있습니다

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

첨부 된 이벤트에 부작용이 있으므로 솔루션 마녀가 clone ()을 사용하지 않기를 원했습니다.

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

둘 이상의 DOM 요소를 포함하는 jQuery 객체와 함께 사용하면 안됩니다

각 요소의 사본이 여러 개인 경우 루프에서 자연스럽게 무언가를 수행해야합니다. 나는 최근에 이런 상황을 겪었다. 전환해야 할 두 가지 반복 요소에는 클래스와 컨테이너 div가 있습니다.

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

나는이 발췌 문장으로 그것을했다

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

.after () .before () 사용 된 데이터베이스에서 obj의 순서를 변경하는 테이블을 만들었으므로 실험에서 얻은 것입니다.

$(obj1).after($(obj2))

obj2 앞에 obj1을 삽입하고

$(obj1).before($(obj2)) 

그 반대의 경우도 마찬가지입니다.

따라서 obj1이 obj4 이후에 obj3 및 obj2 뒤에 있고 obj1 및 obj2 장소를 변경하려면 다음과 같이하십시오.

$(obj1).before($(obj4))
$(obj2).before($(obj3))

BTW를 수행해야합니다. .prev () 및 .next ()를 사용하여 이미 색인이없는 경우 obj3 및 obj4를 찾을 수 있습니다.

nodeA와 nodeB가 형제이고 같은 두 개 <tr>를 좋아 <tbody>하는 경우 사용 $(trA).insertAfter($(trB))하거나 $(trA).insertBefore($(trB))교환 할 수 있습니다 . $(trA).remove()이전 에 전화 할 필요가 없습니다 . 그렇지 않으면 클릭 이벤트를 다시 바인딩해야합니다.$(trA)

$('.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/

가장 좋은 옵션은 clone () 메서드를 사용하여 복제하는 것입니다.

나는 당신이 그것을 매우 간단하게 할 수 있다고 생각합니다. 예를 들어 다음 구조가 있다고 가정 해 봅시다. ...

<div id="first">...</div>
<div id="second">...</div>

결과는

<div id="second">...</div>
<div id="first">...</div>

jquery :

$('#second').after($('#first'));

도움이 되길 바랍니다!