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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

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

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

Answer 3

您也可以包含CSS。请查看下面的代码段。这里我算了5个。我用了lt（小于索引），使用也可以使用gt（大于索引）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何切割DOM中的第20个元素？

3 个答案: