-1

Webページに次のようなアイテムがいくつかあります。

<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値を持つすべてのスパンを取得してから変更するためのセレクターとしての最良の方法は何ですか?

4

3 に答える 3

7

使用:contains():

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

または、次のようにしfilter()ます。

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

:containsセレクターの方が速いと思います。JSPerfで自分で確認できます

編集 私は自分でテストを行いました。少なくとも Chromeよりfilter()も 64% 高速です: http://jsperf.com/contains-vs-filter-rpm:contains

ハードコーディングされた「Started」の代わりに動的テキスト (特定のスパンの属性) が必要な場合はどうすればよいですか??

<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'));
};
于 2013-10-29T13:40:40.440 に答える
1

テキストを正確に一致させたい場合

.filter()を使用する

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

アップデート

JSPerf 最速のコード。

$('.Status').filter(function () {
    return $.trim(this.innerHTML) == "Pending";
}).text('Started');
于 2013-10-29T13:41:50.657 に答える
0

バニラ 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 デモ

于 2013-10-29T13:45:42.280 に答える