CODEWITHSUNDEEP
javascriptjquery
karmaso
karmaso

Reputation: 45

How to replace texts inside matching elements via jQuery?

HTML:

<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

I want when if point is 10,0, remove ,0.:

 <span class="point">10</span>

I was put alert with length but its not working.

    $('.point').each(function () {
        if ($('.point').text().length > 4) {
            alert("ok");
        }
    });

It was all points get alert.

What's my problem? How can I solve it?

Snippet

$('.point').each(function () {
  if ($('.point').text().length > 4) {
    alert("ok");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

Upvotes: 0

Views: 49

Answers (3)

Simply Craig
Simply Craig

Reputation: 1114

It depends if just for 10 then... 

$('.point').each(function () {
     var textAfterComma = $(this).text().split(",");
     if (textAfterComma[0] === '10' && textAfterComma[1] === '0') {
         $(this).text(textAfterComma[0]);
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

Working JSFiddle: http://jsfiddle.net/bc6jmtt2/1/

if you want all numbers ending with ,0 to be just the first number then...

$('.point').each(function () {
     var textAfterComma = $(this).text().split(",");
     if (textAfterComma[1] === '0') {
         $(this).text(textAfterComma[0]);
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

Working JSFiddle: http://jsfiddle.net/bc6jmtt2/

For you example at the bottom of your question there are two fixes:

First $('.point') to $(this) then if ($(this).text().length > 4) { to if ($(this).text().length >= 4) { or > 3 because none of your strings are > 4

$('.point').each(function () {
  if ($(this).text().length >= 4) {
    alert("ok");
  }
});

Working JSFiddle: http://jsfiddle.net/bc6jmtt2/3/

Upvotes: 1

Salil Dabholkar
Salil Dabholkar

Reputation: 622

Use $(this).text() instead. Using $(".point").text() results in concatenation of all text of point class like: 8,0 8,0 10,0 8,0 So:

$('.point').each(function () {
  if ($(this).text().length > 3) {
    alert("OK");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

Upvotes: 0

Nabil Kadimi
Nabil Kadimi

Reputation: 10384

Because $('.point').text() is the concatenation of the text in all elements with class .point, you should use $(this).text().

Also, you condition should be >=4 or ==== "10,0

Here's a better way:

$('.point:contains("10,0")').text('10');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="point">8,0</span>
<span class="point">8,0</span>
<span class="point">10,0</span>
<span class="point">8,0</span>

Upvotes: 1

Related Questions