jquery包围前5个元素和最后一个元素周围的另一个div

问题描述：

我有这个示例代码，我想隐藏所有内容行> 5并添加一个链接来显示/隐藏更多。jquery包围前5个元素和最后一个元素周围的另一个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> 
</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>');

如果你想“隐藏所有内容行> 5“，那么你为什么要做'div：lt（5）'？你不想要'div：gt（4）' – j08691

我只是尝试了一些东西，看看有什么作品，也许我会围绕首先和最后一个div和显示/隐藏这些...如果任何人有更好的解决方案的帮助是欢迎:) – Dieter

像这样 - > ** https：//jsfiddle.net/ggeaacuz/** – adeneo

答

要做到这一点，你需要使用: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>

似乎在这里工作很好的片段，但我用它在我的代码它隐藏除了第一个和所有显示不起作用。这可能是因为我有更多的div里面这些

Content

我认为这行︰$ divs = $ row.find（'div'）;应该只针对直接的孩子？ – Dieter

我更新了代码以使用'.wb-col-md-12'类 - 但是这不是很理想，因为这是一个演示类。这意味着如果你改变列宽，你将不得不改变JS，这是不理想的。 –

它似乎在您的网站在Chrome浏览器中工作正常59 –

jquery包围前5个元素和最后一个元素周围的另一个div

相关推荐