JavaScript链接相同数量的div

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> 

我想要的li数量相同的slide用JavaScript数/ jQuery的

我试过，但它似乎没有工作

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

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

这是我真正的问题，如果我有更多的一个滑块，我如何使div内的链接数量等于div class="slider"内的幻灯片并非页面中的所有幻灯片

换句话说，如果我有我输入HTML和我还有一个结构类似这样的一个，但与更多/更少div class="slide"我怎样才能使分页等于THOS的div数量的链接

Answer 1

一种有些令人费解的方法如下：

// 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。

参考文献：

• appendTo()。
• each()。
• find()。

Answer 2

您可以使用each()在div秒，呼吁append()的ul（与 类pagination）添加一个li每个div：

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

它会删除所有li S和添加尽可能多的li s有div s。

FIDDLE

---

这其他解决方案只能在区别工作。

如果有更多div s比li s，它会添加匹配所需的数量。

另一方面，如果有更多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 3

如果我明白你想实现什么。有您需要的代码：

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

注意，在此实现“幻灯片“和”分页“选项是必需的，您可以传递一个可选的”渲染“函数，该函数使用参数调用：正在呈现的分页元素的索引。你可以很容易地从那里完成你需要的东西（无论如何都包含默认渲染功能）。

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

希望这会有所帮助。