使用javascript定位h1中每个单词的首字母

发布于05月18日

我试图用span类将每个单词的第一个字母包装在标题标记中，这样我就可以使用CSS设置它们的样式.我试图使用我在这里找到的一个片段，但我有2个h1标记，它正在使用第一个标记，并在第二个标记中重复它！

功能如下:

<script>
  $(document).ready(function() {
    var words = $('h1').text().split(' ');
    var html = '';
    $.each(words, function() {
      html += '<span class="firstLetter">' + this.substring(0, 1) + '</span>' + this.substring(1) + ' ';
      $('h1').html(html);
    });

  });
</script>

因此，我在顶部的横幅中有一个h1，在内容的开头有一个h1，但该函数正在使用顶部横幅标题并用它替换内容标题，但span类正在工作！

我知道你不应该有2个h1，但我想针对所有标题，这是一个CMS的客户，所以我不能保证他们不会使用多个h1，所以我正在测试它！

推荐答案

根据OP的要求，这将"包装每个单词的第一个字母".

因为有两个<h1>元素(正如OP所说，非常错误)，所以也应该使用each来迭代它们，就像OP对words数组所做的一样.

$(document).ready(function() {

    $('h1').each( function(index, heading) {
    
      const words = $(heading).text().split(' ')
      let html = '';
      
      $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
      })
      
      $(heading).html(html);
    })
    
});

span.firstLetter {
  color: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Lorem ipsum dolor sit amet</h1>

<hr>

<h1>Bacon ipsum dolor amet biltong pork chop bacon</h1>