以前綴

開頭的所有元素的CSS選擇器我有幾個聚合物元素。以前綴

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

該解決方案看起來效率很低。

來源

2016-11-30 user508771

這可能對你有幫助https://www.polymer-project.org/1.0/docs/devguide/styling – Geeky

所有4名的白名單，以及每個循環明顯，將是更比完整文檔迭代更高效 – dandavis

我不知道任何元素選擇，但它是可能的CSS3屬性和階級串匹配的選擇（這是在IE7 +支持）：

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

不知道這是否是你想要的，但可能會給你另一種實現相同的方式。

來源

2016-11-30 21:11:43 Yaser

入住這here

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

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

來源

2016-11-30 21:30:24

只要給一類在自然界中常見的所有元素。做：

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

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

來源

2016-11-30 21:31:30

如果您要授課，您可以使用子字符串類選擇器，而不是逐個選擇它們 – Yaser

@YaserAdelMehraban。沒有！你是否看到首先使元素名稱不同的任何一點，然後使類名稱不同，然後使用複雜的子字符串函數來獲取它們。聚合物的要求是不同組件的標籤名稱不同。如果你給我-1，那麼請刪除它。也許你誤解了我。 –

您可以使用這樣的事情，而不是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]); 
    } 
    } 

}

來源

2016-11-30 21:47:10 Ajaykumar

回答

相關問題