Использование insertAfter () с этим - PullRequest
Новая
       9

Использование insertAfter () с этим

0 голосов
/ 04 апреля 2019

У меня есть n .paymentContainer делений для n количества продуктов.Для каждого .paymentContainer я хочу взять экономию и поместить ее между <price> и div с классом button, однако я продолжаю получать ошибку с моим оператором jQuery.Любые мысли о том, почему мой JQuery не работает?

$('div.paymentContainer').each(function() {
  $(this).children('p.savings').insertAfter($(this).children('p.pricing > price'))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <price>$xxx.xx</price>
    <div class="button">add to cart</div>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <price>$xxx.xx</price>
    <div class="button">add to cart</div>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <price>$xxx.xx</price>
    <div class="button">add to cart</div>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>

1 Ответ

1 голос
/ 04 апреля 2019

Здесь есть пара вопросов.Во-первых, в HTML нет элемента <price>.Я бы предложил вместо этого использовать span с классом price.

Во-вторых, вы не можете иметь div элементов внутри p, так как это недопустимый HTML.

Наконец, в этом случае вам нужно использовать find(), чтобы выбрать элементы, на которые вы пытаетесь нацелиться, потому что они являются внуками .paymentContainer и children() смотрит только на дочерний уровень.Попробуйте это: 

$('div.paymentContainer').each(function() {
  $(this).children('p.savings').insertAfter($(this).find('p.pricing > .price'))
});
.paymentContainer {
  border: 1px solid #CCC;
}
.savings {
  color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <span class="price">$xxx.xx</span>
    <span class="button">add to cart</span>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <span class="price">$xxx.xx</span>
    <span class="button">add to cart</span>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>
<div class="paymentContainer">
  <div>some content</div>
  <p class="pricing">
    <span class="price">$xxx.xx</span>
    <span class="button">add to cart</span>
  </p>
  <p class="savings">Save $yy.yy</p>
</div>

С учетом всего сказанного, использование Javascript для переупорядочения таких элементов не является идеальным.Было бы лучше изменить источник HTML напрямую, если это возможно.

...