0

ブラックリストの単語のいずれかを含む HTML 要素にクラスを追加したいと考えています。

たとえば、私のブラックリストは「悪い」と「醜い」で構成されており、それらのスパンにクラスを追加したいと考えています:

<div id="main">
    <span>This is good.</span>
    <span class="black">Bad things happen sometimes.</span>
    <span class="black">This is bad.</span>
    <span class="black">And this is ugly.</span>
</div>

<a onclick="blacklisterFunction();">Add Class</a>

blacklisterFunction() はどのように見えるべきですか? 関数は、ブラックリストに登録された単語ごとにメイン div をクロールする必要がありますか、またはより効果的な方法があります。

4

2 に答える 2

2

jQuery の場合:

$('#clickme').click(function () {

    $('div span').each(function() {

        var badthings = ['bad', 'ugly', 'gross'];

        var x = 0;

        while (x <= (badthings.length - 1)) { 

            if ($(this).text().toLowerCase().search(badthings[x]) !== -1) {

                $(this).addClass('black');

            }

            x++;

        }

    });

});

jsfiddle: http://jsfiddle.net/DgpnQ/4/

于 2012-05-30T20:38:52.230 に答える
1

1 つのアプローチを次に示します。

function blacklister(el, words) {
    if (!el || !words) {
        return false;
    }
    else {
        var text = el.textContent;
        for (var i = 0, len = words.length; i < len; i++) {
            if (text.test(new RegExp(words[i],'gi'))) {
                el.className += 'black';
            }
        }
    }
}

var m = document.getElementById('main'),
    spans = m.getElementsByTagName('span'),
    blacklist = ['ugly','bad'];

for (var i = 0, len = spans.length; i < len; i++) {
    blacklister(spans[i],blacklist);
}​

JS フィドルのデモ。

以下のOPが残したコメントに応じて編集され、Firefoxで上記を使用してエラーを報告します。

>

function blacklister(el, words) {
    if (!el || !words) {
        return false;
    }
    else {
        var text = el.textContent;
        for (var i = 0, len = words.length; i < len; i++) {
            if (text.match(new RegExp(words[i],'gi'))) {
                if (el.className.indexOf('black') == -1){
                    el.className += 'black';
                }
            }
        }
    }
}

var m = document.getElementById('main'),
    spans = m.getElementsByTagName('span'),
    blacklist = ['ugly','bad'];

for (var i = 0, len = spans.length; i < len; i++) {
    blacklister(spans[i],blacklist);
}​

JS フィドルのデモ。

参考文献:

于 2012-05-30T20:41:32.367 に答える