使用jQuery，有条件地改变跨度的最快方法是什么？

Question

我在网页上有很多项目有这样的内容：

<span id="Joe" class="Status">Pending</span>
<span id="Bill" class="Status">Completed</span>
<span id="Jonh" class="Status">Pending</span>
<span id="Scott" class="Status">Started</span>

我想要一些jquery来改变每个具有“待定”的html（）的跨度，然后将其更改为“已启动”或将其更改为该特定跨度的Id

作为选择器获取具有特定html值的所有跨度然后更改它们的最佳方式是什么？

Answer 1

使用:contains()：

$('.Status:contains("Pending")').text('Started');

或者filter()：

$('.Status').filter(function() {
    return $(this).text() == 'Pending';
}).text('Started');

我认为:contains选择器更快。您可以在JSPerf

自行查看

修改 我自己做了测试。结果显示filter()至少比Chrome中的:contains快64％：http://jsperf.com/contains-vs-filter-rpm

---

  

如果我想拥有动态文本（特定范围的属性）而不是硬编码“已启动”，该怎么办？

<span class="Status" data-new-text="Started">Pending</span>
<span class="Status" data-new-text="Started">Completed</span>
<span class="Status" data-new-text="Started">Pending</span>
<span class="Status" data-new-text="Started">Started</span>

$('.Status').filter(function() {
    return $(this).text() == 'Pending';
}).each(function() {
    $(this).text($(this).data('new-text'));
};

Answer 2

如果您想要完全匹配文字

使用.filter()

$('.Status').filter(function () {
    return $.trim(this.innerHTML) == "Pending";
}).html('Started');

<小时/> 更新

JSPerf最快的代码。

$('.Status').filter(function () {
    return $.trim(this.innerHTML) == "Pending";
}).text('Started');

Answer 3

在香草JS中：

var _StatusItems = document.getElementsByClassName('Status');

for (i = 0; i < _StatusItems.length; i++) {
    if (_StatusItems[i].innerHTML.indexOf('Pending') > -1) {
        _StatusItems[i].innerHTML = 'Started';
        continue;
    }
}

<强> jsFiddle DEMO