jQuery選擇器進階：根據span文本內容精確匹配選中元素

問題場景

頁面存在多個span元素，文本內容不固定，需要根據已知文本值（如"cc"）精確選中對應的span元素。

HTML結構示例

<span>aa</span> <span>bb</span> <span>cc</span> <span>dd</span> ......

錯誤嘗試

$("span[text='cc']") // 不工作，text不是屬性

正確解決方案

方案一：:contains選擇器 + 精確過濾（推薦）

$("span:contains('cc')").filter(function() {
    return $(this).text() === 'cc';
})

方案二：原生JavaScript實現（無依賴）

function findSpanByText(text) {
    var spans = document.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].textContent === text || spans[i].innerText === text) {
            return spans[i];
        }
    }
    return null;
}
var target = findSpanByText('cc');

方案三：jQuery擴展選擇器（復用性強）

$.expr[':'].exactText = function(elem, index, match) {
    return $(elem).text() === match[3];
};
// 使用：$("span:exactText('cc')")

關鍵點對比

注意事項

• :contains為模糊匹配，"cc"會匹配"ccdd"，必須配合filter精確過濾
• textContent為標準屬性，innerText為IE專有，兼容性寫法需兼容兩者
• 大量DOM操作時建議緩存選擇結果