CODEWITHSUNDEEP
javascriptjquery
MCM
MCM

Reputation: 141

Changing the text of item from loop

I want to change the text, or remove one letter from a list of items coming from the database, I have tried different simple jQuery methods, but none seems to be working.

I have tried jQuery .find(), .children(), .text(), .html(). 

if(requiredVisits == 1){
  $(`.upcoming-item${i + 1} `).find('.how-earned').text('EARNED FROM 1 VISIT')
}


$('#upcoming-rewards').append(`
    <item class="upcoming-reward-item upcoming-item${i + 1} available">
    <span>
        <p style="line-height: 16px" class="reward-item reward${i + 1}">${reward}</p>
    <span id="how-earned" class="how-earned">EARNED FROM ${requiredVisits} VISITS</span>
    </span>
   </item>
`)

I also tried just to console.log the text written and I get a 'undefined' or just blank result. So maybe I'm not traveling correctly to the span wanted. Any help would be great! :)

The expected result would be "EARNED FROM 1 VISIT" not "EARNED FROM 1 VISITS"

Upvotes: 0

Views: 43

Answers (3)

Taplar
Taplar

Reputation: 24965

Fix your html generation. Don't try to fix it after the fact, if possible.

$('#upcoming-rewards').append(`
    <item class="upcoming-reward-item upcoming-item${i + 1} available">
        <span>
            <p style="line-height: 16px" class="reward-item reward${i + 1}">${reward}</p>
            <span id="how-earned" class="how-earned">EARNED FROM ${requiredVisits} VISIT${requiredVisits > 1 ? 'S' : ''}</span>
        </span>
    </item>
`);

Upvotes: 1

FOLLGAD
FOLLGAD

Reputation: 36

You seem to attempt changing the text of an element before actually creating it. Try moving

if(requiredVisits == 1){
    $(`.upcoming-item${i + 1} `).find('.how-earned').text('EARNED FROM 1 VISIT')
}

to AFTER the .append() action.

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

One option would be to use the appropriate verbiage initially instead of trying to update it...

var visitsText = (requiredVisits === 1) ? 'VISIT' : 'VISITS';

$('#upcoming-rewards').append(`
    <item class="upcoming-reward-item upcoming-item${i + 1} available">
    <span>
        <p style="line-height: 16px" class="reward-item reward${i + 1}">${reward}</p>
    <span id="how-earned" class="how-earned">EARNED FROM ${requiredVisits} ${visitsText}</span>
    </span>
   </item>
`)

Upvotes: 1

Related Questions