jQuery | detach(), append() scope

Question

У меня есть main-div и два divs с классом контейнер. У 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); 
    }); 

FIDDLE

Answer 1

Набор идентификаторов для контейнеров

<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) { 
 
    \t $('.main-div').empty(); 
 
    } 
 
    else 
 
    \t console.log('Main div is empty'); 
 
    });

Answer 3

External DEMO

Вы можете использовать .detach() и .appendTo(), но вместе с тем вам нужно сохранить идентификационную информацию, чтобы знать, что .contents было подобрано. Поэтому я использую атрибут 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 4

Вы должны добавить уникальность на DIV, которые имеют контейнер класса, вы можете добавить класс или идентификатор, так что, когда вставив обратно к исходному DIV можно определить DIV.

Я не думаю, что есть другое решение для повторного ввода обратно в исходный div, когда мы однозначно идентифицируем оба div.

, пожалуйста, измените структуру html, чтобы мы могли манипулировать через jquery.