jQuery的通配符選擇

Question

我想選擇所有具有屬性的元素開始data-something-

例如

<span data-something-random="test">span 1</span> 
<span data-nope="nope">span 2</span> 
<span data-something-else="another test">span 3</span> 

從上面的例子，我想選擇跨度1和跨度3.

我試過

$('*[$data-validate]') 

但它沒有奏效。

也歡迎使用jQuery方法替代僞選擇器的替代方法。

Answer 1

我建議：

$('*').filter(
    function(){ 
     var that = $(this), 
      data = that.data(); 
     for (var a in data){ 
      if (data.hasOwnProperty(a)){ 
       return /^something/.test(a); 
      } 
     } 
    }).css('color','red'); 

JS Fiddle demo。

編輯提供了一個簡單的jQuery插件，達到同樣的，你需要在正則表達式傳：

$.fn.hasAttrMatching = function (expr) { 
    var reg, data; 
    if (!expr) { 
     return this; 
    } else { 
     if (typeof expr === 'string') { 
      reg = new RegExp(expr); 
     } else if (typeof expr === 'object' && expr.test) { 
      reg = expr; 
     } 
     return this.filter(function() { 
      data = $(this).data(); 
      for (var a in data) { 
       if (data.hasOwnProperty(a)) { 
        return reg.test(a); 
       } 
      } 
     }); 
    } 
}; 

JS Fiddle demo。

這可以被稱爲如下，使用文字正則表達式：

$('body, body *').hasAttrMatching(/^something/).css('color', 'red');

使用正則表達式的字符串表示：

$('body, body *').hasAttrMatching('^something').css('color', 'red');

這似乎有點明顯在這一點上提醒你，但如果沒有表達式被傳入（作爲正則表達式或字符串），則不進行過濾會發生，該插件將返回收到相同的元素，來說明：

$('body, body *').hasAttrMatching().css('color', 'red');

其中，你可以在鏈接的演示中看到由最初選擇匹配，顏色所有元素。

參考文獻：

• 普通的JavaScript：
  • JavaScript regular expressions。
  • Object.hasOwnProperty()。
  • test()。
  • typeof operator。
• 的jQuery：
  • css()。
  • filter()。

Answer 2

您不能選擇屬性，這樣一來，左手端需要一個完整的屬性，你只能使用$ =查詢其內容。僅供參考*不是必需的。

$('[data-something-random^=te]') 

您可以選擇這兩個屬性並添加在一起，如果你想：

$('[data-something-random]').add('[data-something-else]'); 

做你想做什麼是可能的，但我不認爲這是開箱即用支持的jQuery雖然的。更好的解決方案可能是向元素添加一個類或其他屬性並檢查它們。

jsFiddle

Answer 3

既然你不能選擇的數據屬性的名稱單獨（因爲它們是左側），一個可能的辦法在你的跨度進行邏輯分組的數據屬性添加name屬性，然後通過name屬性進行選擇。

HTML：

<span name=data-something-group data-something-random="test">span 1</span> 
<span name=data-nope data-nope="nope">span 2</span> 
<span name=data-something-group data-something-else="again">span 3</span> 

的jQuery：

$('[name^="data-something-group"]) 

Answer 4

試試這個：

// Get all the apan's that starts with data-something 
var $span = $('span').filter(function(index){ 
    var data = $(this).data(); 
    if (!$.isEmptyObject(data)) { 
     var result = false; 
     $.each(data, function (key, value) {    
      result = (key.search(/^something/) != -1); 
     }); 
     return result; 
    } 
    else return false; 
}); 

// Work with the two span's for above example 
$span.each(function() { 

    // Your code goes here... 
}) 

DEMO HERE

Answer 5

可以在jQuery的擴展選擇功能：

$.extend($.expr[":"], { 
    withAttrLike: function(elem, _, m) { 
     var attrs = elem.attributes, pattern = new RegExp(m[3]); 
     for (var i = 0; i < attrs.length; ++i) 
      if (pattern.test(attrs[i].name)) 
       return true; 
     return false; 
    } 
}); 

現在你可以這樣寫：

$("div:withAttrLike('^data-something')").hide(); 

的 「論據」，以新的選擇表達式是一個正則表達式;有些隱晦地說，這在選擇器的實現中可用爲m[3]（我認爲它是解析Sizzle內部的選擇器表達式的正則表達式的結果）。代碼實例化一個正則表達式並使用它來測試屬性名稱。