Question

我正在使用woocommerce为我的公司创建一个在线定制橱柜门店。我们不得不使用几个插件来帮助计算定制橱柜门所需的许多规格。但是因为正在使用多个插件，所以显示属性的顺序并不是我们希望它出现在购物车上的方式。购物车表的产品部分按此顺序显示所有产品属性的描述列表：

木材类型：
门的厚度：
无聊（7.50美元）：
单位：
规格 - 距离1：
规格 - 距离2：
宽度（in）：
高度（in）：
总面积（平方英尺）：

HTML显示在购物车中：

<dl class="variation">
<dt class="variation-WoodType">Wood Type:</dt>
    <dd class="variation-WoodType"><p>Mahogany</p></dd>
<dt class="variation-ThicknessofDoor">Thickness of Door:</dt>
    <dd class="variation-ThicknessofDoor"><p>3/4"</p></dd>
<dt class="variation-Boringspanclasswoocommerce-Price-amountamountspanclasswoocommerce-Price-currencySymbol36span750span">Boring (<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#036;</span>7.50</span>):</dt>
    <dd class="variation-Boringspanclasswoocommerce-Price-amountamountspanclasswoocommerce-Price-currencySymbol36span750span"><p>Yes</p></dd>
<dt class="variation-Unit">Unit:</dt>
    <dd class="variation-Unit"><p>Inches</p></dd>
<dt class="variation-Specs-Distance1">Specs - Distance 1:</dt>
    <dd class="variation-Specs-Distance1"><p>1</p></dd>
<dt class="variation-Specs-Distance2">Specs - Distance 2:</dt>
    <dd class="variation-Specs-Distance2"><p>2</p></dd>
<dt class="variation-Widthin">Width (in):</dt>
    <dd class="variation-Widthin"><p>13</p></dd>
<dt class="variation-Heightin">Height (in):</dt>
    <dd class="variation-Heightin"><p>18</p></dd>
<dt class="variation-TotalAreasqft">Total Area (sq. ft.):</dt>
    <dd class="variation-TotalAreasqft"><p>1.63</p></dd>
</dl>

如果＆＃34;无聊＆＃34;未选择购物车将显示如下：

木材类型：
门的厚度：
宽度（in）：
高度（in）：
总面积（平方英尺）：

HTML：

<dl class="variation">
<dt class="variation-WoodType">Wood Type:</dt>
    <dd class="variation-WoodType"><p>Poplar</p></dd>
<dt class="variation-ThicknessofDoor">Thickness of Door:</dt>
    <dd class="variation-ThicknessofDoor"><p>3/4"</p></dd>
<dt class="variation-Widthin">Width (in):</dt>
    <dd class="variation-Widthin"><p>22</p></dd>
<dt class="variation-Heightin">Height (in):</dt>
    <dd class="variation-Heightin"><p>22</p></dd>
<dt class="variation-TotalAreasqft">Total Area (sq. ft.):</dt>
    <dd class="variation-TotalAreasqft"><p>3.36</p></dd>
</dl>

我们希望与Boring相关联的4个属性（Boring，Unit，Specs-Distance 1：，Specs - Distance 2 :)显示在Width，Height和Total Area下面。就像这样：

木材类型：
门的厚度：
宽度（in）：
高度（in）：
总面积（平方英尺）：
无聊（7.50美元）：
单位：
规格 - 距离1：
规格 - 距离2：

使用jQuery似乎要简单得多，而不是更改每个属性在购物车中显示的优先级。我已经使用了append（）和before（）函数来重新排列和元素的列表项，但问题是如果购物车中有多个项目，它会将其他购物车项目中的元素放入第一个清单。这是我的jQuery代码，只需移动＆＃34; Width＆＃34;在＆＃34;单元＆＃34;之前的属性属性作为测试。

(function ($) {

   $('.variation dt.variation-Unit').before($('.variation dt.variation-Widthin'));
   $('.variation dd.variation-Unit').before($('.variation dd.variation-Widthin'));
}
})(jQuery);

此代码使用类变体-Widthin获取所有和元素，并将其放在第一次变换单元＆＃39;之前。显示在购物车上。我已经尝试了each（），结果将每个类中的所有元素都放了两次，因此它看起来加倍了。如果有人能告诉我我的代码丢失了什么，那么只有元素被移动到它所属的每个购物车项目中才会有很大帮助。如果有更好的方法可以解决这个问题，我很乐意听你说。

Answer 1

如果在页面上预先填充了这些内容，并且因为它们都有一个唯一的类，即variation-WoodType，您可以在CSS中使用flex命令元素。

如果您正专注于使用jQuery，正如您的评论所说，我建议在声明要移动的元素时更具体。因此，在每个$.each周围进行tr，然后安排包含的子项。类似于以下内容，将TABLE_ROW_CLASS重命名为行的类。

$('tr.TABLE_ROW_CLASS').each(function() { 
  $(this).find('dt.variation-Unit').before($(this).find('dt.variation-Widt‌hin')); 
});

编辑：根据上面的OP评论查找。

Answer 2

使用插入之前或之后插入。例如。

<div class= "variation">
    <p class="paragraph1">1</p>
    <p class="paragraph2">2</p>
    <p class="paragraph3">3</p>
    <p class="paragraph4">4</p>
    <p class="paragraph5">5</p>
<div>

$(".paragraph5").each(function() {
    $(this).insertBefore($(this).closest(".variation").find(".paragraph1").first());
})

使用jQuery

2 个答案: