Question

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

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

有时页面将有多个表。

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

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

我已经成功获得了符号。如您在我的代码中看到的，我选择了一个类，在该类中找到了跨度，获取了文本，并将其转换为子字符串。然后，我得到每个字符的第一个字符，当我console.log我的结果时，我看到了符号。我现在正尝试使用某种内联样式将它们包装在一个范围内，但是我得到了一个“ jquery-2.1.4.min.js：3 Uncaught DOMException：无法在'Node'上执行'insertBefore'：仅一个元素允许。”错误。

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>");
   })
});

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>

Answer 2

首先获取所有适当的span元素，然后再尝试获取第一个字符。然后遍历跨度，获取第一个字符并获取字符串减第一个字符，包装第一个字符，然后更新span。

$( () => {

  const $spans = $( '.article-table-descriptions > span' );

  $spans.each( ( i, span ) => {
      
    const $span = $( span );
    const str   = $span.text();
    const char  = str.slice( 0, 1 );
    const _str  = str.slice( 1, str.length );

    $span.html( `<span class="highlight--char">${char}</span>${_str}` );
    
  } );
  
} );

.highlight--char {
  margin-right: 0.5rem;
  color: lime;
}

<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 1a.</span>
    <span id="tblfn5">†footer text 1b.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 2a.</span>
    <span id="tblfn5">†footer text 2b.</span>
</div>

Answer 3

没有jQuery ，您可以执行类似的操作

let tableFooterSpans = document.querySelectorAll('.article-table-descriptions > span');

tableFooterSpans.forEach(e => e.innerHTML = e.innerHTML.replace(/(†|\*)?/g,"<span style='color: lime;margin-right:5px'>$1</span>"));

<div class="article-table-descriptions">
  <span>†text1</span> <span>*text2</span>
</div>

Answer 4

您可以尝试使用类似的方法来代替usig wrap()

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

console.log("1",tableFooterSpans);

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    console.log("2", chars);
    $("#test").append("<span style='color : yellow'>"+chars+"</span>");
   })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/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 id="test">test</div>

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

4 个答案: