How to implement .each() function into piece of code?-CodePudding

I'm still trying to learn the basics of JS.

Basically i just want to remove the first word from a given class. Like this:

Before:

<span >on the beach</span>

After:

<span >the beach</span>

I managed to do it by creating this piece of code:

jQuery(document).ready(
function(){
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('on',''));
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('at',''));
});

Problem now is that this works fine if i only have one instance of the ".remove-word" class present on a page, but as i have many i need to wrap the code in a .each() function otherwise this happens:

jQuery(document).ready(
function(){
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('on',''));
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('at',''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div><span >on the beach</span></div>

<div><span >at the roof</span></div>

<div><span >on the hill</span></div>

How do i implement the .each() function here?

Alternatively i think a script which just removes the first word without looking for either "on" or "at" would be ideal, but i tried and it's out of reach for me with my limited js knowledge as things stand, which is why i did it using the .replace() way instead.

Thanks.

CodePudding user response：

what about this?

jQuery('.remove-word').each(function( index ) {
    //get the index of the first space to the end of the string
    var firstWord = $(this).text().substring($(this).text().indexOf(' '), $(this).text().length);
    //set the value
    $(this).text(firstWord );  
});

You will want to do some error handling for .remove-word where there is no text at all or no spaces but this should be a good starting point

CodePudding user response：

You can do this. You can add .each to .remove-word class and then replace their content.

$(document).ready(function() {
  $(".remove-word").each((idx,htmlSpan)=>{
    $(htmlSpan).text($(htmlSpan).text().replace('at',''));
  })
});

If you just want to remove only the 1st word, then you can do this.

$(document).ready(function() {
  $(".remove-word").each((idx,htmlSpan)=>{
    let text = $(htmlSpan).text(); // get text
    let splittedText = text.split(" "); // split sentence on space. returns array.
    let remainingWords = splittedText.splice(1); // get array from index 1 to last so index 0 is removed.
    $(htmlSpan).text(remainingWords.join(" ")) // .join is joining string with " " space
  })
});