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>