0

我有这样的代码。现在，我想用条件替换类名“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 代码是块，只允许使用类。帮我解决这个问题。谢谢

4

3 回答 3

2

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/

于 2013-10-23T22:07:26.160 回答
1

如果你不介意一些 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>
于 2013-10-23T22:18:11.013 回答
1

我自己的方法（虽然它需要一个最新的浏览器）：

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 小提琴演示。

如果您希望替换元素的文本内容（而不是在元素上附加段落）：

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 小提琴演示。

顺便说一下，一个简单的 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 小提琴演示。

参考：

于 2013-10-23T22:09:00.350 回答