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

Question

我有一个元素列表，我想在其中显示最多5个元素，如果总元素超过5个，则添加show more按钮。显示/隐藏部分已经完成，但我不得不使用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>

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

请帮帮我。

Answer 1

你可以使用这样的东西，

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

Fiddle

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

Answer 2

您可以检查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')
}

演示：Fiddle

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>