Question

有关于在表格中每行的前10个字符周围包裹div或span的问题。

<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>

如您所见，每行的前10个字符是日期。我想围绕这个包围，所以我可以更恰当的方式设置行的标题。但我只能通过jQuery来做到这一点，所以如果有人知道如何使这项工作，那就太棒了！

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/

围绕表格中每行的前10个字符包裹span或div

1 个答案: