CSS-Selektor für alle Elemente beginnend mit einem Präfix

Question

Ich habe mehrere Polymerelemente.

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

Ich möchte in der Lage sein, alle Elemente abfragen, die mit „PS-“ beginnen entweder mit einem CSS-Selektor oder JavaScript.

Ich schlug die folgende Lösung auf, aber ich frage mich, ob es etwas effizienteres gibt?

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

Diese Lösung scheint sehr ineffizient zu sein.

Answer 1

Ich bin jede Elementselektoreinrichtung nicht bekannt, aber es ist möglich, mit CSS3 Attribute und Klassenstring-Anpassungs Wähler (die in IE7 + unterstützt werden):

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

Nicht sicher, ob dies ist, was Sie wollen , aber wahrscheinlich gibt Ihnen eine andere Möglichkeit, das gleiche zu erreichen.

Answer 2

prüfen diese 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

geben Sie einfach eine Klasse für alle Elemente, die gemeinsam in der Natur. und zu tun:

HTML

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

CSS

// 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

Sie so etwas wie dieses verwenden können statt 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]); 
    } 
    } 

}