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>

Answer 1

将id="name"转换为class="name"，然后.each()循环使用$(this)从当前名称中获取值，并使用.prev()获取{ {1}}：

.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;
}

jQuery放在名称的圆圈首字母中

1 个答案: