将字符串的第一个字符复制到另一个div jquery或javascript


Copy first character of string to another div jquery or javascript

jquery或javascript是否可以将用户生成的字符串的第一个字符复制到另一个div？

例如，iPhone上的联系人列表。联系人姓名的第一个字母用在姓名旁边的圆圈中。

有了正确的代码片段，输出将如下所示，"名字，姓氏"将不同。

1
2
3
4
5
F
First name, Last name

J
John Smith

我试图从这些其他的帖子中得到一些想法：

  • 在javascript中，如何将字符串的第一个字母变为大写？
  • 如何在jquery中获取字符串的前三个字母？
  • 检测DIV中的字符并删除它javascript或jquery

但是，我不确定从哪里开始以及如何将结果输出到"initial"部分。

这样做的简单方法是为.initial元素的text()提供一个函数，它从同级.name中读取第一个字符并返回它，如下所示：

1
2
3
$('.initial').text(function() {
  return $(this).next('.name').text().slice(0, 1).toUpperCase();
});
1
2
3
4
5
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Foo Bar


John Smith

号

相关讨论

我想出了一个普通的JS解决方案：

https://jsfiddle.net/y0c9be6g/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bob Smith


Jim Halpert


Billy Baldwin


var names = document.querySelectorAll(".name");
var initials = document.querySelectorAll(".initial");

function addInitial(item){
 item.previousSibling.previousSibling.innerHTML = item.textContent.charAt(0);
}

names.forEach(addInitial);