jQuery = detach()，append()作用域

Question

我有一个main-div和两个带有容器类的div。带有容器类的div有一个具有不同内容的内容类的子div。我希望用户点击他们选择的容器并将其内容传输到main-div。然后，当用户单击main- div 时，我想将该内容传输回原来的div。

我不知道如何在内容被传递后从main-div中分离出来，并将其重新插入到原来的父目录中。我很感谢你的帮助。

我不能用身份证。我只能用课程。

HTML

<div class="main-div">
</div>


<div class="container">
  <div class="contents">
  A
  </div>
</div>

<div class="container">
  <div class="contents">
  B
  </div>
</div>

CSS

.main-div {
  width: 100wv;
  height: 200px;
  background: yellow;
  cursor: pointer;
}

.container {
  width: 40vw;
  height: 150px;
  border: 2px solid purple;
  display: inline-block;
}

.contents {
  width: 50px;
  height: 50px;
  background: green;
}

JS

  $('.container').click(function() {
    var child = $(this).children();
    console.log('child ' + child);
    $('.main-div').append(child);
  });

  $('.main-div').click(function(child) {
    console.log('child ' + child);
    $('.main-div').detach(child);
  });

小提琴

Answer 1

为容器设置ids

<div class="main-div">
</div>


<div class="container" id="container1">
  <div class="contents">
    A
  </div>
</div>

<div class="container" id="container2">
  <div class="contents">
    B
  </div>
</div>

并在单击以标识父元素时为子元素设置数据属性。

$(function() {
  $('.container').click(function() {
    var child = $(this).children();
    child.attr("data-parentcontainer", this.id);
    $('.main-div').append(child);
  });

  $('.main-div').click(function(child) {
    var child = $(this).children();
    child.appendTo($("#" + child.data("parentcontainer")));
  });
});

JSFIDDLE

Answer 2

使用这个JS片段，让我知道它是否有帮助。

​

  $('.container').click(function() {
  console.log('foo');
    var child = $(this).html();
    console.log(child);
    $('.main-div').append(child);
  });
  
  $('.main-div').click(function() {
  console.log('foo');
    var main = $(this).html();
    if(main.length != 0) {
    	$('.main-div').empty();
    }
    else
    	console.log('Main div is empty');
  });

​

Answer 3

外部演示

您可以使用.detach()和.appendTo()，但同时还必须保留一些标识，以便从.contents div中获取信息。因此，我使用data-address属性作为.contents的父属性，以便将其附加到那里。有关代码将发生什么的详细说明，请参见内联注释。

​

$('.main-div').on('click', function(e) {
  var elem = $(e.target); //capture click event on .main-div
  if (elem.hasClass('contents')) { //check if click was on .contents div
    var text = elem.text().trim(); //if yes then get its text
    elem.detach();//detach the element
    elem.appendTo($('div[data-address=' + text + ']')); //attach it based on attribute selector of jquery
  }
});
$('.contents').on('click', function() {
  var elem = $(this);//get the element
  elem.closest('.container').attr('data-address', elem.text().trim())
  //add or update data-address attribute of its closest parent i.e. .container
  elem.detach();//detach the element
  elem.appendTo($('.main-div')); //append it to .main-div
})

.main-div {
  width: 200px;
  height: 200px;
  background: yellow;
  cursor: pointer;
}

.container {
  width: 150px;
  height: 150px;
  border: 2px solid purple;
}

.contents {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">
</div>

<div class="container">
  <div class="contents">
    A
  </div>
</div>

<div class="container">
  <div class="contents">
    B
  </div>
</div>

​