jQueryのデータは、私は次のセットアップを持つ2つの要素を持っている共通キーワード

Question

と属性を選択します。

は現在、このように行われているので、

_.each($('[data-placeholder-class], [data-placeholder-template]'), function cb(element) { 
    // code goes here 
}) 

この場合、プレースホルダには、私は、共通のキーワードを含むすべての属性を選択することができます方法があった場合、私は疑問に思いを介して各データがループに属性を定義するのではなく。例えば

_.each($('[data-placeholder-*]'), function cb(element) { 
    // code goes here 
}) 

これはまったく可能ですか？私は、これはあなたを助けることを願っています:)

Answer 1

var eles = $('span').filter(function() { 
    for (var attrName in $(this).data()) { 
    if (attrName.indexOf('placeholder') == 0) { 
     return true; 
    } 
    } 

    return false; 
}); 

console.log(eles); 

Answer 2

あなたは要素.attributes.nameした文字列

変数

var spans = document.querySelectorAll("span"); 
 

 
function filterAttrs(elems, attr, matches = []) { 
 
    for (var elem of elems) { 
 
    for (var attrs of elem.attributes) { 
 
     // alternatively use `.indexOf()` or `RegExp()` 
 
     // to match parts of string of `.name` or `.value` 
 
     // of `.attributes` `NamedNodeMap` 
 
     if (attrs.name.slice(0, attr.length) === attr) { 
 
     matches.push({ 
 
      "element": elem, 
 
      "attr": { 
 
      "name": attrs.name, 
 
      "value": attrs.value 
 
      } 
 
     }) 
 
     } 
 
    } 
 
    } 
 
    return matches 
 
} 
 

 
var matches = filterAttrs(spans, "data-placeholder"); 
 

 
console.log(matches); 
 

 
matches.forEach(function(match) { 
 
    match.element.textContent = "matches:" + JSON.stringify(match.attr); 
 
    match.element.style.color = "green"; 
 
});

<span data-placeholder-class="test-class"></span> 
 
<span data-placeholder-template="/some/template.hbs"></span> 
 
<span data-not-placeholder-template="/some/template.hbs"> 
 
data-not-placeholder-template 
 
</span> 
 
<span data-not-placeholder-template="/some/template.hbs"> 
 
data-not-placeholder-template 
 
</span>

と一致した場合、配列に要素をプッシュし、要素のコレクションの attributesを繰り返すことができ

Answer 3

あなたを作成する別の機能セレクタを完全に入力する必要はありません（しかし、もちろん関数を書く必要があります）。

e.q：

function getSelector() { 
    return Array.prototype.map.call(arguments, function(key) { 
     return '[data-placeholder-' + key + ']'; 
    }).join(','); 
} 

これは、ご希望のセレクタを返し、1つの... N引数で動作します。

getSelector('class', 'template') 
// returns "[data-placeholder-template],[data-placeholder-class]" 

_.each($(getSelector('class', 'template')), function cb(element) { 
    // code goes here 
}); 

Answer 4

SAMPLEのHTML：

<span data-placeholder-class="test-class">test</span> 
<span data-placeholder-template="/some/template.hbs">hahaha</span> 
<span>hahahahaha</span> 
<span data-test="/some/template.hbs">hahahahaha</span> 

JS：

$('span').filter(function(ndx, item){ 
    var data = Object.keys($(item).data())[0]; // gets data name 
    if (data === undefined) { 
     return; 
    } 
    // checks if data starts with placeholder 
    if (~(data.indexOf('placeholder'))) { 
     // do anything to that item here 
     return item; 
    } 
}).css('color', 'green'); 

フィドル：このことができますhere

願っています！ :)

Answer 5

私は、これはjqueryの質問ですけど、、XPathクエリのおかげでそれをやってのバニラ方法があります：

starts-with() XPath関数は、まさにそれを行います。

クエリ//*[@*[starts-with(name(), 'data-placeholder')]]はあなたの後のものを提供します。開封された

：の

'//' + // from root to anywhere in the tree 
    '*' + // any kind of node 
    '[@*' + // with any attribute 
     '[starts-with(name(), "data-placeholder")]' + // which starts with "data-" 
      ']' 

function getElementsByStartOfAttribute(start_of_attr) { 
 
    var query = document.evaluate("//*[@*[starts-with(name(), '" + start_of_attr + "')]]", 
 
    document, null, XPathResult.ANY_TYPE, null); 
 
    var elements = []; 
 
    var el; 
 
    while (el = query.iterateNext()) { 
 
    elements.push(el); 
 
    } 
 
    return elements; 
 
} 
 

 
var placehodlers = getElementsByStartOfAttribute('data-placeholder'); 
 
console.log(placehodlers); 
 
$(placehodlers).css('background', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-placeholder-class="test-class">should find me</span> 
 
<span data-placeholder-template="/some/template.hbs">me too</span> 
 
<span data-not-placeholder-template="/some/template.hbs"> 
 
data-not-placeholder-template 
 
</span> 
 
<span data-not-placeholder-template="/some/template.hbs"> 
 
data-not-placeholder-template 
 
</span>