Question

我有一个基本上看起来像这样的页面：

<div id="foo">
    <a>One</a>, <a>Two</a>, <a>Three</a>, <a>Four</a>
</div>

_{为简洁起见，删除了额外的属性。}

div内可能有任意数量的链接。我想要做的是隐藏 n ^th之后的所有链接并添加“显示其余”链接。基本上，为了实现这一点（据我所知），我需要能够将其转换为如下所示：

<div id="foo">
    <a>One</a>, <a>Two</a>, <a>More...</a>
    <span style="display: none"><a>Three</a>, <a>Four</a></span>
</div>

您如何将链接包装在另一个元素中？

请注意，显而易见的方法（$('#foo a:gt(1)').wrapAll('<span>')）在此不起作用，因为每个链接之间都有文本节点（逗号），并且这些节点未被该查询选中。

Answer 1

试试这个，根据2n调整索引，因为现在每个文本节点都算作一个：

$(function() {
  var n = 4;
  $('#foo').contents()
    .filter(function(index){ 
         return index > n && ((this.nodeType==3)||(this.nodeName=="A"))})
    .wrapAll('<span style="background: red;">');
});

Answer 2

首先，也许您应该将元素重写为：

<div id="foo">
  <span><a>One</a></span>
  <span>, <a>Two</a></span>
  <span>, <a>Three</a></span>
  <span>, <a>Four</a></span>
</div>

然后，您可以使用foo过滤器轻松显示或隐藏任何您想要的:gt个孩子。

使用jQuery将文本和元素包装在另一个元素中

2 个答案: