如何追加 <ul><li> 某些特定条件的父元素列表之间的元素

Question

我有一个元素列表，我想显示最多5个元素，如果总元素超过5个，则添加显示更多按钮。显示/隐藏部分已完成，但我坚持使用jquery定制此列表。

举例来说，这里列出了共有13个商品的品牌。

<ul class="search-filter" id="attributeLevel1Facet">
   <li>brand1</li>
   <li>brand2</li>
   <li>brand3</li>
   <li>brand4</li>
   <li>brand5</li>
   <li>brand6</li>
   <li>brand7</li>
   <li>brand8</li>
   <li>brand9</li>
   <li>brand10</li>
   <li>brand11</li>
   <li>brand12</li>
   <li>brand13</li>
</ul>

我只想在总项目大于5的情况下使用jquery将此列表设为

<ul class="search-filter" id="attributeLevel1Facet">
   <li>brand1</li>
   <li>brand2</li>
   <li>brand3</li>
   <li>brand4</li>
   <li>brand5</li>
   <li class="search-opt hide">
      <ul class="search-opt">
       <li>brand6</li>
       <li>brand7</li>
       <li>brand8</li>
       <li>brand9</li>
       <li>brand10</li>
       <li>brand11</li>
       <li>brand12</li>
       <li>brand13</li>
      </ul>
    </li>         
</ul>
<c:if test="${fn:length(***) gt 5}">
    <a data-role="more-options" class="more-option" title="more-option">More Options</a>
</c:if>

如果项目> 5，我想使用jquery将第一个列表更改为第二个列表。如果$("#attributeLevel1Facet > li").length > 5 ，则应使用另一个<ul><li>元素将其包装并添加更多选项按钮（上面的第二个列表）。

请帮我。

Answer 1

您可以检查li元素的长度，然后创建一个新的ul如

var $lis = $('#attributeLevel1Facet li');
if ($lis.length > 5) {
    var $ul = $('<ul class="search-opt"/>').append($lis.slice(5));
    $ul.wrap('<li class="search-opt hide" />').parent().appendTo('#attributeLevel1Facet')
}

演示： 小提琴

Answer 2

你可以这样使用

$("#attributeLevel1Facet > li").filter(function() {
    return $(this).index() > 4;
}).wrapAll("<li class='search-opt hide'><ul class='search-opt'></ul></li>");

小提琴

在上面的代码中，filter将返回索引大于4的li元素。然后可以将它们包装为任何元素。

Answer 3

选中此选项-> jQuery加载前3个元素，单击“加载更多”以显示下5个元素

从答案中我认为您可以得到想要的

Answer 4

您可以尝试这样的事情

 if($('li').length > 5){ var element='<li class="search-opt hide">'+ '<ul class="search-opt">'; $('li:nth-child(5)').after(element) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <ul class="search-filter" id="attributeLevel1Facet"> <li>brand1</li> <li>brand2</li> <li>brand3</li> <li>brand4</li> <li>brand5</li> <li>brand6</li> <li>brand7</li> <li>brand8</li> <li>brand9</li> <li>brand10</li> <li>brand11</li> <li>brand12</li> <li>brand13</li> </ul>