jquery - 计算类 jquery 之前的项目数

Question

我有一个非常基本的 jquery 轮播，可以输出以下代码：

<div class="flexslider">
    <ul class="slides">
        <li><a>red</a></li>
        <li><a>green</a></li>
        <li><a class="flex-active">blue</a></li>
        <li><a>black</a></li>
        <li><a>white</a></li>
    </ul>
</div>
<div id="count"></div>

我想输出当前幻灯片编号（第 3 张幻灯片，共 5 张），但使用 .index() 似乎不起作用。它一直显示为“-1”，并且不会随着轮播滑动而更新。

var total = $('.carousel li').length;
var current = $(this).find('.flex-active');

$("#count").html($('li').index(current)  + ' of ' + total);

示例： http: //files.marksy.com/public/slider/index.html

Answer 1

一切都有些混乱，$(this) 不是您所追求的，而且您正在寻找 li 的孩子，因此它的索引将是错误的，需要获取它的父级。我已经清理了一点。

http://jsfiddle.net/jozzhart/uMNvB/

var $slides = $('.slides li');
var $current = $slides.find('.flex-active').parent();

var index = $slides.index($current) + 1;
var total = $slides.length;

$("#count").html(index + ' of ' + total);

Answer 2

可能是这样的输出：

<div class="flexslider">
    <ul id="flex-UL" class="slides">
        <li><a>red</a></li>
        <li><a>green</a></li>
        <li id="flex-active"><a>blue</a></li>
        <li><a>black</a></li>
        <li><a>white</a></li>
    </ul>
</div>
<div id="count"></div>

它是可行的

比：

var listItem = $('#flex-active');
var listTotal= $("#flex-UL li").size()
$('#count').html( 'Index: ' + $('li').index(listItem) + ' / ' + listTotal);

输出：

red
green
blue
black
white

指数：2 / 5

Answer 3

在您的示例中，您使用的是FlexSlider。

$('.flexslider').flexslider({animation:"slide"});

FlexSlider 存储当前幻灯片编号，您可以使用 -callbackafter获取此值：

$('.flexslider').flexslider({
    animation: "slide", 
    after: function(slider) {
        alert (slider.currentSlide);
    }
});

您可以在文档中阅读有关它的更多信息。它位于“高级”选项卡中，并从“新的、强大的回调 API ”开始。

Answer 4

O 对于您的设置：

   var listItem = $(".flex-active").parent();
   var listTotal = $(".slides li").size();
   var listitemNow = $('li').index(listItem);
   listitemNow++;
   $('#count').html('Index: ' + listitemNow + ' of ' + listTotal);

输出：

red
green
blue
black
white

索引： 3 / 5