Question

我想计算幻灯片中幻灯片的数量。

JS中的

：

var slides = $('document.getElementById("slide").getAttribute("data-slide").slide-new');

并在我的HTML中

<div class="slide" id="slide1" data-slide="0" data-stellar-background-ratio="0.5">
    <div id="slideshow" >
        <div class="slide-new">Some Text</div>
        <div class="slide-new">Some Text</div>
        <div class="slide-new">Some Text</div>
    </div>
</div>

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
    <div id="slideshow" >
        <div class="slide-new">Some Text</div>
        <div class="slide-new">Some Text</div>
        <div class="slide-new">Some Text</div>
        <div class="slide-new">Some Text</div>
    </div>
</div>

我想计算多少“Slide-new”有“slide”变量。在'slide'变量中，我想要第一次幻灯片放映3和第二次幻灯片播放4。但我无法得到它......

由于

Answer 1

指定类名以获取类的计数

$(document).ready(function() {
  var slideCount = $('[data-slide]').length;
  for (i = 1; i <= slideCount; i++) {
    var t = $('#slide' + i + ' #slideshow').children().attr('class');
    $("#text" + i).html(i + 'st Slide has' + $("." + t).length + 'slides' + '<br/>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:

<div class="slide" id="slide1" data-slide="0" data-stellar-background-ratio="0.5">
  <div id="slideshow">
    <div class="slide-new">Some Text</div>
    <div class="slide-new">Some Text</div>
    <div class="slide-new">Some Text</div>
  </div>
</div>

<div class="slide" id="slide2" data-slide="1" data-stellar-background-ratio="0.5">
  <div id="slideshow">
    <div class="slide-new1">Some Text</div>
    <div class="slide-new1">Some Text</div>
    <div class="slide-new1">Some Text</div>
    <div class="slide-new1">Some Text</div>
  </div>
</div>

<span id="text1"></span>
<span id="text2"></span>

Click here

以下是更新：

Update

Answer 2

试试这段代码

$('.slide').each(function(){
  var slides = $(this).find('.slide-new').length
  alert(slides);
});

注意：不要在页面中多次使用相同的ID。

计算幻灯片的数量

2 个答案: