CODEWITHSUNDEEP
javascriptjquery
Momar
Momar

Reputation: 187

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

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! ^_^

Upvotes: 0

Views: 105

Answers (5)

adeneo
adeneo

Reputation: 318182

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

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

FIDDLE

Upvotes: 2

Ishan Jain
Ishan Jain

Reputation: 8161

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

Upvotes: 0

writeToBhuwan
writeToBhuwan

Reputation: 3281

$(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'));
    });
});

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10896

change your line below

FROM THIS

    var  = document.getElementsByClassName('number');

TO

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

Upvotes: 1

nrsharma
nrsharma

Reputation: 2562

You can easily do this by a class selector .

Try this

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

Upvotes: 0

Related Questions