帶有「OR」運算符的jQuery屬性選擇器可能嗎？

是否可以使用「OR」運算符或類似的方法重新編寫以下選擇器？帶有「OR」運算符的jQuery屬性選擇器可能嗎？

$("a[href$='avi'], a[href$='mov'], a[href$='mp4'], a[href$='m4v']")

理想情況下是這樣的：

$("a[href$='avi|mov|mp4|m4v']") // incorrect

拿到幾英里了我的鍵盤。我有一個test fiddle。

來源

2011-10-17 Ross

你可以添加自己的正則表達式選擇器（http://james.padolsey.com/javascript/regex-selector-for-jquery/），但它可能是不值得爲這。 –

謝謝。舉例來說，這不值得，但在其他地方它是有用的。 – Ross

@ T.J。我不想*可能*在大型網絡應用程序中部署此功能。給出的例子是一個簡單而基本的測試用例，用於說明目的，以避免a）冗長，b）像我想玩jQuery代碼高爾夫。像正則表達式正是我正在尋找的東西。感謝評論被標記爲正確的答案，對我來說這是一個有趣的討論點。 – Ross

你可以通過使用James Padolseys Regex Selector for jQuery來擴展jQuery。當你想把正則表達式放入選擇器時非常有用。

Run this code in Test fiddle

jQuery.expr[':'].regex = function(elem, index, match) { 
    var matchParams = match[3].split(','), 
     validLabels = /^(data|css):/, 
     attr = { 
      method: matchParams[0].match(validLabels) ? 
         matchParams[0].split(':')[0] : 'attr', 
      property: matchParams.shift().replace(validLabels,'') 
     }, 
     regexFlags = 'ig', 
     regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags); 
    return regex.test(jQuery(elem)[attr.method](attr.property)); 
} 

$("a[href$='avi'], a[href$='mov'], a[href$='mp4'], a[href$='m4v']") 
    .addClass("select"); 


$('a:regex(href,avi|mov|mp4|m4v)').addClass("betterSelect");

來源

2011-10-17 09:37:20

@Ross：請注意，雖然*真的很酷*，這將過濾到JavaScript層，甚至在可以支持一系列逗號分隔屬性結束的瀏覽器上直接使用選擇器在'querySelectorAll'（這是很多這些天），影響性能。另外，請注意，Padolsey的東西在每個匹配標籤名稱的**元素上調用'jQuery（elem）'。每次調用'jQuery（）'都涉及幾個函數調用和一些內存分配。所以這是非常棒的東西，非常酷，但要留意性能影響。 –

不，CSS沒有這個（它將在attribute selectors區域），jQuery也沒有添加它（請參閱"attribute ends with" docs）。

你可以，當然，給自己一個效用函數這樣做，如果你不介意不能夠在|字符匹配，東西隱約這樣的：

(function($) { 
    $.attrEndsWith = attrEndsWith; 
    function attrEndsWith(tag, attr, list) { 
     return $(tag + "[" + attr + "$='" + list.split("|").join("'], " + tag + "[" + attr + "$='") + "']"); 
    } 
})(jQuery);

和使用，因此：

$.attrEndsWith("a", "href", "avi|mov|mp4|m4v");

這是未經測試的，但你明白了。

來源

2011-10-17 09:19:51

$("a").filter(function(){ return /(avi|mov|mp4|m4v)$/i.test($(this).attr('href')); }).addClass('betterSelect');

並非真的是你要找的答案，但也許會有所幫助。

來源

2011-10-17 09:23:09 spicavigo

這會將過濾器放入JavaScript層，即使是在支持一系列以逗號分隔的屬性結束的瀏覽器中，直接在querySelectorAll中（這些日子有相當數量的）選擇器，影響性能。如果性能不是問題，那很好，但是...（另外，絕對沒有理由做$（this）.attr（'href'）'和所有需要的內存分配和函數調用;'this .href'被普遍支持。） –

帶有「OR」運算符的jQuery屬性選擇器可能嗎？

回答

相關問題