以前缀

开头的所有元素的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

回答

相关问题