为什么：lt（）不按预期工作？

Question

您能否告诉我为什么:lt()无法正常工作。这里是我的代码： https://jsbin.com/refunuyahe/edit?html,js,output

我试着只显示100项目，而当用户滚动它应该显示另外100个项目。

(function() { 
    'use strict'; 
    $(function() { 
    var str = '<ul id="myList">'; 
    var x = 100; 
    var initialData = ''; 
    for (var i = 0; i < 1000; i++) { 
     str += '<li>' + i + '</li>'; 

    } 
    str += '</ul>' 
    // complete data in str; 
    // load only first 100 element 
    $('#container').append(str); 

    $('#myList li:lt(' + x + ')').show(); 
    }) 

    $('#container').on('scroll', function() { 
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
     x += 100; 
     $('#myList li:lt(' + x + ')').show(); 
    } 
    }) 
})(); 

这条线为什么不起作用？

$('#myList li:lt(' + x + ')').show(); 

Answer 1

我真的怀疑这是否是正确的方法来实现你真正想做的事情。无论如何，你会错过隐藏的元素。

(function(){ 
 
    'use strict'; 
 
    $(function(){ 
 
    var str ='<ul id="myList">'; 
 
    var x=100; 
 
    var initialData =''; 
 
    for(var i=0;i<1000;i++){ 
 
     str+='<li>'+i+'</li>'; 
 

 
    } 
 
    str +='</ul>' 
 
    // complete data in str; 
 
    // load only first 100 element 
 
    $('#container').append(str); 
 
    $('#myList li:gt('+x+')').hide(); // <-- first hide rest of li's 
 
    $('#myList li:lt('+x+')').show(); 
 
    }) 
 
    
 
    $('#container').on('scroll', function() { 
 
     if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
 
     x+=100; 
 
     // HERE you need to hide elements as well 
 
      $('#myList li:lt('+x+')').show(); 
 
     } 
 
    }) 
 
    
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'> 
 
    </div>

Answer 2

主要有两个问题与您的代码。首先x变量超出了scroll事件处理程序的范围。其次，li元素在加载时已经可见，因此在其上调用show()将不起作用。

要解决此问题，请将x定义放在更高的范围内，并使用CSS仅在页面加载时显示相关元素。试试这个：

$(function() { 
 
    'use strict'; 
 
    var x = 100; 
 
    var str = '<ul id="myList">'; 
 
    for (var i = 0; i < 1000; i++) { 
 
    str += '<li>' + i + '</li>'; 
 
    } 
 
    str += '</ul>' 
 
    $('#container').append(str); 
 

 
    $('#container').on('scroll', function() { 
 
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
 
     x += 100; 
 
     $('#myList li:lt(' + x + ')').show(); 
 
    } 
 
    }) 
 
});

#container { 
 
    height: 300px; 
 
    border: 1px solid; 
 
    overflow: auto; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.showItem { 
 
    display: block; 
 
} 
 

 
/* This is the required part */ 
 
#container li:nth-child(-n+100) { 
 
    display: list-item; 
 
} 
 
#container li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'></div>

另外请注意，我收拾你的IIFE和处理的document.ready使用。