接頭辞で始まるすべての要素のCSSセレクタ

Question

私はいくつかのポリマー成分を持っています。

<ps-el-one/> 
<ps-el-two/> 
<ps-el-three/> 
<ps-el-four/> 

「ps-」で始まるすべての要素をCSSセレクタまたはjavaScriptで照会できるようにしたいと考えています。

私は以下の解決策を取り上げましたが、もっと効率的なものがあるのでしょうか？

var allElementsOnPage = document.querySelectorAll('*'); 
var res = []; 
for (var index in allElementsOnPage) { 
    var el = allElementsOnPage[index]; 
    if (el && el.tagName && el.tagName.substr(0, 3) == 'PS-') { 
    res.push(el); 
    } 
} 

このソリューションは非常に非効率的です。

Answer 1

私は任意の要素セレクタを認識していないんだけど、それは（IE7 +でサポートされている）CSS3の属性とクラスのサブストリングマッチングセレクタで可能である：これはあなたが望むものである場合

[class^="tocolor-"], [attr*=" tocolor-"] { 
    color:red 
} 

わかりませんおそらく、同じことを達成する別の方法を提供します。

Answer 2

チェックこのhere

<input name="man-news"> 
<input name="milkman"> 
<input name="letterman2"> 
<input name="newmilk"> 

<script> 
$("input[name*='man']").val("has man in it!"); 
</script> 

Answer 3

ただ、自然の中で共通するすべての要素にクラスを与えます。そして、実行します。

HTML

// for all elements together 
.ps { /* css for all elements together */ }  

// for individual elements 
.ps:nth-of-type(1) { /* css for 1st ele */ } 
.ps:nth-of-type(2) { /* css for 2nd ele */ } 
.ps:nth-of-type(3) { /* css for 3rd ele */ } 
.ps:nth-of-type(4) { /* css for 4th ele */ } 

JSが

// for all elements together 
var ps = document.querySelectorAll('.ps'); 

// for individual elements 
var ps1 = document.querySelectorAll('.ps')[0]; 
var ps2 = document.querySelectorAll('.ps')[1]; 
var ps3 = document.querySelectorAll('.ps')[2]; 
var ps4 = document.querySelectorAll('.ps')[3]; 

Answer 4

あなたの代わりにこのようなものを使用することができます

<ps-el-one class="ps"/> 
<ps-el-two class="ps"/> 
<ps-el-three class="ps"/> 
<ps-el-four class="ps"/> 

CSS querySelectorAll

function myFunction() { 
    var x = document.getElementsByTagName("*"); 
    var res = []; 
    for(var i = 0; i < x.length; i++) { 

    if(x[i].tagName.indexOf('PS-') == 0) { 

     res.push(x[i]); 
    } 
    } 

}