Question

如何获取CLASS的html文本并使用其他函数来更改html文本？

例如，有很多标签（td）使用相同的类。但是在调用函数后，该类的内部html将被更改。

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

我不知道我的代码是否不正确。是的，它不起作用，所以我需要帮助。我只是引用此网址：https://stackoverflow.com/a/15560734/2903208

有人可以试试吗？如果成功，那就太好了！

我想要输出：

one
two
three
four
five

有可能吗？

提前致谢！ ^ _ ^

Answer 1

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

编辑：将HTML更改为

<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>

并将上述功能修改为：

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

Answer 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

Answer 3

更改下面的行

从此

    var  = document.getElementsByClassName('number');

要

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

Answer 4

您可以通过class selector轻松完成此操作。

试试这个

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

Answer 5

将函数包装到onload事件。但是onload事件是DOM中的标准事件，稍后在所有内容（例如图像）都已加载时发生。

您可以使用.ready事件（在加载HTML文档后发生就绪事件）。

试试这个：

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>

脚本代码 -

$('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

如何使用jQuery或JS获取CLASS的html？

5 个答案: