如何根据页面上的位置将具有类的任何元素附加到另一个类的第一个实例？

Question

我的CMS使用小部件来显示产品，我无法操作这些小部件中的代码，但我可以在它们周围添加代码。我想在小部件下方添加 html 块，并使用JS删除、克隆和附加到小部件内的代码。规则是 html 块需要在每个块之前将它们自己附加到代码中类的第一个实例。

我现在只能使用一个简单的设置来完成这项工作，其中只有一个小部件和一个块：

var block = jQuery('.block').remove().clone();

jQuery('.widget').eq(1).append(block);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- BEGIN UNTOUCHABLE WIDGET CODE -->

<ol class="widget">

  <li>Item A</li>

  <li>Item B</li>

</ol>

<!-- END UNTOUCHABLE WIDGET CODE -->

<li class="block">Item C</li>

这会在DOM中产生以下输出

<ol class="widget">

  <li>Item A</li>

  <li>Item B</li>

  <li>Item C</li>

</ol>

但是当我有多个小部件和块时，多个块最终都会附加到最后一个小部件而不是每个块之前出现的第一个小部件。

var block = jQuery('.block').remove().clone();

jQuery('.widget').eq(1).append(block);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- BEGIN UNTOUCHABLE WIDGET CODE -->

<ol class="widget">

  <li>Item A</li>

  <li>Item B</li>

</ol>

<!-- END UNTOUCHABLE WIDGET CODE -->

<li class="block">Item C</li>

<!-- BEGIN UNTOUCHABLE WIDGET CODE -->

<ol class="widget">

  <li>Item X</li>

  <li>Item Y</li>

</ol>

<!-- END UNTOUCHABLE WIDGET CODE -->

<li class="block">Item Z</li>

在上面的代码示例中，我试图让 Item C 附加到它上面的小部件，让 Item Z 附加到那个上面的第一个小部件，依此类推。理想情况下，我可以通过这种方式将无限数量的块附加到小部件。现在，此代码将 Item C 和 Item Z 附加到页面上 class=widget 的最后一个实例。

Answer 1

其他答案没有描述导致这不起作用的原因。所以这就是我对这个答案的意图。从关于该.eq()方法的 jQuery 文档中：给定一个表示一组 DOM 元素的 jQuery 对象，.eq() 方法从该集合中的一个元素构造一个新的 jQuery 对象。提供的索引标识此元素在集合中的位置。这导致此调用jQuery('.widget').eq(1).append(block);完全按照您的描述进行。您需要迭代blockORwidget对您更有意义的任何一个。