How to get the html of CLASS using jQuery or JS?

Question

How to get the html text of CLASS and use another function to change the html text?

For example, there are lot of tags (td) using the same class. But the inner html of that class will be changed after the function called.

HTML

<table>
 <tr><td class="number">1</td></tr>
 <tr><td class="number">2</td></tr>
 <tr><td class="number">3</td></tr>
 <tr><td class="number">4</td></tr>
 <tr><td class="number">5</td></tr>
</table>

jQuery / JS

function ChangeNumber(){
 var cusid_ele = document.getElementsByClassName('number');
 for (var i = 0; i < cusid_ele.length; ++i) {
  var item = cusid_ele[i];
  item.innerHTML = number(item.innerHTML);
 }
}

function number(n){
 if(n == 1)
  return "one";
 else if(n == 2)
  return "two";
 else if(n == 3)
  return "three";
 else if(n == 4)
  return "four";
 else if(n == 5)
  return "five";
}

window.onload = function(){ ChangeNumber() };

I don't know if my codes are incorrect. Yes, it is not working, so I need help. I just refer to this URL: https://stackoverflow.com/a/15560734/2903208

Could anyone try this? And if success, well that's great!

I want the output that will be:

one
two
three
four
five

Is it possible?

Thanks in advance! ^_^

you just forgot to add variable name near var

rajesh kakawat
– rajesh kakawat

2013-10-26 07:01:41 +00:00
Commented Oct 26, 2013 at 7:01 — rajesh kakawat
– rajesh kakawat, Commented Oct 26, 2013 at 7:01

writeToBhuwan · Accepted Answer · 2013-10-26 07:02:50Z

2

$(document).ready(function(){
    $('.number').each(function({ // added '
        alert($(this).text()); // added (
    });
});

EDIT: Change the HTML to

<table>
 <tr><td class="number" title="one">1</td></tr>
 <tr><td class="number" title="two">2</td></tr>
 <tr><td class="number" title="three">3</td></tr>
 <tr><td class="number" title="four">4</td></tr>
 <tr><td class="number" title="five">5</td></tr>
</table>

and modify the above function to:

$(document).ready(function(){
    $('.number).each(function({
        alert($this).attr('title'));
    });
});

edited Oct 26, 2013 at 7:02

answered Oct 26, 2013 at 6:55

writeToBhuwan

3,28111 gold badges42 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Momar Over a year ago

Thanks, I will try it. I am newbie in jQuery. Thanks again.

writeToBhuwan Over a year ago

simply add the above script in your JS file... Dont forget to add jquery refernce on your page

adeneo · Accepted Answer · 2013-10-26 07:58:56Z

2

var map = {
    1: 'one',
    2: 'two',
    3: 'three',
    4: 'four',
    5: 'five',
    ........
}

$('table .number').text(function(_,txt) {
    return map[parseInt($.trim(txt), 10)];
});

FIDDLE

edited Oct 26, 2013 at 7:58

answered Oct 26, 2013 at 6:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-10-26 07:00:58Z

1

change your line below

FROM THIS

    var  = document.getElementsByClassName('number');

TO

    var cusid_ele = document.getElementsByClassName('number');

answered Oct 26, 2013 at 7:00

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

nrsharma · Accepted Answer · 2013-10-26 07:00:02Z

0

You can easily do this by a class selector .

Try this

$(document).ready(function(){
    $('.number').each(function({
        var strhtml = $(this).text();
    });
});

answered Oct 26, 2013 at 7:00

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

Comments

Ishan Jain · Accepted Answer · 2013-10-26 07:17:14Z

You wrap your function to onload event. But the onload event is a standard event in the DOM, which occurs later, when all content (e.g. images) also has been loaded.

You can use .ready event(The ready event occurs after the HTML document has been loaded).

Try this :

HTML-

<table>
 <tr><td class="number">1</td></tr>
 <tr><td class="number">2</td></tr>
 <tr><td class="number">3</td></tr>
 <tr><td class="number">4</td></tr>
 <tr><td class="number">5</td></tr>
</table>

Script code-

$('document').ready(function(){
    ChangeNumber();
});


function ChangeNumber(){
 var cusid_ele = document.getElementsByClassName('number');        
 for (var i = 0; i < cusid_ele.length; ++i) {
  var item = cusid_ele[i];
  item.innerHTML = number(item.innerHTML);
 }
}

function number(n){
 if(n == 1)
  return "one";
 else if(n == 2)
  return "two";
 else if(n == 3)
  return "three";
 else if(n == 4)
  return "four";
 else if(n == 5)
  return "five";
}

Try is jsfiddle

Collectives™ on Stack Overflow

How to get the html of CLASS using jQuery or JS?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related