Tengo varios nombres y quiero obtener la primera letra o cada palabra. ¿Cómo puedo hacer esto?
Mi código:-
$('.testimonial-box').each(function(){ let clientNameFirstLetter = $(this).find('.client-name').text(); let clientNameSecondLetter = $(this).find('.client-name').text(); let clientNameBothLetters = clientNameFirstLetter.charAt(0) + clientNameSecondLetter.charAt(0); $(this).find('.img-circle').text(clientNameBothLetters); }); .testimonial-sectiioin{ display:flex; gap:45px;} .testimonial-sectiioin .testimonial-box .img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>¡Gracias!
$('.testimonial-box').each(function(){ // Get client name let clientName = $(this).find('.client-name').text(); // Create an array with words inside the name let splittedName = clientName.split(' '); // Now let's loop all words and save the first letter var name = '' splittedName.forEach(n => { name += n[0] }) // Set name to current image circle $(this).find('.img-circle').text(name); }); .testimonial-sectiioin{ display:flex; gap:45px;} .testimonial-sectiioin .testimonial-box .img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>Puede usar split para dividir el texto según el espacio. Entonces obtendrá su nombre y segundo nombre.
Entonces puedes tomar las primeras letras de ambas palabras. Fácil.
Si tiene más de 2 palabras en el nombre, puede usar un mapa/forEach para obtener cada letra.
$('.testimonial-box').each(function(){ let clientName = $(this).find('.client-name').text(); let clientNameBothLetters = clientName.split(" ")[0][0] + clientName.split(" ")[clientName.split(" ").length - 1][0]; $(this).find('.img-circle').text(clientNameBothLetters); }); .testimonial-sectiioin{ display:flex; gap:45px;} .testimonial-sectiioin .testimonial-box .img-circle { width: 100px; height: 100px; background: #ccc; border-radius: 50%; font-size: 55px; font-family: proximaNovaBold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="testimonial-sectiioin"> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Rohit Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Vipin Kumar Verma</p> </div> <div class="testimonial-box"> <div class="img-circle"></div> <p class="client-name">Neha Aggarwal</p> </div> </section>EDITAR
Según la solicitud, el fragmento se actualizó de manera que solo se mostrarán dos letras en el img-circle . Entonces, para "Vipin Kumar Verma", será "VV".