jQuery中的动态选择器

我的代码：

<div class="list">
    <ul id="myList1">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <a id="loadMore">Load more</a>
</div>

<div class="list">
    <ul id="myList2" style="display: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <a id="loadMore">Load more</a>
</div>

a
b
c
d
e

id
文档范围中的属性值，因此问题的原因在于您使用的是
id=“loadMore”
而不是例如class name
class=“loadMore”

您的代码也相对复杂，如果您使用jQuery DOM遍历和过滤功能，代码可能会简单得多：


$（文档）.ready（函数（）{
//把所有保险公司的内部名单
$（'.list>ul'）。每个（函数（）{
//隐藏除前3个之外的所有列表元素
$（this.find（'li'）.slice（3.hide（）；
});
//处理点击以“加载更多”链接
$（'.loadMore'）。在（'click'，function（）上{
//在it中搜索以前的UL
var$list=$（this.prev（'ul'）；
//获取接下来的5个隐藏项并显示它们
$list.find（'li:hidden'）.slice（0,5.show（）；
//如果最后一个列表项已可见-隐藏“加载更多”链接
if（$list.find（'li:last child'）是（':visible'））{
$list.next（'.loadMore'）.hide（）；
}
})
});
.loadMore{
颜色：绿色；
光标：指针；
}
.loadMore:悬停{
颜色：黑色；
}


a
b
c
d
e
f
g
h
我
j
k
l
m
n
o

加载更多

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五

加载更多
如果我理解正确，每次按下一个按钮，您需要再显示5个li项目

如果是那样的话，我会这样做

$('#loadMore').click(function () {    
    var numberOfLisToShow = 5; //for example
    for(var i = 0; i < numberOfLisToShow; i++) {
        //find last visible item and get the next item
        $("ul#yourId li:visible:last").next().show();
    }
});

$（'#loadMore'）。单击（函数（）{
var numberOfLisToShow=5；//例如
对于（变量i=0；i

但首先尝试用css而不是javascript隐藏元素，并确保至少有一个元素可见（必须承认Flight的答案肯定更好：）。如果没有更多数据要加载，我如何隐藏loadmore？
$('#loadMore').click(function () {    
    var numberOfLisToShow = 5; //for example
    for(var i = 0; i < numberOfLisToShow; i++) {
        //find last visible item and get the next item
        $("ul#yourId li:visible:last").next().show();
    }
});