JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<div>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
</div>

CSS

a { display: block; }
.wrap { display: block; padding-left: 10px; }

JavaScript

var links = $('a').filter(function(index, item) {
    console.log(item);
   if(index > 2) return $(item).wrap('<span/>');
   else return item;
});

//wrapper.html(wrapper.wrapAll('<span class="wrap"></span>'));

$('div').html(links);