Question

我有一个div的旋转木马，需要显示一个＆＃39;柜台＆＃39;各种 - 我可以很容易地显示可见div的数量，但我想显示那些可见的：

1-4 of 12

使用jQuery循环，HTML是：

<div id="wrapper">

<div id="carousel1">
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>

<div id="carousel2">
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>

<div id="carousel3">
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>

</div>

<div id="counter"></div>

正如你所看到的，我有3个轮播面板...但是我如何使用jQuery来计算每个面板内的div数量以及这些div的总数，以便计数器显示为：

1-4 of 12

由于

Answer 1

试

$("#wrapper [id^=carousel]").children().length; // total no of children inside carousel
$("#wrapper [id^=carousel]").length; // total carousel

<强> DEMO

Answer 2

一种解决方案是使用jquery .map()并将每个容器子项保存在数组中：

//the selector is every div with id starts with carousel
//that is ancestor of an element with id wrapper
var childLen = $("#wrapper div[id^='carousel']").map(function() {
  return $(this).children().length;
}).get();
//outputs  [4, 4, 4]
console.log(childLen);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="carousel1">
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </div>
  <div id="carousel2">
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </div>
  <div id="carousel3">
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </div>
</div>

<强>参考

.children()

将可查看的<div>显示为计数器</div>

2 个答案: