如何为每个.panel的.panel-heading::before设置对应span首字母

原代码的问题在于，直接通过$(".panel .panel-title a span").text()获取文本时，jQuery只会返回第一个匹配元素的文本内容，接着用$(".panel-heading").attr('data-before', first_letter)把这个首字母批量设置给所有面板标题，导致所有伪元素内容完全一致。

要实现每个面板对应自己的首字母，需要逐个遍历处理每个.panel元素：

修正后的JavaScript代码 #

(function($) {
  // 遍历页面上的每个.panel元素
  $(".panel").each(function() {
    // 获取当前面板内span的文本内容
    var text = $(this).find(".panel-title a span").text();
    // 提取文本的首字母
    var first_letter = text.charAt(0);
    // 给当前面板的.panel-heading设置对应的data-before属性
    $(this).find(".panel-heading").attr('data-before', first_letter);
  });
})(jQuery);

说明 #

• 使用.each()遍历每个面板，确保每个面板独立处理，不会互相干扰
• 通过$(this)定位当前遍历的面板，再用.find()查找该面板内的子元素，避免跨面板的选择错误
• 可选优化：如果存在span文本为空的情况，可以添加判断避免空字符显示：

  var first_letter = text.trim() ? text.trim().charAt(0) : '';
  

原CSS和HTML代码（无需修改） #

CSS #

.panel-heading:before {
  content: attr(data-before);
  left: -25px;
  top: 6px;
  display: inline-block;
  position: absolute;
  height: 45px;
  width: 47px;
  z-index: 9999;
}

HTML #

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

<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Piece rate work</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Another Letter Here</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>More Letters Here</span>
      </a>
    </p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者CliffVandyck