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

我有一个页面基本上是这样的：

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

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

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

一，二，三，四

为了简洁起见，删除了额外的属性

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

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

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

<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 a:gt（1）”）.wrapAll（“”）

）在这里不起作用，因为每个链接之间都有文本节点（逗号），并且这些节点不是该查询选择的。

首先，您可能应该将元素重写为如下所示：

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

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

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

一个
二
三
四

---

然后，您可以使用

：gt

过滤器轻松地显示或隐藏您想要的任何

foo

子节点。

尝试此操作，根据

2n

调整索引，因为现在每个文本节点都计为一个：

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

$（函数（）{
var n=4；
$（'#foo'）.contents（）
.filter（函数（索引）{
返回索引>n&（（this.nodeType==3）| |（this.nodeName==A”））
.wrapAll（“”）；
});

为什么采用这种方法？nickf只是想在索引后隐藏所有“a”元素。@patrick-再看看标记……隐藏所有

元素会留下很多逗号：）是的，你说得对。它击中了我。该死。我讨厌落选o）