javascript - 获取父级中的 div 数量，然后获取特定类的 div 数量

Question

我有几个带有视频和图像的 Bootstrap slider 。在 slider 之外，我想要一个可以转到包含视频的幻灯片的按钮。包含视频的幻灯片的数量因 slider 而异。我想做的是获取幻灯片的数量，然后获取类 video-slide

的幻灯片编号

有没有办法使用 Bootstrap 轮播函数或使用自定义 js 的某种方式来做到这一点？

标记示例

<div class="carousel-inner" role="listbox">
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu1.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu2.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu3.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/clarivu8-1.jpg);"> </div>
  <div class="item active" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu5.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2014/06/optegra7.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/ruth-ad.jpg);"> </div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu-guidelines.jpg);"> </div>
  <div class="item video-slide">
    <video id="theVideo-83" controls="" preload="none" poster="">
        <source src="http://bootstrap.immaculate.co.uk/wp-content/uploads/making-of-edit4-final-HD.mp4">
    </video>
  </div>
</div>

JS 代码，我使用 php 从 WP 获取帖子 ID，为每个帖子创建一个唯一的 slider 。

for(var i<?php the_ID(); ?> = 0; i<?php the_ID(); ?> <= jQuery('.carousel-<?php the_ID(); ?> div.item').length; i<?php the_ID(); ?>++) {
                if (jQuery('.carousel-<?php the_ID(); ?> div.item')[i<?php the_ID(); ?>].hasClass('video-slide')) {
                    //i is the position of the video slide
                    console.log(i<?php the_ID(); ?>);
                }
          }

根据 RhysO 的 JS 输出

for(var i4689 = 0; i4689 <= $('.carousel-4689 div.item').length; i4689++) {
  if ($('.carousel-4689 div.item')[i4689].hasClass('video-slide')) {
    //i is the position of the video slide
      console.log(i4689);
  }
}

错误

$(...)[i4689] is undefined

点击功能

$('.po-4689 .link-to-video"').on('click', function() {
    $('.carousel-4689').carousel(*[numberHere]*);
});

Answer 1

使用 JQuery 选择器，如下所示:

for(var i = 0; i <= $('div.item').length; i++) {
  if ($('div.item')[i].hasClass('video-slide')) {
    //i is the position of the video slide
  }
}

它所做的是使用 for 循环并迭代 div.item 元素的数量。当发现具有 video-slide 类时，内部 block 就会执行。您还可以使用以下代码来执行此操作:

$('div.item').each(function(){
  if ($(this).hasClass('video-slide')) {
    //$(this) is the video slide (not the position, but the actual element)
  }
})