0 
<div class="slider">
    <div class="slide">
         ..//
    </div>

    <div class="slide">
         ..//
    </div>

    <div class="slide">
         ..//
    </div>

    <ul class="pagination">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>

我想让数量与javascript/jqueryli的数量相同slide

我试过这个，但它似乎不起作用

var pagination = $('.pagination li a').size();
var slides = $('.slide').size();

$(function(){
 pagination=slides;
});

这是我真正的问题，如果我有多个滑块，我怎样才能使 div 内的链接数等于div class="slider"页面中的不是所有幻灯片内的幻灯片

换句话说，如果我输入了 html，并且我有另一个类似这样的结构，但是更多/更少div class="slide"，我怎样才能使分页中的链接等于 thos div 的数量

4

4 回答 4

1

您可以each()在s上使用div，并调用（与 class ）为每个添加一个：append()ulpaginationlidiv

$(".pagination").empty();
$('.slide').each(function(_, value){
    $(".pagination").append('<li><a href="#"></a></li>');
});

它将删除所有lis 并添加尽可能多li的divs。

小提琴

这种其他解决方案仅适用于差异。

如果divs 多于lis，它将添加匹配所需的数字。

另一方面，如果lis 多于divs。它将删除最后一个lis 直到数字相等。

var pagination = $('.pagination li a').size();
var slides = $('.slide').size();

if (slides > pagination) {
    for(var i = pagination; i < slides; i++) {
        $(".pagination").append('<li><a href="#"></a></li>');
    }
}
else {
     for(var i = slides; i < pagination; i++) {
        $(".pagination li:last-child").remove();
    }
}

小提琴

于 2013-05-12T21:06:00.263 回答
0

一个有点复杂的方法如下：

// iterate over each `.slider` element@
$('.slider').each(function(index){
    // look within the current '.slider' for the '.pagination' element
    var menu = $(this).find('.pagination');

    // iterate over each of the '.slide' elements:
    $(this).find('.slide').each(function(i){
        // caching the current DOM node:
        var self = this;

        // setting the 'id', assuming that no id is currently assigned
        self.id = 'slide_' + index + '_' + i;

        // creating the 'li', appending it to the menu (as found, above):
        var li = $('<li />').appendTo(menu),

            // creating the 'a' element:
            a = $('<a />', {
                // setting its text to:
                text : 'slide ' + (i + 1), // omit the '+ 1' if you're
                                           // okay with zero-based counting
                // setting the 'href' to be equal to the slide's 'id' (as set above)
                // this allows clicking on the 'a' element to take you to the slide
                href : '#' + self.id
            }).appendTo(li);
    });
});

JS 小提琴演示。

参考：

于 2013-05-12T22:01:34.093 回答
0

我尝试给出一个抽象的、可定制的解决方案。我以 jQuery 插件的形式将其打包，但您可以轻松地调整/从中提取功能：

(function($) {
    function render(i) {
        return "<li><a href=\"#"+i+"\">"+i+"</a></li>";
    }

    function pager(options) {
        var pagination = $(this).find(options.pagination).first();
        for(var p = 0; p < $(this).find(options.slide).length; p ++) {
            var link = render(p);
            pagination[0].innerHTML += link;
        }
    };

    $.fn.paginate = function(options) {
        render = options.render || render;
        this.each(function(index, slider) {
            pager.call(slider, options);
        });
    }
})(jQuery);

您可以通过这种方式轻松使用它：

$(".slider").paginate({
    slide: ".slide", 
    pagination: ".pagination", 
    render: function(i) {
        return "<a href=\"#"+i+"\">Number "+i+"</a>";
    }
});

请注意，在此实现中，“幻灯片”和“分页”选项是必需的，您可以传递一个可选的“渲染”函数，该函数使用参数调用：正在渲染的分页元素的索引。您可以从那里轻松完成所需的工作（无论如何都包含默认渲染功能）。

工作演示（页面中有多个滑块）：http: //jsfiddle.net/xs3fu/2/。

希望这可以帮助。

于 2013-05-12T22:12:43.080 回答
0

如果我明白你想要完成什么。有你需要的代码：

$(function(){
var pagination = $('.pagination li'),
    slides = $('.slider > .slide');
if (slides.size() > pagination.size()){
    var diff = slides.size() - pagination.size();
    for (var numero=1; numero<=diff; numero++){
        $('.pagination li:last').after('<li><a href="#"></a></li>')
    }
}

});

现场示例：http: //jsfiddle.net/CUXTW/1/

于 2013-05-12T21:14:39.390 回答