Question

我有HTML的一部分：

<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

我想将<p>Free shipping</p>之后的<span class="price">添加到价格大于400的产品中。

Answer 1

您可以使用jQuery的.each()和after()

$('.price').each(function(){
  if($(this).text() > 400)
    $(this).after('<p>Free shipping</p>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

您也可以在普通JS中实现

var allPrice = [].slice.call(document.querySelectorAll('.price'));
allPrice.forEach(function(el){
  if(el.textContent > 400){
    var p = document.createElement('p');
    p.textContent = 'Free shipping';
    el.parentNode.insertBefore(p, el.nextSibling);
  }
});

<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

Answer 2

使用document.querySelectorAll选择所有跨度，并循环检查价格是否大于400，并为其免费送货

var a=document.querySelectorAll('.product > .price')
a.forEach(e=>+e.textContent>=400?e.textContent+="  Free Shipping":false)

<div class="product">
    <h1>Product 1</h1>
    <img src="">
    <span class="price">435</span>
    </div>
    <div class="product">
    <h1>Product 2</h1>
    <img src="">
    <span class="price">599</span>
    </div>
    <div class="product">
    <h1>Product 3</h1>
    <img src="">
    <span class="price">850</span>
    </div>
    <div class="product">
    <h1>Product 4</h1>
    <img src="">
    <span class="price">239</span>
    </div>

Answer 3

您也可以使用.filter()

$('span.price').filter(function(){
  return parseInt($(this).text()) > 400;
}).after('<p>Free shipping</p>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <h1>Product 1</h1>
  <img src="">
  <span class="price">435</span>
</div>
<div class="product">
  <h1>Product 2</h1>
  <img src="">
  <span class="price">599</span>
</div>
<div class="product">
  <h1>Product 3</h1>
  <img src="">
  <span class="price">850</span>
</div>
<div class="product">
  <h1>Product 4</h1>
  <img src="">
  <span class="price">239</span>
</div>

Answer 4

使用jquery的after() API，然后使用parseFloat()将字符串转换为Number

$('span.price').each(function(){
   if(parseFloat($(this).text()) > 400)
  $(this).after().append('<p>Free shipping</p>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
    <h1>Product 1</h1>
    <img src="">
    <span class="price">435</span>
    </div>
    <div class="product">
    <h1>Product 2</h1>
    <img src="">
    <span class="price">599</span>
    </div>
    <div class="product">
    <h1>Product 3</h1>
    <img src="">
    <span class="price">850</span>
    </div>
    <div class="product">
    <h1>Product 4</h1>
    <img src="">
    <span class="price">239</span>
    </div>

在跨度大于

4 个答案: