Jquery клонировать элементы

Question

У меня есть следующий блок:

<div class="card">
    <img src="img/pizza-plus/pizza-classic.jpg" alt="image" class="card-image" />
    <div class="card-text">
        <div class="card-heading">
            <h3 class="card-title card-title-reg">Пицца Классика</h3>
        </div>
        <div class="card-info">
            <div class="ingredients">Соус томатный, сыр «Моцарелла», сыр «Пармезан», ветчина, салями, грибы.
            </div>
        </div>
        <div class="card-buttons">
            <button class="button button-primary button-add-cart">
                <span class="button-card-text">В корзину</span>
                <span class="button-cart-svg"></span>
            </button>
            <strong class="card-price-bold">510 ₽</strong>
        </div>
    </div>
</div>

Как можно с помощью jquery клонировать допустим название Пицца Классика, цену и вставить в новые элементы?

Answer 1

Вы можете использовать метод clone() читать тут

Answer 2

const getData=(id=1)=>{
    id = id < 1 ? 1 : id; 
    const $main = $(`.card:eq(${id-1})`);
    const obj = {};
    obj.name = $main.find('.card-title:first').text();
    obj.price = $main.find('.card-price-bold:first').text();
    obj.ingredients = $main.find('.ingredients:first').text();
    if(obj.ingredients.indexOf(',') !== -1)obj.ingredients = obj.ingredients.split(', ');
    else obj.ingredients = [obj.ingredients];
    return obj;
};

(()=>{
    let x = getData(1);
    // console.log(x); // там не влазиет снизу
    $('body').append(`<div class="myblock">
        <div>
            <span>${x.name}</span>
        </div>
        <div>
            <span>${x.ingredients.join(' | ')}</span>
        </div>
        <div>
            <span>${x.price}</span>
        </div>
    </div>`);
})();

.myblock{
    border:1px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-text">
        <div class="card-heading">
            <h3 class="card-title card-title-reg">Пицца Классика</h3>
        </div>
        <div class="card-info">
            <div class="ingredients">Соус томатный, сыр «Моцарелла», сыр «Пармезан», ветчина, салями, грибы</div>
        </div>
        <div class="card-buttons">
            <button class="button button-primary button-add-cart">
                <span class="button-card-text">В корзину</span>
                <span class="button-cart-svg"></span>
            </button>
            <strong class="card-price-bold">510 ₽</strong>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Jquery клонировать элементы

Ответы (2 шт):