的jQuery：包含（）選擇大寫和小寫問題

我的HTML看起來像這樣的jQuery：包含（）選擇大寫和小寫問題

<input id="txt" value=""></input> 

<div class="link-item">jK</div> 
<div class="link-item">JFOO</div>

我的js

$('#txt').keyup(function(){ 

    var txtsearch = $('#txt').val(); 
    var filt = $("div.link-item:contains('" + txtsearch +"')"); 

    $("div.link-item").css("display", "none") 
     .filter(filt) 
     .css("display", "block"); 

});

我期待在客戶端動態過濾內容。當我鍵入大寫字母j時，它只返回第二個div，而我想要得到包含j的所有div，無論是大寫還是小寫。

來源

2012-01-05 Nerudo

這不是一個問題（如果你的意思是它返回的第一個div），併爲您的信息，你寫這樣的輸入：'<輸入ID =「TXT」值=「」 />的' – noob 2012-01-05 17:32:56

可能重複HTTP ：//stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector和http://stackoverflow.com/questions/2196641/how-do-i-make-jquery-contains不區分大小寫 – qiao 2012-01-05 17:34:14

可能的重複http://stackoverflow.com/q/2196641/1114171 – 2012-01-05 17:34:32

您可以將.contains過濾器更改爲不區分大小寫或創建您自己的選擇器。

jQuery.expr[':'].icontains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
};

這將創建一個新的選擇：icontains（或者你能說出它不敏感，包含，或任何適合你的想象）。它的用法是一樣包含：$('div:icontains("Stack")');將匹配：

<div>stack</div> 
<div>Stack</div> 
<div>StAcKOverflow</div>

或者覆蓋現有.contains過濾器：

jQuery.expr[':'].contains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
};

有了這個地方，

$("div:contains('John')");

會選擇所有其中三個元素：

<div>john</div> 
<div>John</div> 
<div>hey hey JOHN hey hey</div>

來源

2012-01-05 17:50:28

我認爲你應該爲此創建一個單獨的選擇器，而不是重寫默認的選擇器。 – Stefan 2012-01-05 18:10:21

你我最後的給予好評（雖然我建議將其命名爲containsInsensitive所以你不要去覆蓋內置的東西） – 2012-01-05 18:21:47

不會m爲所有的字符串'：包含（富）'那你就必須將其手動去除？ jQuery文檔是否可以在任何地方解釋這個函數？ – 2012-01-05 18:31:24

爲什麼不使用filter函數，並傳入一個使用不區分大小寫的正則表達式的函數？

var filteredDivs = $("div.link-item").filter(function() { 
    var reg = new RegExp(txtsearch, "i"); 
    return reg.test($(this).text()); 
});

DEMO

來源

2012-01-05 17:36:06

我不相信有一種方法用原料選擇這樣做。 contains選擇器區分大小寫，並且不會顯示爲不區分大小寫的版本。我認爲最好的方法是使用一個過濾器，手動查詢對象

var filt = function (unused) { 
    $(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1; 
};

來源

2012-01-05 17:37:47 JaredPar

這裏是我的貢獻，希望它有助於:)

$('#txt').keyup(function() { 
    var query = $(this).val(); 
    $("div.link-item") 
     .hide() 
     .filter(':contains("' + query + '")') 
     .show(); 
});

的:contains() selector是區分大小寫的。

匹配文本可以直接出現在所選元素，任何元素的後代或其組合中。與屬性值選擇器一樣，contains（）的括號內的文本可以寫成單詞或用引號包圍。 該文本必須有匹配的案例才能被選中。

還創建了demo如果有人想嘗試一下。

UPDATE

對不起，一定是誤解了你的問題。

在http://bugs.jquery.com/ticket/278找到了這個jQuery表達式來創建一個新選擇器，它是不區分大小寫和我更新了我的demo。

$.extend($.expr[':'], { 
    'containsi': function(elem, i, match, array) { 
    return (elem.textContent || elem.innerText || '').toLowerCase() 
     .indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
});

來源

2012-01-05 17:48:32 Stefan

的jQuery：包含（）選擇大寫和小寫問題

回答

相關問題