Клонировать конкретное содержимое div и поместить в другой div

Question

У меня есть небольшая проблема, когда я пытаюсь клонировать элемент с помощью jquery. У меня есть это, я хочу клонировать элемент div, называемый clone, и вставить другой элемент div в другое место.

<li class="jqModal"  >
    <div class="clone">
    <div class="image">
            <img src="<?php echo $products[$j]['thumb']; ?>"
                 title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" />
    </div>
    <h2><a href=""><?php echo $products[$j]['name']; ?></a></h2>
    <strong class="price"><?php echo $products[$j]['price']; ?></strong>
    <a href="<?php echo $products[$j]['href']; ?>">More details</a>
    </div>


</li>`

Iиспользуйте это в моем документе готов

$(document).ready(function () {
   $(".product-list li").hover(
      function () {
         //replace image and id
         $var = $(this).clone(false).find("#clone").
         $('#div-to-replace').replaceWith($var);
      }
   );
});

Но это не работает ни один совет, спасибо заранее.:)

Answer 1

Здесь я вижу 3 проблемы, в первую очередь эту строку:

$var = $(this).clone(false).find("#clone").

Вам нужно ; в конце вместо ., чтобы вы не получили синтаксическую ошибку,а также clone - это класс , а не #ID, поэтому вам нужно .find('.clone').Тогда вот:

$('#div-to-replace').replaceWith($var);

То, что <div> вы замените, полностью исчезнет, ​​поэтому в следующий раз это не сработает, я думаю, что вы хотите вот что:

var product = $(this).find('.clone').clone();
$('#div-to-replace').empty().append(product);

Это не заменяет #div-to-replace, но вместо этого помещает туда контент, в противном случае вы пропустите <div> при наведении следующего продукта.Также обязательно используйте var при создании локальных переменных, чтобы не создавать нежелательных побочных эффектов с глобальной переменной, которую вы получаете без нее:)

Answer 2

Попробуйте это:

$(".product-list li").hover(
    function () {
        //replace image and id
        $var = $('.clone', this).clone();
        $('#div-to-replace').replaceWith($var);
    }
);

Изменения в вашем коде:

1. Вы хотите клонировать элемент с классом «клон», а не с идентификатором: #clone -> .clone
2. Если сначала клонировать, а затем найти элемент, значит, вы слишком клонируете, поэтому я изменил селектор для клонирования
3. В конце этой строки есть точка, где должна быть точка с запятой.