आंशिक विशेषता

Question

पर आधारित HTML खोजें आंशिक विशेषता नाम पर आधारित तत्व खोजने के लिए जावास्क्रिप्ट (विशेष रूप से jQuery) के साथ कोई तरीका है?

मैं चयनकर्ताओं कि आंशिक विशेषता मान को खोजने के रूप में इन कड़ियों में संदर्भित में से किसी की तलाश नहीं कर रहा हूँ:

• starts with [नाम^= "का मान"]
• contains prefix [नाम | = "का मान" ]
• contains [नाम * = "मूल्य"]
• contains word [नाम ~ = "मूल्य"]
• ends with [नाम $ = "का मान"]
• equals [नाम = "मूल्य"]
• not equal [नाम! = "का मान"]
• starts with [नाम^= "का मान"]
  की तर्ज पर

लेकिन अधिक कुछ

<div data-api-src="some value"></div> 
<div data-api-myattr="foobar"></div> 

और

$("[^data-api]").doSomething() 

च को

कोई भी तत्व जिसमें एक विशेषता है जो "डेटा-एपीआई" से शुरू होती है।

Answer 1

सुनिश्चित नहीं हैं कि यह क्या है आप देख रहे हैं, लेकिन सिर्फ इस लेखन के लिए कुछ मिनट खर्च:

$.fn.filterData = function(set) { 
    var elems=$([]); 
    this.each(function(i,e) { 
     $.each($(e).data(), function(j,f) { 
      if (j.substring(0, set.length) == set) { 
       elems = elems.add($(e)); 
      } 
     }); 
    }); 
    return elems; 
} 

की तरह इस्तेमाल किया जा करने के लिए:

$('div').filterData('api').css('color', 'red'); 

और एक साथ किसी भी तत्व से मेल खाएगी data-api-* जैसे डेटा विशेषता, और आप इसे और विकल्प आदि शामिल करने के लिए विस्तार और संशोधित कर सकते हैं, लेकिन अभी यह केवल डेटा विशेषताओं की खोज करता है, और केवल 'साथ शुरू होता है' मिलान करता है, लेकिन कम से कम इसका उपयोग करना आसान है?

FIDDLE

Answer 2

यह .filter() का उपयोग करता है उन data-api-* गुण होते हैं कि करने के लिए उम्मीदवारों को सीमित करने के। शायद सबसे कुशल दृष्टिकोण नहीं, लेकिन उपयोग करने योग्य यदि आप पहले प्रासंगिक चयनकर्ता के साथ खोज को सीमित कर सकते हैं।

$("div").filter(function() { 
    var attrs = this.attributes; 
    for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;  
    }; 
    return false; 
}).css('color', 'red'); 

डेमो: http://jsfiddle.net/r3yPZ/2/

---

यह भी एक चयनकर्ता के रूप में लिखा जा सकता है। यहाँ मेरी नौसिखिया प्रयास है:

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) { 
    for (var i = 0; i < obj.attributes.length; i++) { 
     if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true; 
    }; 
    return false; 
}; 

उपयोग:

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red'); 

डेमो: http://jsfiddle.net/SuSpe/3/

इस चयनकर्ता jQuery के पूर्व 1.8 संस्करण के लिए काम करना चाहिए। 1 के लिए।8 और उससे आगे, some changes may be required। यहाँ एक 1.8-संगत संस्करण पर एक प्रयास है:

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) { 
    return function(obj) { 
     for (var i = 0; i < obj.attributes.length; i++) { 
      if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true; 
     }; 
     return false; 
    }; 
}); 

डेमो: http://jsfiddle.net/SuSpe/2/

---

एक अधिक सामान्य समाधान के लिए, यहाँ एक चयनकर्ता कि एक regex पैटर्न लेता है और विशेषताओं को उस पैटर्न से मेल के साथ तत्वों का चयन करता है :

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) { 
    var re = new RegExp(regex); 
    return function(obj) { 
     var attrs = obj.attributes 
     for (var i = 0; i < attrs.length; i++) { 
      if (re.test(attrs[i].nodeName)) return true; 
     }; 
     return false; 
    }; 
}); 

अपने उदाहरण के लिए, कुछ इस तरह काम करना चाहिए:

$('div:hasAttr(^data-api-.+$)').css('color', 'red'); 

डेमो: http://jsfiddle.net/Jg5qH/1/