在.each循环中创建一个新数组

丹尼斯

我正在使用swiper.js为我的网站创建嵌套的swiper。我正在使用renderBullet函数为其创建自定义分页。这对于父级刷卡器和第一个嵌套的刷卡器非常有用。

但是,当嵌套的滑动刷更多时,所有嵌套的滑动刷都具有第一个嵌套的滑动刷的分页。

$('.swiper-container-nested').each(function () {

    var namesNested = [];

    $(".c-home__slide-nested.swiper-slide").each(function () {
        namesNested.push($(this).data("name"));
    });

    var swiperNested = new Swiper('.c-home__swiper-nested.swiper-container-nested', {
        speed: 0,
        spaceBetween: 100,
        direction: 'horizontal',
        nested: true,
        autoHeight: true,
        pagination: {
            el: '.swiper-pagination-nested',
            clickable: 'true',
            type: 'bullets',
            renderBullet: function (index, className) {
                return '<li class="' + className + '  c-link secondary">' + (namesNested[index]) + '</li>';
            },
            bulletClass: 'c-menu__item',
            bulletActiveClass: 'active',
        },
        allowTouchMove: false,
        a11y: {
            prevSlideMessage: 'Previous section',
            nextSlideMessage: 'Next section',
            firstSlideMessage: 'This is the first section',
            lastSlide: 'This is the last section',
            paginationBulletMessage: 'Go to section {{index}}'
        },
    });

});

我知道我需要为每个嵌套的swiper迭代以下位,但是我不知道如何:

    var namesNested = [];

    $(".c-home__slide-nested.swiper-slide").each(function () {
        namesNested.push($(this).data("name"));
    });
以斯拉·西顿

仅通过JS很难知道您的问题(没有HTML标记//完整示例)。

没有Swiper Pagination相关的已知问题,custom pagination也许下面的代码片段将对您有所帮助。

嵌套每个循环

在您的代码中,您似乎总是循环抛出相同的元素(对于嵌套数组)-我使用this以下.children()命令解决了这个问题(swiper-wrapper element)==> .children()(swiper-slide elements)

$this.children().children().each(function(index, element) {
/*do something*/

相关的stackoverflow问:

嵌套的滑动条-从数据属性(Jquery)获取自定义分页文本:

var swiperH = new Swiper(".swiper-container-h", {
  spaceBetween: 50,
  pagination: {
    el: ".swiper-pagination-h",
    clickable: true
  }
});

// 1. outer loop //
$(".swiper-container-nested").each(function(index, element) {
  var $this = $(this);
  var fruitsArray = [];
  // 1.1. nested loop
  $this.children().children().each(function(index, element) {
    fruitsArray.push($(this).data("fruit"));
  });

  /* create swiper objects */
  $this.addClass("instance-" + index);
  var swiperNested = new Swiper(".instance-" + index, {
    direction: "vertical",
    spaceBetween: 50,
    pagination: {
      el: ".swiper-pagination-nested",
      clickable: true,
      renderBullet: function(index, className) {
        return (
          '<span class="' +
          className +
          '">' +
          (index + 1) +
          "." +
          fruitsArray[index] +
          "</span>"
        );
      }
    }
  });
});
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container-v {
  background: #eee;
}

.swiper-pagination-nested .swiper-pagination-bullet {
      width: auto;
      height: 20px;
      text-align: center;
      border-radius: 5px;
      line-height: 20px;
      font-size: 12px;
      padding: 5px 9px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
}
.swiper-pagination-nested .swiper-pagination-bullet-active {
      color:#fff;
      background: red;
}
ul.swiper-wrapper,
li.swiper-slide {
  padding: 0px;
  margin: 0px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>

<!-- Swiper -->
<main class="swiper-container swiper-container-h">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">
      <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Orange" class="swiper-slide">1. Orange</div>
          <div data-fruit="Apple" class="swiper-slide">2. Apple</div>
          <div data-fruit="Cranberry" class="swiper-slide">3. Cranberry</div>
          <div data-fruit="Guava" class="swiper-slide">4. Guava</div>
          <div data-fruit="Pumpkin" class="swiper-slide">5. Pumpkin</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
    <li class="swiper-slide">
     <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Cranberry" class="swiper-slide">1. Cranberry</div>
          <div data-fruit="Guava" class="swiper-slide">2. Guava</div>
          <div data-fruit="Pumpkin" class="swiper-slide">3. Pumpkin</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
    <li class="swiper-slide">
      <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Lemon" class="swiper-slide">1. Lemon</div>
          <div data-fruit="Melon" class="swiper-slide">2. Melon</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
  </ul>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-h"></div>
</main>


<!-- assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=""></script>

相关:阅读此Github问题:

码笔

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用'Each'方法在do循环中创建一个新数组

jq-在for循环中,创建一个新数组,然后附加键/值对

根据循环中的值创建一个新数组,然后将新数组中的所有值求和

在循环中创建一个 numpy 数组

使用另一个循环中的子项在 foreach 循环中创建数组

如何在for循环中附加一个数组,每个循环都会获得新的输出?

在循环中创建新数组

如何在循环中每x步创建一个新列表?

如何在每次循环中创建一个新对象?

.each循环中的javascript .push方法仅返回一个数组

在PHP中的foreach循环中插入每个元素之后,如何创建一个数组?

.push在循环中创建的数组是正确的长度,但仅在重复时推送最后一个元素

在foreach中创建数组,键为循环中的第一个值

在forEach循环中创建一个对象并将其推入数组

合并1个数组的元素以使用for循环创建一个新数组

从循环创建一个numpy数组

在ʻEnum.each`循环中累积一个列表

在一个 .each 循环中查询多个表

如何在循环中创建一个数组,然后在Java中循环后可以调用它?

在一个循环中创建对象属性

在for循环中创建一个Promise链

每月在wordpress循环中创建一个div

在for循环中创建一个长度可变的列表

在 for 循环中创建一个包含 if 语句的函数

筛选并创建一个新数组

在for循环中构造一个numpy数组

使用数组删除for循环中的最后一个逗号

在一个 for 循环中打印不同的数组

在 SQL 中的另一个循环中创建一个循环?