javascript - 如何在某些特定条件下在父元素列表之间附加 元素

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

你可以使用这样的东西，

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

Fiddle

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