How to replace texts inside matching elements via jQuery?

Question

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>

if ($('.point').text().length > 4) { should be if ($(this).text().length > 4) { — j08691
– j08691, Commented Nov 20, 2014 at 18:39

Simply Craig · Accepted Answer · 2014-11-20 19:01:10Z

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/

Nabil Kadimi · Accepted Answer · 2014-11-20 18:49:11Z

1

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>

edited Nov 20, 2014 at 18:49

answered Nov 20, 2014 at 18:43

Nabil Kadimi

10.5k2 gold badges56 silver badges60 bronze badges

Comments

Salil Dabholkar · Accepted Answer · 2014-11-20 18:54:44Z

0

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>

answered Nov 20, 2014 at 18:54

Salil Dabholkar

6223 silver badges7 bronze badges

3 Comments

Simply Craig Over a year ago

Why even post an answer that just mimics the other answers?

Salil Dabholkar Over a year ago

Sorry, I started typing it before the other one was posted and only realized after submitting my answer. Should I delete it then? (I joined just recently and hence not very familiar with all the workings)

Simply Craig Over a year ago

No, just 15 minutes after our answers you posted. Seemed like you were just trying to copy an answer.

Collectives™ on Stack Overflow

How to replace texts inside matching elements via jQuery?

Snippet

3 Answers 3

Comments

Here's a better way:

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Snippet

3 Answers 3

Comments

Here's a better way:

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related