Подстановка объектов jquery?

Question

[d4c4237abc]

есть html код, в нем есть картинки с классом vertical_content_img, есть код jquery, с помощью которого картинки копируются и подставляются в боок slider_vertical_content. Картинки будут разные, нужно чтобы подстановка картинки соответствовала порядку блока. slider_vertical_content генерируется автоматически, вручную назначать новый класс и копировать скрипт не вариант, как можно выйти из данной ситуации?

<div class="row tabs_content justify-content-center">
                    <div class="slider_vertical col-md-6">
                        <div class="slider_vertical_content">
                        </div>
                        <div class="slider_vertical_content">
                        </div>
                        <div class="slider_vertical_content">
                        </div>
                        <div class="slider_vertical_content">
                        </div>
                        <div class="slider_vertical_content">
                        </div>
                        <div class="slider_vertical_content">
                        </div>

                    </div>
                    <div class="slider_vertical_nav col-md-2">
                        <div class="slider_vertical_nav_item">
                            <p>Сомнительная 
                                    экономия</p>
                            <img src="/img/zamer.png" alt="" class="vertical_content_img">
                        </div>
                        <div class="slider_vertical_nav_item">
                                <p>Сомнительная 
                                        экономия</p>
                                        <img src="/img/zamer.png" alt="" class="vertical_content_img"></div>
                        <div class="slider_vertical_nav_item">
                                <p>Сомнительная 
                                        экономия</p>
                                        <img src="/img/zamer.png" alt="" class="vertical_content_img"></div>
                        <div class="slider_vertical_nav_item">
                                <p>Сомнительная 
                                        экономия</p>
                                        <img src="/img/zamer.png" alt="" class="vertical_content_img"></div>
                        <div class="slider_vertical_nav_item">
                                <p>Сомнительная 
                                        экономия</p>
                                        <img src="/img/zamer.png" alt="" class="vertical_content_img"></div>
                        <div class="slider_vertical_nav_item">
                                <p>Сомнительная 
                                        экономия</p>
                                        <img src="/img/zamer.png" alt="" class="vertical_content_img"></div>

                        </div>
                  </div>

$(".vertical_content_img").clone().appendTo(".slider_vertical_content");

Answer 1

[leni_m]

$(".vertical_content_img").each(function(i) {
    $(".slider_vertical_content").eq(i).append($(this).clone());
});

может это вам поможет?

Comments

[d4c4237abc]

Подскажите, что почитать, кроме шутки"документацию", чтобы не было с этим проблем больше, к примеру, захочу чтобы контент еще в добавок генерировался, то есть создавался блок .slider_vertical_content автоматически, заранее спасибо!!!

[leni_m]

d4c4237abc, почитайте про .each()
примерно она переводится как "перебрать что-то по частям", в вашем случае, она перебирает все элементы с классом vertical_content_img, но также может перебирать обычные js массивы и объекты. Например, предположим у нас 5 элементов с таким классом на странице, то

$(".vertical_content_img").each(function(){
   ... // этот код будет выполнен 5 раз
})

также можно написать что-то внутри круглых скобочках и оно будет доступно внутри фигурных скобочек:

$(".vertical_content_img").each(function(blablabla){
   ... // здесь можно производить операции над blablabla, которое будет равно 0,1,2,3,4
})

как видно это индекс, поэтому я его назвал i.
А также почитайте про другие функции, которые я использовал, и тогда поймете что к чему.

[leni_m]

так тоже должно делать тоже самое:

$(".vertical_content_img").each(function(i, el) {
    $(".slider_vertical_content").eq(i).append(el.clone());
});

просто $(this) привычнее писать.