Question

我搜索了几个小时，不敢相信我无法在任何地方找到答案。

我们有一个聊天室。这是HTML的结构：

<p class="foo"><span>Irene says:</span> some words</p>
<p class="foo"><span>Joe says:</span> some other words</p>
<p class="foo"><span>Billie Jean says:</span> something else</p>
<p class="foo"><span>Gumby says:</span> Well, this is a boring conversation.</p>
<p class="foo"><span>Newbie says:</span> where am i?</p>

我想要做的是将相同的类添加到包含职员名称的所有<span>标签中，并且仅当它们位于.foo类内时，我才能使这些名称脱颖而出在聊天室里。我可以使它适用于一个名称：

$('.foo span:contains('+ Billie Jean +')').addClass('colorize');

我可以在阵列中使用相同的功能吗？

var staffers=new Array(
    "Billie Jean",
    "Joe",
    "Gumby"
);

如果我在下面的[]中添加0,1或2，它适用于一个名称：

$('.foo span:contains('+ staffers[0] +')').addClass('colorize');

我以为我可以将其更改为[i]，但当然，这不起作用。

我可以使用纯HTML和CSS制作完全响应的布局，但我不仅仅知道几个基本的javascript函数，而且必须查找我正在尝试做的每件小事。我不希望超过5或6个名称需要这个，所以为每个名称使用单独的:contains行可以是一个选项，但我想知道是否有更有效的方法来做到这一点。 / p>

提前致谢！

修改

有人在这里发布了一个不太有用的解决方案，但是一旦我删除if部分，它就有用了。

for ( i = 0; i < staffers.length; i++ ) {
    $('.foo span:contains('+ staffers[i] +')').addClass('colorize');
}

还有一些关于i正在增量的内容，但我不记得说了什么。

无论你是谁，谢谢你！

Answer 1

我认为这种方法比在循环中重新查询dom更快

var staffers=[
        "Billie Jean",
        "Joe",
        "Gumby"
    ];

var elems = $('.foo span');
elems.each(function (){
    var el = $(this);

    staffers.forEach(function (item){
        if (el.text().indexOf(item) > -1) {
            el.addClass('colorize');
        }
    });

});

Answer 2

在纯ECMA5 javascript中，没有库。

CSS

.colorize {
    background-color:yellow;
}

HTML

<p class="foo"><span>Irene says:</span> some words</p>
<p class="foo"><span>Joe says:</span> some other words</p>
<p class="foo"><span>Billie Jean says:</span> something else</p>
<p class="foo"><span>Gumby says:</span> Well, this is a boring conversation.</p>
<p class="foo"><span>Newbie says:</span> where am i?</p>

的Javascript

var staffers = [
    "Billie Jean",
    "Joe",
    "Gumby"];

// Find all spans contained within elements that have a class of `foo`, step through them all.
Array.prototype.forEach.call(document.querySelectorAll('.foo span'), function (span) {
    // Store the text of the span for testing the content
    var spanText = span.textContent;

    // For the current span, step though some of the staffers names until matched.
    staffers.some(function (staff) {
        // Is the name contained in the text?
        if (spanText.indexOf(staff) !== -1) {
            // Yes. Add the `colorize` class to the current span.
            span.classList.add('colorize');
            // We found a match, no need to continue searching staffers.
            return true;
        }

        // Current staff name was not matched. Continue searching staffers
        return false;
    });
});

在jsFiddle

上

jQuery：如果span包含任何这些单词，请添加此类

2 个答案: