Jquery 将一个 div 括在前 5 个元素周围，另一个 div 围绕最后一个元素

Question

我有这个示例代码，我想隐藏 5>的所有内容行，并添加一个链接来显示/隐藏更多内容。

<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>
<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>
<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>

我试过这个，但它不起作用，有点卡在这里

$('.wb-row > div:lt(5)').wrapAll('<div class="first5"></div>');

Answer 1

要实现此目的，您需要使用:gt(4)来hide()。您可以append()一个a元素，您将该元素挂接一个单击事件处理程序，然后显示该.wb-row中的所有同级div元素，如下所示：

$('.wb-row').each(function() {
var $row = $(this),
$divs = $row.find('.wb-col-md-12');
if ($divs.length >= 5) {
$divs.filter(':gt(4)').hide();
$row.append('<a href="#" class="show-more">Show more...</a>');
}
});
$('.wb-row').on('click', '.show-more', function(e) {
e.preventDefault();
$(this).text(function(i, t) {
return t == 'Show more...' ? 'Hide' : 'Show more...';
}).siblings('div:gt(4)').toggle();
});

.wb-row {
margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>
<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>
<div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3">
<div class="wb-row">
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
<div class="wb-col-md-12">Content</div>
</div>
</div>