Kısmi özniteliğe dayalı HTML bul

Question

adının kısmi özniteliğine dayalı bir öğe bulmak için javascript (özellikle jQuery) ile bir yol var mı?

ben bu bağlantıların başvurulan kısmi nitelik değerleri bulmak seçicileri herhangi aramıyorum:

• starts with [adı^= "değer"]
• contains prefix [ad | = "değer" ]
• contains [ad * = "değer"]
• contains word [isim ~ = "değer"]
• ends with [ad $ = "değer"]
• equals [name = "değer"]
• not equal [isim! = "Değer"]
• starts with [adı^= "değer"]
  çizgisinde

ama daha bir şey f

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

ve

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

"data-api" ile başlayan bir özelliğe sahip herhangi bir öğeyi indeksleyin.

$.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; 
} 

gibi kullanılabilir için::

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

Ve herhangi elemanları maç olacak aradığınız, ama sadece bu yazma birkaç dakika geçirdi şeyin ne

Answer 1

emin değil data-api-* gibi veri niteliğini genişletebilir ve daha fazla seçenek vb. içerecek şekilde genişletebilir ve değiştirebilirsiniz, ancak şu anda yalnızca veri niteliklerini arar ve yalnızca 'başlar' ile eşleşir, ancak en azından kullanımı basit midir?

FIDDLE

Answer 2

Bu data-api-* özelliklere sahiptir olanlara adayları sınırlamak için .filter() kullanır. Muhtemelen en verimli yaklaşım değil, ancak önce ilgili bir seçici ile aramayı daraltabiliyorsanız kullanılabilir.

$("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'); 

Demo: http://jsfiddle.net/r3yPZ/2/

---

Bu aynı zamanda bir seçici olarak yazılabilir. İşte benim acemi denemesi:

$.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; 
}; 

Kullanımı:

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

Demo: http://jsfiddle.net/SuSpe/3/

Bu selektör jQuery öncesi 1.8 sürümleri için çalışması gerekir. 1 için.8 ve ötesi, some changes may be required. İşte 1.8 uyumlu sürümü bir girişim var:

$.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; 
    }; 
}); 

Demo: http://jsfiddle.net/SuSpe/2/ daha genel bir çözüm için

---

, burada regex desen alır ve bu modelle eşleşen özelliklere sahip elemanlar seçen bir seçici var : sizin Örneğin

$.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; 
    }; 
}); 

, böyle bir şey çalışması gerekir:

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

Demo: http://jsfiddle.net/Jg5qH/1/