Question

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

我不确定如果将内容传递给main-div后如何将其重新插入原始父级。我将不胜感激任何帮助。

我无法使用ID。我只能使用课程。

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

FIDDLE

Answer 1

使用此JS片段并告诉我它是否有帮助

＆＃13;

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

＆＃13;

Answer 2

<强> External DEMO

您可以使用.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>

Answer 3

您需要在具有类容器的div上添加一些唯一性，您可以添加一个类或ID，以便在重新插入原始div时我们可以识别div。

我不认为只要我们唯一地识别这两个div，就有其他解决方案可以重新插入原始div。

请更改您的html结构，以便我们可以通过jquery进行操作。

jQuery | detach（），append（）范围

3 个答案: