Question

<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 / jquery 使li的数量与slide的数量相同

我尝试了这个，但它似乎无法正常工作

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

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

这是我真正的问题，如果我有一个以上的滑块，我怎样才能使div内部的链接数等于div class="slider"内的幻灯片而不是页面中的所有幻灯片< / p>

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

Answer 1

您可以在each()上使用div，并在append()上拨打ul（ pagination）为每个li添加一个div：

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

它会删除所有li并添加li个div s。

FIDDLE

这个其他解决方案只适用于差异。

如果div比li更多，则会添加匹配所需的数字。

另一方面，如果li s多于div s。它将删除最后li s，直到数字相等。

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

FIDDLE

Answer 2

如果我理解你想要完成的事情。有你需要的代码：

$(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/

Answer 3

有点复杂的方法如下：

// 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 Fiddle demo

参考文献：

Answer 4

我尝试提供一个抽象的，可自定义的解决方案。我以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>";
    }
});

请注意，在此实现中，需要“slide”和“pagination”选项，并且您可以传递一个可选的“render”函数，该函数将使用参数调用：正在呈现的分页元素的索引。您可以轻松地从那里完成所需（无论如何都包含默认的渲染功能）。

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

希望这有帮助。

javascript链接与div相同的数字

4 个答案: