javascript - 如何设置字符串的第一个字符的样式？

Question

我无法控制这个项目中的 HTML，所以一切都必须使用 JavaScript/Jquery 完成。

我有来自服务器的多个页面。其中一些表格的页脚带有脚注。这些脚注的第一个字符是 * 或 †</p>

有时页面会有多个表格。

我不能使用 ::first-letter，因为它选择了符号和第一个字母。我需要填充仅在符号的右侧

我需要在这些字符的右侧添加填充以将它们与文本分开。

我已经成功地获得了符号。正如您在我的代码中看到的，我选择了类，在类中找到跨度，获取文本，并将它们转换为子字符串。然后我得到每个字符的第一个字符，当我 console.log 我的结果时，我看到了这些符号。我现在试图用一些内联样式将它们包装在一个跨度中，但我得到一个“jquery-2.1.4.min.js:3 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': 只有一个允许文档上的元素。” 错误。

HTML 代码是在 xsl 文档中生成的，但下面是从检查器中获取的表格页脚：

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    $(chars).wrap("<span style='color: lime;'></span>");
   })
});

标签： javascriptjquerycss

Answer 1

试试这个：

$(document).ready(function () {

    var span = $('.article-table-descriptions > span');

    span.each(function(index, el){
    
       var span_html =  $(el).html();

       $(el).html("<span style='color: lime;'>"+ span_html.charAt(0)  +"</span>" + span_html.substring(1,span_html.length));

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn6">*footer text.</span>
    <span id="tblfn7">†footer text.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn8">*footer text.</span>
    <span id="tblfn9">†footer text.</span>
</div>