Question

我在页面上有几个div，其中包含产品详细信息；我需要获取位于div.availability中的产品详细信息之一（在本例中为可用性），并将其附加到价格容器div（div.priceContainer）中。

<div class="standardItem">
<div class="additionalInfo">
<div class="availability">Available:34</div>
</div>
<div class="priceContainer">
</div>
</div>

<div class="standardItem">
<div class="additionalInfo">
<div class="availability">Available:56</div>
</div>
<div class="priceContainer">
</div>
</div>

<div class="standardItem">
<div class="additionalInfo">
<div class="availability">Available:21</div>
</div>
<div class="priceContainer">
</div>
</div>

这是我一直在摆弄的jQuery代码，我需要什么，但是会产生不想要的结果。

$(function() {
   $('div.standardItem div.availability').each(function() {
    $(this).appendTo('div.priceContainer');
   });
});

我得到的结果是在正确的轨道上，但是它正在获取每个div的可用性并将其全部列出而不是分别列出。基本上每个产品div现在都有3个可用性。

感谢您的帮助。

Answer 1

^问题是：通过在此处使用home，您可以将该元素追加到$(this).appendTo('div.priceContainer');个元素的所有元素中。到与priceContainer元素有关的priceContainer元素..

在您的HTML结构上，使用availability而不是$(this).closest('div.standardItem').find('div.priceContainer');

'div.priceContainer'

$(function() {
   $('div.standardItem div.availability').each(function() {
    $(this).appendTo($(this).closest('div.standardItem').find('div.priceContainer'));
   });
});

.standardItem {
  width:100%; /* 40%; */
  background:#f1f1f1;
  padding:20px;
  margin: 0 0 10px 0;
  display:table;
}

.additionalInfo {
  float:left;
  background-color:#fff;
  padding:10px;
  width:30%;
  min-height:30px
}

.priceContainer {
  float:right;
  background-color:#1D7EC0;
  height:auto;
  min-height:30px;
  width:30%;
  color:#fff;
}

在每个父div内，获取位于子div中的元素，并将其附加到其他子div

1 个答案: