jquery - JQuery 将名称的第一个字母放在圆圈中

Question

我想创建name它正在显示的第一个字母圆圈，Data-Id但问题是该函数为所有人重复第一个字母？

我想要的功能应该是根据每个Data-Id文本显示第一个字母？

$('#name').each(function() {
  var str = $('#name').attr('data-id');
  var matches = str.match(/\b(\w)/g);
  var acronym = matches.join('');
  $('.shortname').prepend('<div class="my-circle">' + acronym + '</div>');
});

.my-circle {
  content: attr(data-letters);
  display: inline-block;
  font-size: 1em;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  border-radius: 50%;
  background: plum;
  vertical-align: middle;
  margin-right: 1em;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shortname"></div>
<div id="name" class="name" title="" data-id="Testing New"></div>

<div class="shortname"></div>
<div id="name" class="name" title="" data-id="Hello HI"></div>

<div class="shortname"></div>
<div id="name" class="name" title="" data-id="Hello Testing"></div>

标签： jqueryhtmlcss

Answer 1

将 转换id="name"为class="name"，.each()循环用于$(this)从当前名称中获取值，并.prev()获取.shortname:

$('.name').each(function() {
  var $name = $(this);
  var str = $name.attr('data-id');
  var matches = str.match(/\b(\w)/g);
  var acronym = matches.join('');
  $name.prev('.shortname').prepend('<div class="my-circle">' + acronym + '</div>');
});

.my-circle {
  content: attr(data-letters);
  display: inline-block;
  font-size: 1em;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  border-radius: 50%;
  background: plum;
  vertical-align: middle;
  margin-right: 1em;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shortname"></div>
<div class="name" class="name" title="" data-id="Testing New"></div>

<div class="shortname"></div>
<div class="name" class="name" title="" data-id="Hello HI"></div>

<div class="shortname"></div>
<div class="name" class="name" title="" data-id="Hello Testing"></div>