Question

我有这样的代码。现在，我想用条件替换类名“content”中的旧值：如果类中的值与下面的Array中的值之一一致，则追加到它，如:(参见示例）

<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>

附加条件附加到同一个类？

3 个答案: