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 Oct 26 '13 at 07:01 — rajesh kakawat, Oct 26 '13 at 07:01

writeToBhuwan · Answer 1 · 2013-10-26T07:02:50.927

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 '13 at 07:02

answered Oct 26 '13 at 06:55

writeToBhuwan

3,233
11
39
67

Thanks, I will try it. I am newbie in jQuery. Thanks again. – Momar Oct 26 '13 at 06:56
simply add the above script in your JS file... Dont forget to add jquery refernce on your page – writeToBhuwan Oct 26 '13 at 06:57

adeneo · Answer 2 · 2013-10-26T07:58:56.957

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 '13 at 07:58

answered Oct 26 '13 at 06:59

adeneo

312,895
29
395
388

score 1 · Answer 3 · answered Oct 26 '13 at 07:00

1

change your line below

FROM THIS

    var  = document.getElementsByClassName('number');

TO

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

answered Oct 26 '13 at 07:00

rajesh kakawat

10,826
1
21
40

score 0 · Answer 4 · answered Oct 26 '13 at 07:00

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 '13 at 07:00

nrsharma

2,532
3
20
36

Ishan Jain · Answer 5 · 2013-10-26T07:17:14.860

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

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

5 Answers5