时间戳

首页 > 解决方案 > 在具有不同类的跳过异常之后，jQuery每次迭代都不会为元素赋值

javascript - 在具有不同类的跳过异常之后，jQuery每次迭代都不会为元素赋值

问题描述

我有一组产品（植物种子），我想将它们的默认价格从 3 粒种子更改为 1 粒种子。为了实现这一点，我创建了每个产品 1 个种子值的数组，并尝试通过 each 函数将它们分配给每个具有下拉元素类的产品。有一种产品没有下拉元素，所以我想跳过这一种，将其原始产品价值保留为 3 个种子，但我希望其余的改变。现在，当我调试循环时，它确实为产品编号 1 和 2 正确分配并避免编号 3，因为它是没有下拉列表的产品，并且未能将第三个数组值分配给第四个产品，即最后一个产品。

这是代码：

$(document).ready(function() {
// Create array with one seed value for each product
var oneseedprice = $('.dropdown ul.dropdown li:first-child').map((i, el) =>
el.getAttribute('data-price')).get();
console.log("oneseedprice: " + oneseedprice);

$.each($('.prices-block'), function( index, value ) {
  var divselect = $(this).prev().prev();
  console.log("divselect class: " + divselect.attr('class'));
  if (divselect.attr('class') == 'dropdown') {
      $(this).html(oneseedprice[index]);
      console.log(oneseedprice[index]);
  }
  // If element does not have dropdown select
  if (divselect.attr('class') == 'rating') {
      console.log("no dropdown");
      return true;
  }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- PRODUCT 1 -->
<div class="ajax_block_product">
  <h1>PRODUCT 1</h1>
<div class="dropdown">
    <a href="#">
       Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 8.50">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 21.50">
        Number of seeds: <span>3<span>
      </li>
    </ul>
</div>
<div class="just-another-element-class"></div>
<div class="prices-block">
      <!-- Price by default -->
      <span>Price: </span><span class="price">€ 21.50</span>
</div>
</div>
<!-- PRODUCT 2 -->
<div class="ajax_block_product">
  <h1>PRODUCT 2</h1>
<div class="dropdown">
    <a href="#">
       Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 7.20">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 18.40">
        Number of seeds: <span>3<span>
      </li>
    </ul>
</div>
<div class="just-another-element-class"></div>
<div class="prices-block">
      <!-- Price by default -->
      <span>Price: </span><span class="price">€ 18.40</span>
</div>
</div>

<!-- PRODUCT 3  no dropdown-->
<div class="ajax_block_product">
  <h1>PRODUCT 3</h1>
<div class="rating"></div>
<div class="just-another-element-class"></div>
<div class="prices-block">
      <!-- Price by default -->
      <span>Price: </span><span class="price">€ 39.95</span>
</div>
</div>

<!-- PRODUCT 4 -->
<div class="ajax_block_product">
    <h1>PRODUCT 4</h1>
<div class="dropdown">
    <a href="#" >
       Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 9.00">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 23.00">
        Number of seeds: <span>3<span>
      </li>
    </ul>
</div>
<div class="just-another-element-class"></div>
<div class="prices-block">
            <!-- Price by default -->
      <span>Price: </span><span class="price">€ 23.00</span>
</div>
</div>

标签： javascriptjqueryarraysloops

解决方案

你可以这样做：在你的each()函数中，只选择类.prices-block元素.ajax_block_product的子元素，这些元素的类元素没有类的子元素.rating：

$(document).ready(function() {
  // Create array with one seed value for each product
  var oneseedprice = $('.dropdown ul.dropdown li:first-child').map((i, el) =>
    el.getAttribute('data-price')).get();

  $.each($('.ajax_block_product:not(:has(.rating))').children('.prices-block'), function(index, value) {
    var divselect = $(this).prev().prev();
    if (divselect.attr('class') == 'dropdown') {
      $(this).html(oneseedprice[index]);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ajax_block_product">
  <h1>PRODUCT 1</h1>
  <div class="dropdown">
    <a href="#">
      Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 8.50">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 21.50">
        Number of seeds: <span>3</span>
      </li>
    </ul>
  </div>
  <div class="just-another-element-class"></div>
  <div class="prices-block">
    <!-- Price by default -->
    <span>Price: </span><span class="price">€ 21.50</span>
  </div>
</div>
<!-- PRODUCT 2 -->
<div class="ajax_block_product">
  <h1>PRODUCT 2</h1>
  <div class="dropdown">
    <a href="#">
      Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 7.20">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 18.40">
        Number of seeds: <span>3</span>
      </li>
    </ul>
  </div>
  <div class="just-another-element-class"></div>
  <div class="prices-block">
    <!-- Price by default -->
    <span>Price: </span><span class="price">€ 18.40</span>
  </div>
</div>

<!-- PRODUCT 3  no dropdown-->
<div class="ajax_block_product">
  <h1>PRODUCT 3</h1>
  <div class="rating"></div>
  <div class="just-another-element-class"></div>
  <div class="prices-block">
    <!-- Price by default -->
    <span>Price: </span><span class="price">€ 39.95</span>
  </div>
</div>

<!-- PRODUCT 4 -->
<div class="ajax_block_product">
  <h1>PRODUCT 4</h1>
  <div class="dropdown">
    <a href="#">
      Number of seeds: <strong>1</strong>
    </a>
    <ul class="dropdown">
      <li data-price="€ 9.00">
        Number of seeds: <span>1</span>
      </li>
      <li data-price="€ 23.00">
        Number of seeds: <span>3</span>
      </li>
    </ul>
  </div>
  <div class="just-another-element-class"></div>
  <div class="prices-block">
    <!-- Price by default -->
    <span>Price: </span><span class="price">€ 23.00</span>
  </div>
</div>

推荐阅读