如何在DOM中的第20个元素后面进行剪切

Question

我每个站点有3个标签列表，其中有未知数量的标签。我想存档20个标签后，列表被剪切，第20个标签后面的链接被附加，上面写着"显示更多"，点击后，其余标签将显示。

这是我的标记：

<div class="taglist example-one">
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
</div>

我想CSS是不需要的。如果需要，请告诉我。

我的js开始于：

$(".taglist").each(function(){
var tags = $(this).find(".tag");
tags = tags.length;
if(tags > 20) {
// do stuff
}
else {
// do stuff
}
});

感谢您的帮助！非常感谢。

Answer 1

您可以使用大于index的jQuery选择器，插入一个按钮并设置相关的点击处理程序。例如：

$('.tag:gt(19)').hide();
$('<button/>', {text: "Show more..."}).on('click', function(){
$('.tag:gt(19)').show();
$(this).remove();
}).insertAfter('.tag:eq(20)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="taglist example-one">
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
</div>

Answer 2

试试这个：

Array.from(document.querySelectorAll('div.tag')).slice(0, 20);

这将返回一个包含20个第一个div元素的普通javascript数组，然后您就可以使用这些元素了。

Answer 3

您也可以包含CSS。请检查下面的代码片段。在这里我数了5。我使用过lt(小于索引)，use也可以使用gt(大于索引)。

$(document).ready(function () {
div_size = $(".taglist div").size();
x=5;
$('.taglist div:lt('+x+')').show();
$('#showMore').click(function () {
x= (x+5 <= div_size) ? x+5 : div_size;
$('.taglist div:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<=0) ? 5 : x-5;

$('.taglist div').not(':lt('+x+')').hide();
});
});

.taglist div{ display:none;
}
#showMore {
color:green;
cursor:pointer;
}
#showMore:hover {
color:black;
}
#showLess {
color:red;
cursor:pointer;
}
#showLess:hover {
color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taglist example-one">
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
<div class="tag">Example</div>
</div>
<div id="showMore">Load more</div>
<div id="showLess">Show less</div>