在表中每一行的前 10 个字符周围环绕一个 span 或 div

Question

Got a question regarding wrapping a div or a span around the first 10 characters of every row in my table.

<table class="category table table-striped table-bordered table-hover">
                                <thead>
        <tr>
            <th id="categorylist_header_title">
                <a href="#" onclick="Joomla.tableOrdering('a.title','asc','');return false;" class="hasTooltip" title="" data-original-title="<strong>Titel</strong><br />Klik om volgens deze kolom te sorteren">Titel</a>             </th>
                                                                        </tr>
    </thead>
            <tbody>
                                        <tr class="cat-list-row0">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/600-16-09-2015-hermann-wesselink-college">
                            16-09-2015 Hermann Wesselink College                            </a>
                                                                                                                </td>
                                                                                            </tr>
                                        <tr class="cat-list-row1">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/601-15-09-2015-hermann-wesselink-college">
                            15-09-2015 Hermann Wesselink College                            </a>
                                                                                                                </td>
                                                                                            </tr>
                                        <tr class="cat-list-row0">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/602-14-09-2015-hermann-wesselink-college">
                            14-09-2015 Hermann Wesselink College                            </a>
                                                                                                                </td>
                                                                                            </tr>
                                        <tr class="cat-list-row1">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/603-08-09-2015-metzo-college">
                            08-09-2015 Metzo College                            </a>
                                                                                                                </td>
                                                                                            </tr>
                                        <tr class="cat-list-row0">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/604-26-08-2015-st-ludger-college">
                            26-08-2015 St. Ludger College                           </a>
                                                                                                                </td>
                                                                                            </tr>
                                        <tr class="cat-list-row1">
                                <td headers="categorylist_header_title" class="list-title">
                                                <a href="/agenda-test/605-25-08-2015-stedelijk-gymnasium">
                            25-08-2015 Stedelijk Gymnasium                          </a>
                                                                                                                </td>
                                                                                            </tr>


                </tbody>
</table>

As you can see, the first 10 characters of every row is the date. I want to wrap a span around this so I can style the titles of the row in a bit more proper manner. But I only can do this via jQuery, so if anyone has an idea how to make this work, would be awesome!

Answer 1

$('.list-title').each(function(i,v){
text = $(this).find('a').text();
$(this).find('a').html("<span>"+text.slice(0,10)+"</span>"+text.slice(10));
});

jsfiddle : https://jsfiddle.net/Lgvd7to0/