获取父类内div的个数，然后获取特定类的div的个数

我有几个引导滑块，其中有视频和图像。在滑块的外面，我想要一个按钮，可以转到有视频的滑块。包含视频的幻灯片的编号因滑块而异。我要做的是获取幻灯片的数量然后获取类别为video-slide

的那张幻灯片的编号

是否有一种方法可以使用bootstrap carousel函数或使用自定义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，为每个帖子创建一个唯一的滑块。

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(); ?>);
                }
          }

JS根据RhysO

输出

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]*);
});

使用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类时，执行内部块。您也可以使用下面的代码:

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

有一些空闲时间，我想我将提供一个小的jQuery插件，似乎满足您的需求，如所述和–在某种程度上;的:

// using an immediately-invoked function expression
// (IIFE), to execute the function as soon as it's
// encountered by the browser:
(function($) {
  // assigning the plugin its name, 'goToSlide'
  // and using the $.fn shortcut to the jQuery
  // prototype:
  $.fn.goToSlide = function(opts) {
    // here we use jQuery.extend() to
    // set up the plugin defaults (the
    // first Object) and override those
    // default settings with the user-
    // supplied overrides/options held
    // in the 'opts' Object passed to
    // the plugin:
    var settings = $.extend({
        // the class-name to assign to the
        // currently-active slide-link:
        'activeLinkClass': 'activeLink',
        // the class-name to identify the
        // currently-active slide:
        'activeSlideClass': 'active',
        // CSS selector for the element in 
        // which the controls should be inserted:
        'controlsIn': '#controls',
        // the class-name (or white-space separated
        // list of class-names) to give to those
        // links which link to a 'plain' slide:
        'goToSlideClass': 'fa fa-file-powerpoint-o',
        // as above, but for the links which link
        // to a slide containing a video:
        'goToVideoClass': 'fa fa-file-video-o',
        // the class-name by which a slide can
        // be identified as containing a video:
        'hasVideoClass': 'video-slide',
        // the class with which to style the
        // created <li> elements containing
        // a link to the slides:
        'liClass': 'slideNumber',
        // Boolean, true: shows the number of the
        //                the slide to which the
        //                link will show,
        //          false: hides the number of the
        //                 slide.
        'showPageNumbers': true,
        // the selector by which a slide may be
        // be identified:
        'slideSelector': '.item'
      }, opts),
      // creating an <li> element, and setting
      // its class-name(s) to those defined by
      // the user via the opts Object:
      li = $('<li />', {
        'class': settings.liClass
      }),
      // creating an <a> element, and attaching
      // an anonymous function with which the
      // functionality/behaviour of the <a>
      // is assigned:
      a = $('<a />').on('click', function(e) {
        // the hash (fragment-identifier) of
        // the <a> element identifies a given
        // slide, using an id-selector
        // (a hash is of the form "#fragment"):
        $(this.hash)
          // we add the class-name which identies
          // the currently-active slide to the
          // current slide:
          .addClass(settings.activeSlideClass)
          // finds the current-slide's siblings:
          .siblings()
          // removes the active-slide's class-name:
          .removeClass(settings.activeSlideClass);
        // the current <a> element:
        $(this)
          // adding the class-name which identifies
          // the active <a> element:
          .addClass(settings.activeLinkClass)
          // finds the closest <li> element:
          .closest('li')
          // finds the sibling elements of that
          // closest <li> element:
          .siblings()
          // retrieves the child elements:
          .children()
          // and removes the active-link class:
          .removeClass(settings.activeLinkClass);
      }),
      // empty variables for later, to avoid
      // declaring the same variables within
      // a loop:
      liClone,
      aClone,
      controls,
      slideWrap;
    // returning the 'this' passed to the plug-in, in order
    // to allow for chaining; and iterating over the
    // collection (the 'this'):
    return this.each(function(slideIndex, slideWrapper) {
      // slideIndex: the index of the current element
      // in the collection;
      // slideWrapper: a reference to the current
      // node in the collection, the 'this'.
      // caching the current node in a jQuery object,
      // $(slideWrapper) and $(this) would be identical:
      slideWrap = $(slideWrapper);
      // trying to find the element in which to
      // place the controls, using the selector
      // from the settings Object:
      controls = slideWrap.find(settings.controlsIn);
      // a jQuery object will always be truthy; so
      // here we test if the jQuery object/collection
      // has a length. If it does then a relevant
      // element was found:
      if (controls.length) {
        // therefore we use that element:
        controls = controls;
      // else: no element was found, and the length
      // 0 (zero), and therefore falsey:
      } else {
        // so here we create a <ul> element,
        // and prepend it to the slideWrapper
        controls = $('<ul />').prependTo(slideWrapper);
      }
      // here we find the slide elements, using the
      // selector from the settings Object, and use
      // the each() method to iterate over them:
      slideWrap.find(settings.slideSelector).each(function(index, slide) {
        // index: the index of the current element in the
        // jQuery collection over which we're iterating;
        // slide: a reference to the current element of
        // the collection over which we're iterating.
        // cloning the created <li> node (above)
        liClone = li.clone();
        // cloning the created <a> element, and
        // also its data and functions (the true
        // passed to the clone() method):
        aClone = a.clone(true)
          // using the attr() method, and its
          // anonymous function, to set the
          // href attribute (not property)
          // of the cloned <a>:
          .attr('href', function() {
            // here we assign the id of the current
            // slide element to the string created
            // in the following line (using this form
            // in order that in the event of multiple
            // elements being passed to the plugin
            // the id of each slide is unique, as is
            // the href of each created link):
            slide.id = 'slide_' + slideIndex + '_' + index;
            // returning the assigned slide id prefixed with
            // the '#' character, to indicate a fragment-
            // identifier (and conveniently also a CSS
            // id-selector):
            return '#' + slide.id;
          })
          // setting the text of the cloned <a>, if
          // settings.showPageNumbers is exactly equal
          // to Boolean true (truthy doesn't count) we
          // return the index of the current slide + 1,
          // as JavaScript is zero-based; otherwise
          // if settings.showPageNumbers is anything 
          // other than Boolean true, we return an
          // empty string:
          .text(settings.showPageNumbers === true ? index + 1 : '')
          // here we use the addClass() method to add
          // relevant classes to the cloned <a> element:
          .addClass(function() {
            // we create an Array of class-names,
            return [
              // if the classList of the slide element contains
              // the class which identifies it as containing
              // a video element, we return the class(es)
              // defined in settings.goToVideoClass,
              // otherwise we return the class(es) held in
              // the settings.goToVideoClass (this is because
              // the question identified only two potential
              // options, 'slide' or 'video-slide'; should
              // there be more options than an if or switch
              // should be used instead):
              slide.classList.contains(settings.hasVideoClass) ? settings.goToVideoClass : settings.goToSlideClass,
               // as above, but here we're testing whether
               // the current slide has the class identifying
               // it as currently active; if so we return
               // settings.activeLinkClass, otherwise an
               // empty string:
               slide.classList.contains(settings.activeSlideClass) ? settings.activeLinkClass : '']
                 // joining the array together with a single
                 // white-space:
                 .join(' ');
          });
        liClone
          // appending the cloned <a> to the
          // cloned <li>:
          .append(aClone)
          // appending the cloned <li> (and
          // its contents) to the controls:
          .appendTo(controls);
      });
    });
  };
// here we pass in jQuery in order that, within the function,
// we can use the $ alias for brevity:
})(jQuery);
// using the plug-in, with its defaults:
$('.carousel-inner').goToSlide();

(function($) {
  $.fn.goToSlide = function(opts) {
    var settings = $.extend({
        'activeLinkClass': 'activeLink',
        'activeSlideClass': 'active',
        'controlsIn': '#controls',
        'goToSlideClass': 'fa fa-file-powerpoint-o',
        'goToVideoClass': 'fa fa-file-video-o',
        'hasVideoClass': 'video-slide',
        'liClass': 'slideNumber',
        'showPageNumbers': true,
        'slideSelector': '.item'
      }, opts),
      li = $('<li />', {
        'class': settings.liClass
      }),
      a = $('<a />').on('click', function(e) {
        $(this.hash)
          .addClass(settings.activeSlideClass)
          .siblings()
          .removeClass(settings.activeSlideClass);
        $(this)
          .addClass(settings.activeLinkClass)
          .closest('li')
          .siblings()
          .children()
          .removeClass(settings.activeLinkClass);
      }),
      liClone,
      aClone,
      controls,
      slideWrap;
    return this.each(function(slideIndex, slideWrapper) {
      slideWrap = $(slideWrapper);
      controls = slideWrap.find(settings.controlsIn);
      if (controls.length) {
        controls = controls;
      } else {
        controls = $('<ul />').prependTo(slideWrapper);
      }
      slideWrap.find(settings.slideSelector).each(function(index, slide) {
        liClone = li.clone();
        aClone = a.clone(true)
          .attr('href', function() {
            slide.id = 'slide_' + slideIndex + '_' + index;
            return '#' + slide.id;
          })
          .text(settings.showPageNumbers === true ? index + 1 : '')
          .addClass(function() {
            return [slide.classList.contains(settings.hasVideoClass) ? settings.goToVideoClass : settings.goToSlideClass, slide.classList.contains(settings.activeSlideClass) ? settings.activeLinkClass : ''].join(' ');
          });
        liClone
          .append(aClone)
          .appendTo(controls);
      });
    });
  };
})(jQuery);
$('.carousel-inner').goToSlide();

.slideNumber {
  display: inline-block;
  list-style-type: none;
  margin: 0.2em 0.5em;
  width: 2em;
  height: 2em;
  box-sizing: border-box;
}
.slideNumber a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  line-height: 2;
  border: 1px solid transparent;
  box-sixing: border-box;
}
a.slideLink {
  border-color: #0f0;
}
a.videoLink {
  border-color: #f00;
}
.slideNumber a::before {
  margin: 0 0.2em 0 0;
  margin: 0 0.2em 0 0;
}
.slideNumber a.activeLink {
  border-radius: 50%;
  box-shadow: 0 0 0.5em 0.1em limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="carousel-inner" role="listbox">
  <ul class="controls"></ul>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu1.jpg);">slide 1</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu2.jpg);">slide 2</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu3.jpg);">slide 3</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/clarivu8-1.jpg);">slide 4</div>
  <div class="item active" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu5.jpg);">slide 5</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2014/06/optegra7.jpg);">slide 6</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/ruth-ad.jpg);">slide 7</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu-guidelines.jpg);">slide 8</div>
  <div class="item video-slide">
    <video id="theVideo-83" controls="" preload="none" poster="">
      slide 9
      <source src="http://bootstrap.immaculate.co.uk/wp-content/uploads/making-of-edit4-final-HD.mp4">
    </video>
  </div>
</div>
<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);">slide 1</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu2.jpg);">slide 2</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu3.jpg);">slide 3</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/clarivu8-1.jpg);">slide 4</div>
  <div class="item active" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu5.jpg);">slide 5</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2014/06/optegra7.jpg);">slide 6</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/ruth-ad.jpg);">slide 7</div>
  <div class="item" style="background-image:url(http://bootstrap.immaculate.co.uk/wp-content/uploads/2013/10/clarivu-guidelines.jpg);">slide 8</div>
  <div class="item video-slide">
    <video id="theVideo-83" controls="" preload="none" poster="">
      slide 9
      <source src="http://bootstrap.immaculate.co.uk/wp-content/uploads/making-of-edit4-final-HD.mp4">
    </video>
  </div>
</div>

JS Fiddle demo.

引用:

JavaScript:
- 条件变量语句(assessment ? ifTrue : ifFalse)。
- Element.classList api .
- 恒等/严格相等(===)运算符。
jQuery:
- addClass() .
- append() .
- appendTo() .
- attr() .
- children() .
- clone() .
- closest() .
- each() .
- find() .
- jQuery.extend() .
- on() .
- prependTo() .
- removeClass() .
- siblings() .

参考书目:

"JavaScript中的(function(){})()构造是什么?， Exitos问，gion_13接受了答案，Guffa对这个答案做出了贡献。
"立即调用的函数表达式(IIFE)"，作者:Ben Alman。
"立即调用的函数表达式"，在维基百科。

相关内容

最新更新

热门标签：