时间戳

首页 > 解决方案 > 无法使 .each() 函数执行

javascript - 无法使 .each() 函数执行

问题描述

我正在尝试创建一个响应式轮播，为此，我需要执行一个函数来设置项目的兄弟姐妹。

<div class="container">
<div class="row">
    <div class="col-xs-11 col-md-12 col-centered">

        <div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-col col-xs-12">
                        <div class="block red img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col col-xs-12">
                        <div class="block green img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col col-xs-12">
                        <div class="block blue img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col col-xs-12">
                        <div class="block yellow img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <div class="left carousel-control">
                <a href="#carousel1" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
            </div>
            <div class="right carousel-control">
                <a href="#carousel1" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>
</div>

与此相关的 JavaScript 标记是 this。

<script language="javascript">


    $('.carousel[data-type="multi"].item').each(function() {
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
     next.children(':first-child').clone().appendTo($(this));

      for (var i = 0; i < 2; i++) {
        next = next.next();
        if (!next.length) {
          next = $(this).siblings(':first');
        }

       next.children(':first-child').clone().appendTo($(this));
     }
   });


</script>

但问题是每个函数都不会被执行。我使用 Google Chrome 调试器并在函数定义上放置了一个断点。这就是我知道该功能正在执行的方式。我刚刚开始使用这些东西，所以我可能会在这里遗漏一些明显的东西。

标签： javascriptjquery

解决方案

由于具有类的元素item在轮播元素内，因此您必须在.item. 将您的选择器更改为

$('.carousel[data-type="multi"] .item')


$('.carousel[data-type="multi"] .item').each(function() {

  console.log(this);
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
 next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < 2; i++) {
    next = next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

   next.children(':first-child').clone().appendTo($(this));
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">

  <div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
      <div class="carousel-inner">
          <div class="item active">
              <div class="carousel-col col-xs-12">
                  <div class="block red img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a>
                  </div>
              </div>
          </div>
          <div class="item">
              <div class="carousel-col col-xs-12">
                  <div class="block green img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
              </div>
          </div>
          <div class="item">
              <div class="carousel-col col-xs-12">
                  <div class="block blue img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
              </div>
          </div>
          <div class="item">
              <div class="carousel-col col-xs-12">
                  <div class="block yellow img-responsive"><a href="#" class="thumbnail"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></a></div>
              </div>
          </div>
      </div>

      <!-- Controls -->
      <div class="left carousel-control">
          <a href="#carousel1" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
      </div>
      <div class="right carousel-control">
          <a href="#carousel1" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
  </div>

</div>
</div>

推荐阅读