循环遍历foreach循环中的元素并从值中提取首字母缩写词，然后将另一个元素的值设置为派生的首字母缩略词

Question

I'm having this challenge of looping through an element in a foreach iteration and then extract an acronym from the element, then set another element's value to the derived acronym.

Here's my code

1) cshtml:

foreach (var item in Model)
{                
     <h3 class="getName">@item.FullName</h3>
     [...]
     <h4 class="displayAvatar"></h4>
     [...]
}   

2) Jquery code:

$('.getName').each(function (e) {
        var techieFullName = $('.getName').text();
        var getNameAcronym = techieFullName.match(/\b(\w)/g);
        var theName = getNameAcronym.join('');
        $('.displayAvatar').text(theName);
});

The code above assigns the same result(derived acronym) to all h4 elements with class of "displayAvatar" but i want each fullname be set to each acronym

How do i get it running please? Appreciate

Answer 1

Since your using a forEach Loop. Its easier if you enclose multiple heading tags inside a div say eachRow . script is provided below, its straight forward.

CSHTML:

foreach (var item in Model)
{     
   <div class="eachRow">           
     <h3 class="getName">@item.FullName</h3>
     <h4 class="displayAvatar"></h4>
   </div>
}  

JQUERY:

$('.getName').each(function (e) {
        var techieFullName = $(this).text();
        var getNameAcronym = techieFullName.match(/\b(\w)/g);
        var theName = getNameAcronym.join('');
        $(this).closest('.eachRow').find('.displayAvatar').text(theName);
});

Edit: Use pipe lining to reduce the use of many local variables.

$('.getName').each(function (e) {
            var result=  $(this).text().match(/\b(\w)/g).join('');
            $(this).closest('.eachRow').find('.displayAvatar').text(result);
    });

Answer 2

You can use .next() to get the immediately following sibling with class displayAvatar :

$('.getName').each(function (e) {
    var techieFullName = $(this).text();
    var getNameAcronym = techieFullName.match(/\b(\w)/g);
    var theName = getNameAcronym.join('');
    $(this).next(".displayAvatar").text(theName);
});