用條件追加到同一個類？

Question

我有這樣的代碼。現在，我想與條件替換類名「內容」舊值：如果該值在類在排列價值的一致下面，然後追加到它喜歡：（例）

<div class="content">style1</div> 
<div class="content">Stackover</div> 
<div class="content">style3</div> 
<div class="content">somthing</div> 
<div class="content">style1</div> 

<script> 
var styletodisplay = ["style1", "style2", "style3"]; 
for(m = 0; m < styletodisplay.length; m++) 
{ 
    //if the value get from class "content" coincides with one of the value in Array then append to that class(not for all) with HTML : <p>styleN is added</p> 
    //For example : if the value get from class "content" is style3, then you need to append to that class a HTML like : <p>style3 is added</p> 
} 
</script> 

這意味着，我們有結果：

<div class="content"><p>style1 is added</p></div> 
    <div class="content">Stackover</div> 
    <div class="content"><p>style3 is added</p></div> 
    <div class="content">somthing</div> 
    <div class="content"><p>style1 is added</p></div> 

我該怎麼做？我知道我們應該使用「ID」作爲唯一，但是HTML代碼是阻止的，只有類是允許的。幫我解決這個問題。由於

Answer 1

HTML和腳本：

<div class="content">style1</div> 
<div class="content">Stackover</div> 
<div class="content">style3</div> 
<div class="content">somthing</div> 
<div class="content">style1</div> 

<script> 
// Append containts() function to all array 
Array.prototype.contains = function(obj) { 
    var i = this.length; 
    while (i--) { 
     if (obj === this[i]) { 
      return true; 
     } 
    } 
    return false; 
} 

// Get all div .content 
var els = document.querySelectorAll(".content"); 

var styletodisplay = ["style1", "style2", "style3"]; 
for(m = 0; m < els.length; ++m) { 
    var inner = els[m].innerHTML; 

    // if inner div is one of styletodisplay 
    if(styletodisplay.contains(inner)) { 
     els[m].innerHTML = '<p>' + inner + ' is added</p>'; 
    } 
} 
</script> 

結果以HTML：

<div class="content"><p>style1 is added</p></div> 
<div class="content">Stackover</div> 
<div class="content"><p>style3 is added</p></div> 
<div class="content">somthing</div> 
<div class="content"><p>style1 is added</p></div> 

的的jsfiddle：http://jsfiddle.net/4Rgdy/

Answer 2

我自己的方法（雖然它需要跟上時代的瀏覽器） ：

function addFoundStyle(el, styles){ 
    var textProp = 'textContent' in document ? 'textContent' : 'innerText', 
     text = el[textProp].trim(), 
     para = document.createElement('p'), 
     foundAt = styles.indexOf(text); 
    if (foundAt > -1) { 
     para.appendChild(document.createTextNode(styles[foundAt] + ' is added')); 
     el.classList.add(styles[foundAt]); 
     el.appendChild(para); 
    } 
} 

styles = ['style1', 'style3']; 

[].forEach.call(document.querySelectorAll('div.content'), function(a){ 
    addFoundStyle(a, styles); 
}); 

JS Fiddle demo。

如果您願意替換元素的文本內容（而不是附加一個段落的元素）：

function addFoundStyle(el, styles){ 
    var textProp = 'textContent' in document ? 'textContent' : 'innerText', 
     text = el[textProp].trim(), 
     para = document.createElement('p'), 
     foundAt = styles.indexOf(text); 
    if (foundAt > -1) { 
     para.appendChild(document.createTextNode(styles[foundAt] + ' is added')); 
     el.classList.add(styles[foundAt]); 
     el.replaceChild(para, el.firstChild); 
    } 
} 

styles = ['style1', 'style3']; 

[].forEach.call(document.querySelectorAll('div.content'), function(a){ 
    addFoundStyle(a, styles); 
}); 

JS Fiddle demo。

順便提及，一個簡單的jQuery溶液：

var styles = ['style1','style2','style3']; 

$('div.content').text(function(i,t){ 
    var text = $.trim(t), 
     style = styles.indexOf(text); 
    $(this).addClass(styles[style]); 
    return style > -1 ? styles[style] + ' is added' : t; 
}); 

JS Fiddle demo。

參考文獻：

• 的JavaScript
  • Array.prototype.forEach()。
  • Array.prototype.indexOf()。
  • document.createElement()。
  • document.createTextNode()。
  • document.querySelectorAll()。
  • Element.classList。
  • Function.call()。
  • Node.replaceChild()。
  • 'property' in Object。
  • String.trim()。
• 的jQuery：
  • addClass()。
  • $.trim()。
  • text()。

Answer 3

如果你不介意一些jQuery的：

這裏有一個小提琴：http://jsfiddle.net/D6SxQ/4/

HTML

<div class="content">style1</div> 
<div class="content">Stackover</div> 
<div class="content">style3</div> 
<div class="content">somthing</div> 
<div class="content">style1</div> 

的JavaScript

var styletodisplay = ["style1", "style2", "style3"]; 

$('.content').each(function(i,el){ 
    var pos = styletodisplay.indexOf($(el).text()); 
    if (pos > -1) { 
     $(this).html("<p>" + styletodisplay[pos] + " is added</p>"); 
    } 
}); 

結果

<div class="content"><p>style1 is added</p></div> 
<div class="content">Stackover</div> 
<div class="content"><p>style3 is added</p></div> 
<div class="content">somthing</div> 
<div class="content"><p>style1 is added</p></div>