jquery在页面加载时克隆div的内容

debugcn 发表于 Dev

泽斯塔希尔

我想在页面加载时克隆 div 中的一个元素并将其附加到另一个 div 没有任何点击事件。这是我的代码：

<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>

我正在尝试上述方法，但它不起作用。

马蒙

在每次迭代中，您都将附加到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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。