Добавить div в другой div нескольких одинаковых классов div

#jquery

Вопрос:

У меня есть несколько div, называемых «box». В каждом «поле» у меня есть 3 div, и я хочу добавить 2-й div в первый с помощью jquery (.prepend).

У меня есть этот jquery

 $('.image').prepend($('.header'));

 <div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

Весь «заголовок» входит в каждое «изображение»
Но я хотел бы иметь только соответствующий заголовок на его изображении.

Ответ №1:

Это время, когда вы не можете использовать одеяло $(el).append() , как вы обнаружили, каждый элемент будет добавлен.

Мы используем each для подобных ситуаций, которые выглядят следующим образом:

 $('.box').each(function(){
  // Code here
});

Теперь $(this) относится к конкретному .box вопросу.

 $('.box').each(function(){
  // find the header inside this image
  var $header = $(this).find('.header'); 
  var $image = $(this).find('.image'); 
  // Prepend to this instance this header
  $image.prepend($header);
});

Я большой поклонник each и find и настоятельно рекомендую взглянуть на оба из них в документах:

https://api.jquery.com/find/
http://api.jquery.com/jquery.each/

1. Спасибо @Djave, это не работает : jsfiddle.net/abujelo/efrjz4ms/2

2.Я внес некоторые изменения, и это работает 🙂 jsfiddle.net/abujelo/efrjz4ms/5 $('.box').each(function(){ // find the header inside the box var $header = $(this).find('.header'); // find the image inside the box var $image = $(this).find('.image'); // Prepend to this instance this header ($image).prepend($header); });

3. В любом случае, вы мне очень помогли! Спасибо

Ответ №2:

Используйте этот код, он будет работать.

 $(document).ready(function(){
$('.box').each(function(){
  // find the header inside this image
  var $header = $(this).find('.header'); 
  // Prepend to this instance this header
  $(this).find('.image').prepend($header);
});
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

сильный текст

1. Спасибо, я сделал то же самое : $('.box').each(function(){ // find the header inside the box var $header = $(this).find('.header'); // find the image inside the box var $image = $(this).find('.image'); // Prepend to this instance this header ($image).prepend($header); });

Ответ №3:

Используйте каждый из них для перебора всего изображения. Надеюсь, это поможет

 $('.image').each(function(e){

$(this).prepend($(this).next());

})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>