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

如何獲取CLASS的html文本並使用其他函數更改html文本？如何使用jQuery或JS獲取CLASS的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

這可能嗎？

提前致謝！^_^

來源

2013-10-26 Momar

你只是忘了添加變量名附近VAR –

$(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-26 06:55:38 writeToBhuwan

謝謝，我會嘗試。我是jQuery中的新手。再次感謝。 – Momar

只需將上面的腳本添加到您的JS文件中......不要忘記在您的頁面上添加jquery引用 – writeToBhuwan

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

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

FIDDLE

來源

2013-10-26 06:59:07 adeneo

好的，謝謝，我會試一試。直到我成功。 – Momar

您可以輕鬆完成這通過一個class selector。

試試這個

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

來源

2013-10-26 07:00:02 nrsharma

變化如下

你的線從本

var = document.getElementsByClassName('number');

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

來源

2013-10-26 07:00:58

你換你的函數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

來源

2013-10-26 07:09:22

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

回答

相關問題