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

コードが間違っているかどうかわかりません。はい、うまくいきません。助けが必要です。この URL を参照するだけです: 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(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";
}

トライは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 に答える