jquery 如何找到元素的首字母并在：：before中使用

rjzwgtxy 于 2024-01-07 发布在 jQuery

关注(0)|答案(2)|浏览(142)

我得到了以下设置：

(function($) {
  var text = $(".panel .panel-title a span").text();
  var first_letter = text.charAt(0);
  $(".panel-heading").attr('data-before', first_letter);
})(jQuery);

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

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

我想做的是在span元素中找到内容的第一个字母，在本例中是字母P。然后将这个字母转换为.panel-heading::before伪元素的内容。
有几个.panel div与第一个.panel div有相同的兄弟元素。每个元素中的span元素包含不同的文本，因此第一个字母不同。所以它应该总是获取相关的（第一个）字母并将其放置在::before内容中。
在@Michele De Falco的帮助下，我设法获取了第一个字母并将其放入伪内容中。但它总是获取第一个.panel div的第一个字母并将其放在任何地方。

jquery

来源：https://stackoverflow.com/questions/77647134/how-to-find-first-letter-of-element-and-use-it-in-before

2条答案

按热度按时间

nzkunb0c1#

我已经更新了你的jQuery使用each()，所以正确的父.panel-heading得到正确的data-before属性：

(function($) {
  // For each .panel
  $('.panel').each(function() {
    // use let instead of var for scoping
    let text = $(this).find('a span').text();
    // make sure the span element exists.
    if (text) {
      // Get the first letter
      let first_letter = text.charAt(0);
      // use the original parent $(this) to set the the data-att to the correct child.
      $(this).find('.panel-heading').attr('data-before', first_letter);
    }
  });
})(jQuery);

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

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

展开查看全部

赞(0）回复(0）举报 2024-01-07

zsohkypk2#

下面是jquery的示例，使用text()函数获取span标签的文本，然后使用charAt()函数获取第一个字符，最后我使用before()函数引用span.before标签

$(document).ready(function(){
  
  var text = $('span.text').text();
  var first_letter = text.charAt(0)
  $( ".panel-heading > span.before" ).before( first_letter )
       
  
});

个字符

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 如何找到元素的首字母并在：：before中使用

2条答案

相关问题

热门标签

最新问答