Добавить div в другой div в нескольких экземплярах с помощью jQuery
Я пытаюсь move весь div внутри другого div верхнего уровня с помощью jQuery. Для одного экземпляра этого действия предоставленный здесь ответ отлично работает здесь, но в моем случае у меня есть несколько экземпляров этих div, которые мне нужно переместить.
Когда я применяю приведенный выше код, все .film-desc рекурсивно перемещались в каждый .grid-item.
Действие должно запускаться с помощью:
<span><i class = "fas fa-list"></i></span>
Пока код у меня должен выглядеть так:
$(".fa-list").click(function() {
$(this).siblings().next(".film-desc").appendTo(".card-image");
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
<i class = "fas fa-list"></i>
</span>
<div class = "grid-item">
<div class = "card">
<div class = "card-image">
<img src = "#">
<div class = "card-data">
<h5>1983</h5>
<div>
<span>Q: 6.3</span>
<span>R: 6.8</span>
<span>A: 3.6</span>
</div>
<div>
<span>M</span>
<span>N</span>
<span>P</span>
</div>
</div>
</div>
<div class = "film-desc">
content
</div>
</div>
</div>
<div class = "grid-item"></div>
<div class = "grid-item"></div>
<div class = "grid-item"></div>
<div class = "grid-item"></div>Спасибо за комментарии. Должны ли люди из любопытства голосовать против, когда они делают комментарий? Я действительно попытался задать вопрос, fa-list был в моем первоначальном вопросе только потому, что я не включил его там, где ожидал you, тогда вы голосуете против? В любом случае спасибо за комментарий.
В вопросе упоминается использование fa-list и включен сценарий, который ссылается на него, однако он не был включен в разметку, чтобы показать, как сценарий будет (или должен) его использовать. Это определяет неполный / неоднозначный вопрос. Пока такая проблема не будет устранена, вопрос может быть отклонен. @hello Edit: также это полностью зависит от пользователей, хотят ли они проголосовать против вопроса или нет. Они заработали репутацию, за которую проголосовали против, они могут выбирать, стоит ли, по их мнению, ваш вопрос отрицать или нет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете перебрать их и переместить каждый в соответствующий div, например:
$(".fa-list").click(function(){
$('.grid-item').each(function(){
$(this).find(".film-desc").appendTo( $(this).find('.card-image') );
});
})
Рабочий фрагмент:
$("button").click(function() {
$('.grid-item').each(function() {
$(this).find(".film-desc").appendTo($(this).find('.card-image'));
});
}).card-image {
background-color: yellow;
border: 1px solid;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type = "button">Move divs</button>
<div class = "grid-item">
<div class = "card">
<div class = "card-image">
<div class = "card-data">
<div>
<span>Q: 6.3</span>
<span>R: 6.8</span>
<span>A: 3.6</span>
</div>
<div>
<span>M</span>
<span>N</span>
<span>P</span>
</div>
</div>
</div>
<div class = "film-desc">
content
</div>
</div>
</div>
<br>
<div class = "grid-item">
<div class = "card">
<div class = "card-image">
<div class = "card-data">
<div>
<span>Q: 6.3</span>
<span>R: 6.8</span>
<span>A: 3.6</span>
</div>
<div>
<span>M</span>
<span>N</span>
<span>P</span>
</div>
</div>
</div>
<div class = "film-desc">
content
</div>
</div>
</div>
<br>
<div class = "grid-item">
<div class = "card">
<div class = "card-image">
<div class = "card-data">
<div>
<span>Q: 6.3</span>
<span>R: 6.8</span>
<span>A: 3.6</span>
</div>
<div>
<span>M</span>
<span>N</span>
<span>P</span>
</div>
</div>
</div>
<div class = "film-desc">
content
</div>
</div>
</div>
<br>
<div class = "grid-item">
<div class = "card">
<div class = "card-image">
<div class = "card-data">
<div>
<span>Q: 6.3</span>
<span>R: 6.8</span>
<span>A: 3.6</span>
</div>
<div>
<span>M</span>
<span>N</span>
<span>P</span>
</div>
</div>
</div>
<div class = "film-desc">
content
</div>
</div>
</div>Это работает именно так, как я хочу. Спасибо. Не уверен, что и почему вы получаете отрицательные голоса, но у меня это сработало. Спасибо.
@taplar не могли бы вы поделиться с нами причиной отклонения рабочего ответа?
У
fa-list, как у вас есть разметка, 0 братьев и сестер.