jquery if div value1-10添加類

所以我試圖爲我的網站建立這個信譽欄，它將完全取決於給定的數字。功能應該是這樣的。jquery if div value1-10添加類

如果div有值1-10，加class="beginner" 如果div有值11-20，加class="mediocre" 如果div有值21-30，加class="hardcore" 等..

我有這樣的：

<div><a>7</a></div>

我想是這樣的：

<div class="beginner"><a>7</a></div>

我壽我應該從這樣的事情開始：

$("div:contains('0>10')").addClass("begginer");

但我非常確定這不起作用。誰能幫我這個？我敢在這裏失去了:(

來源

2012-01-02 Towfiq

jsBin demo

var rated = $('div a');     // SET YOUR 'numbers' source 
var r = parseInt(rated.text(), 10); // parse integers with radix 
var rate = 'beginner';     // SET INITIAL RATE 

    if ((r > 10) && (r <= 20)) { rate = 'mediocre'; } 
    if ((r > 20) && (r <= 30)) { rate = 'hardcore'; } 

rated.addClass(rate);     // FINALLY ADDCLASS TO ELEMENT

來源

2012-01-02 23:07:17

謝謝！我忘了問。我還想追加那些7旁邊的文字，比如說「Level 1」。可能嗎？ – Towfiq 2012-01-03 04:38:28

@Towfiq當然你可以：http://jsbin.com/ocuqem/4/edit – 2012-01-03 12:02:29

剛剛添加這段代碼到我這樣的javascript文件（不工作）： 'jQuery（function（）{ var rated = $ （'#userlvl div a'）; var r = parseInt（rated.text（），10）; var rate ='beginner'; var text ='level 1'; if（（r> 10） &&（r <= 20））{rate ='mediocre'; text ='level 2';} if（（r> 20）&&（r <= 30））{rate ='hardcore'; text ='level 3';} rated.addClass（rate）.parent（）。append（text）; }）;' – Towfiq 2012-01-04 10:19:20

我會做一個if語句，而不是匹配。

var val = parseInt($('div').text()); 
if (val <= 10) { 
    // ... 
} else if (val <= 20) { 
    // ... 
}

如果你想爲一組<div>就做這個，你可以使用

$('div').each(function() { 
    var val = parseInt($(this).text()); 
    // ...

來源

2012-01-02 22:16:57 Ktash

只需使用.filter()：

$('div').filter(function() { 
    var number = parseInt($(this).text(), 10); 

    return (number >= 1) && (number <= 10); 
}).addClass("beginner");

來源

2012-01-02 22:18:52 Blender

我相信你會定製代碼來處理這個問題。一個例子是：

$("div").addClass(function(index,currentClass) { 
    var value = parseInt($(this).children("a").text(), 10); 
    if (value <= 10) 
     return 'beginner' 
    if (value <= 20) 
     ... 
});

來源

2012-01-02 22:21:37 mgibsonbr

(function() { 
    var cssClasses = ['beginner','mediocre','hardcore','genius','mad-wizard']; 
    $('div').each(function(){ 
     var index = $(this).find('a').text(); 
     index = (index.length === 1) ? index = '0' : index = index.substr(0,1); 
     $(this).addClass(cssClasses[parseInt(index)]); 
    }); 
})(); 

// weird i know 
// this is assuming you don't go past 2 digits in value 

// this is wrong, its doing 0-9, 10-19, 20-21 sorry

來源

2012-01-02 22:36:31

jquery if div value1-10添加類

回答

相關問題