Обернуть текст и элементы в другой элемент, используя jQuery

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.