jquery包围前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()你勾Click事件处理程序的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>