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

Question

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

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

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>

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

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>

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

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

即使 .widget 我也需要它才能工作列表被 3 <div> 包围s(我最初错过了)，所以不可触及的代码如下所示:

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

我尝试了它，但无法让它工作 - 只能删除该 block 而不是删除并附加:https://jsfiddle.net/2obxhc35/

Answer 1

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

我们怎样才能做到这一点？

那么就遵循这个想法:

1. 使用 $('.block').each() 获取每个 .block
2. 使用 $(this).remove(); 从 DOM 中删除 .block；
3. 使用 $('.widget').eq(index).append(block); 将 .block 附加到之前的 .widget 中

$('.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>

替代方案:

1. 使用 $('.block').each() 获取每个 .block
2. 使用 $(this).prev('.widget') 获取上一个 .widget
3. 使用 $(this).remove(); 从 DOM 中删除 .block；
4. 使用 widget.append(block) 将 .block 附加到之前的 .widget

检查此实现:

$('.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>