jQuery在頁面加載時克隆div的內容

Question

我想在div中克隆一個元素並將其附加到另一個div，而不會在頁面加載時發生任何click事件。 這是我的代碼：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hs-search-results__listing"> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> </ul> <script> $('.hs-search-results__listing li').each(function(){ $(this).find('.hs-search-results__title').clone().appendTo(".more-link-container"); }); </script> 

我正在嘗試上述操作，但無法正常工作。

Answer 1

在每次迭代中，您將使用DOM 中可用的類more-link-container附加到所有元素。 您應該僅將元素附加到相關的p元素。

更改

.appendTo(".more-link-container")

至

.appendTo($(this).find(".more-link-container"))

 $('.hs-search-results__listing li').each(function(){ $(this).find('.hs-search-results__title').clone().appendTo($(this).find(".more-link-container")); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hs-search-results__listing"> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> </ul>