无法使.each（）函数执行

Question

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

<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标签是这个。

<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调试器，并在函数定义上放置了一个断点。这就是我知道该函数正在执行的方式。我刚刚开始使用这些东西，所以我可能会错过一些显而易见的东西。

Answer 1

由于类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>

Answer 2

尝试以下操作：-将代码放入$(document).ready(){});函数中，并在.item $('.carousel[data-type="multi"] > .item')之前添加空间

$(document).ready(function() {
 $('.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 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>