返回所有 div 的 JS 值答案

【问题标题】：JS Value returning form all divs返回所有 div 的 JS 值
【发布时间】：2019-09-21 23:04:41
【问题描述】：

我试图从一个 div 中获取名字和姓氏的第一个字母并将其粘贴到另一个 div 中，但它在所有 div 中粘贴相同的值，而不是从每个 div 中获取唯一值。

问题小提琴： https://jsfiddle.net/bv7w8dxg/

 var takword = $('.nameholder').text().split(' ');
 var text = '';
 $.each(takword, function () {
    text += this.substring(0, 1);
 });
 $('.avatarholder').text(text);

标记 ` 约翰·多伊

 <div class="main-holder">
 <div class="nameholder">Kyle Davis</div>
 <div class="avatarholder"></div>
 </div>

 <div class="main-holder">
 <div class="nameholder">Seim Seiy</div>
 <div class="avatarholder"></div>
 </div>

 <div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`

【问题讨论】：

标签： javascript html

【解决方案1】：

您正在使用类选择器，它选择具有给定类名的所有元素。这就是为什么您将所有元素设置为相同的值

您需要包装您的元素，然后独立处理每一行我更新了你的代码 sn-p 来证明这一点：

$('.row').each(function() {
  var takword = $('.nameholder', this).text().split(' ');
  var text = '';
  $.each(takword, function () {
      text += this.substring(0, 1);
  });
  $('.avatarholder', this).text(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="nameholder">John Doe</div>
  <div class="avatarholder"></div>
</div>

<div class="row">
  <div class="nameholder">Kyle Davis</div>
  <div class="avatarholder"></div>
</div>

<div class="row">
  <div class="nameholder">Seim Seiy</div>
  <div class="avatarholder"></div>
</div>

<div class="row">
  <div class="nameholder">Momma Boy</div>
  <div class="avatarholder"></div>
</div>

【讨论】：