用条件追加到同一个类？

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>