jquery - 使用 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 快 64% ：http: //jsperf.com/contains-vs-filter-rpm:contains

---

如果我想要动态文本（特定跨度的属性）而不是硬编码的“开始”怎么办？

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