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的最后一个实例。

*更新**

即使.widget列表周围有3个<div>（我本来想念），我也需要它工作，因此不可触摸的代码看起来像这样：

<div>
  <div>
    <div>
      <ol class="widget">....</ol>
    </div>
  </div>
</div>

我尝试了一下，但无法正常工作-仅设法删除了该块，而不是删除并附加：https://jsfiddle.net/2obxhc35/

Answer 1

主要思想是找到每个.block，然后找到先前的.widget，然后将.block附加到找到的.widget。

我们该怎么做？

请遵循以下想法：

通过.block获取每个$('.block').each()
使用.block将$(this).remove();从DOM中删除
将.block和.widget附加到上一个$('.widget').eq(index).append(block);

$('.block').each(function(index, value) {
  let block = $(this).remove();
  $('.widget').eq(index).append(block);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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 -->
<div>
  <div>
    <div>
      <ol class="widget">
        <li>Item X</li>
        <li>Item Y</li>
      </ol>
    </div>
  </div>
</div>


<!-- END UNTOUCHABLE WIDGET CODE -->
<li class="block">Item Z</li>

替代：

通过.block获取每个$('.block').each()
使用.widget获取上一个$(this).prev('.widget')
使用.block将$(this).remove();从DOM中删除
将.block和.widget附加到上一个widget.append(block)

检查此实现：

$('.block').each(function() {
  let widget = $(this).prev('.widget');
  let block = $(this).remove();
  widget.append(block);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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>

Answer 2

分别在每个.block上进行迭代，然后搜索前一个.widget，而不使用索引：

jQuery('.block').each(function() {
  let target = $(this).prev('.widget');
  let block = $(this).remove();
  target.append(block);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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>

Answer 3

其他答案未描述导致此失败的原因。所以这就是我的答案。

来自jQuery文档中有关.eq()方法的信息：

给出一个表示一组DOM元素的jQuery对象，即.eq（）方法从其中的一个元素构造一个新的jQuery对象设置。提供的索引标识此元素在设置。

此调用jQuery('.widget').eq(1).append(block);的作用与您描述的完全相同。

您需要遍历对您更有意义的block或widget。

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

*更新**

3 个答案:

我们该怎么做？

替代：

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

*****更新******

3 个答案:

我们该怎么做？

替代：

*更新**