如何使 Sweet Pages 插件仅适用于 top-level 个 LI？

Question

根据标题，我只需要对 top-level 列表项进行分页 - 而不是嵌套列表项 - 但插件不再正确计算 #holder UL 的高度！

但是让我们从头开始，假设我有以下无序列表：

<div id="main">
    <ul id="holder">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <ul><li>Inner List</li></ul></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>
</div>

这是我试图更改代码行 13 以忽略嵌套列表项的分页的脚本：

(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
 
 // If no options were passed, create an empty opts object
 if(!opts) opts = {};
 
 var resultsPerPage = opts.perPage || 3;
 
 // The plugin works best for unordered lists, althugh ols would do just as well:
 var ul = this;
 var li = ul.find('>li');
 
 li.each(function(){
  // Calculating the height of each li element, and storing it with the data method:
  var el = $(this);
  el.data('height',el.outerHeight(true));
 });
 
 // Calculating the total number of pages:
 var pagesNumber = Math.ceil(li.length/resultsPerPage);
 
 // If the pages are less than two, do nothing:
 if(pagesNumber<2) return this;

 // Creating the controls div:
 var swControls = $('<div class="swControls">');
 
 for(var i=0;i<pagesNumber;i++)
 {
  // Slice a portion of the lis, and wrap it in a swPage div:
  li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
  
  // Adding a link to the swControls div:
  swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
 }

 ul.append(swControls);
 
 var maxHeight = 0;
 var totalWidth = 0;
 
 var swPage = ul.find('.swPage');
 swPage.each(function(){
  
  // Looping through all the newly created pages:
  
  var elem = $(this);

  var tmpHeight = 0;
  elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

  if(tmpHeight>maxHeight)
   maxHeight = tmpHeight;

  totalWidth+=elem.outerWidth();
  
  elem.css('float','left').width(ul.width());
 });
 
 swPage.wrapAll('<div class="swSlider" />');
 
 // Setting the height of the ul to the height of the tallest page:
 ul.height(maxHeight);
 
 var swSlider = ul.find('.swSlider');
 swSlider.append('<div class="clear" />').width(totalWidth);

 var hyperLinks = ul.find('a.swShowPage');
 
 hyperLinks.click(function(e){
  
  // If one of the control links is clicked, slide the swSlider div 
  // (which contains all the pages) and mark it as active:

  $(this).addClass('active').siblings().removeClass('active');
  
  swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
  e.preventDefault();
 });
 
 // Mark the first link as active the first time this code runs:
 hyperLinks.eq(0).addClass('active');
 
 // Center the control div:
 swControls.css({
  'left':'50%',
  'margin-left':-swControls.width()/2
 });
 
 return this;
 
}})(jQuery);


$(document).ready(function(){
 /* The following code is executed once the DOM is loaded */
 
 // Calling the jQuery plugin and splitting the
 // #holder UL into pages of 3 LIs each:
 
 $('#holder').sweetPages({perPage:3});
 
 // The default behaviour of the plugin is to insert the 
 // page links in the ul, but we need them in the main container:

 var controls = $('.swControls').detach();
 controls.appendTo('#main');
 
});

如您所见，here 插件 returns 正确的页数，但没有正确计算最高页面的高度。

你能帮帮我吗？

提前致谢！！

Answer 1

您在选择器中缺少一个简单的 >。在你的fiddle的第52行，你需要改变：

elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

收件人：

elem.find('>li').each(function(){tmpHeight+=$(this).data('height');});

DEMO

注意：简单但很难找到 ;)

如何使 Sweet Pages 插件仅适用于 top-level 个 LI？

How to make the Sweet Pages plugin work only with top-level LIs?

jquery

pagination