0

如何获取 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

可能吗？

提前致谢！^_^

4

5 回答 5

2 
$(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'));
    });
});
于 2013-10-26T06:55:38.243 回答
2 
var map = {
    1: 'one',
    2: 'two',
    3: 'three',
    4: 'four',
    5: 'five',
    ........
}

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

小提琴

于 2013-10-26T06:59:07.823 回答
1

在下面更改您的行

由此

    var  = document.getElementsByClassName('number');

至

    var cusid_ele = document.getElementsByClassName('number');
于 2013-10-26T07:00:58.720 回答
0

您将函数包装到onload事件。但是该onload事件是 DOM 中的一个标准事件，它会在所有内容（例如图像）也已加载时发生。

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

尝试这个 ：

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";
}

试试是jsfiddle

于 2013-10-26T07:09:22.123 回答
0

您可以通过class selector.

尝试这个

$(document).ready(function(){
    $('.number').each(function({
        var strhtml = $(this).text();
    });
});
于 2013-10-26T07:00:02.127 回答