以子串开头的行
问题描述:
我正试图找到所有具有以'。'开头的id
的行。和一些信件。当我用这个字符串调用getElementsByIdStartsWith时,即使我可以看到(并检查)它们,也不会返回任何行。以子串开头的行
我的错误在哪里?
getElementsByIdStartsWith: function (optionSymbolRoot) {
var idArr = [];
var trs = document.getElementById("tr");
for(var i=0; i<trs.length; i++)
{
var s = trs[i].id;
if(true == s.startsWith(optionSymbolRoot))
idArr.push(trs[i]);
}
return idArr;
},
ToggleRow : function(rootId) {
var s = ".";
var dottedSymbol = s.concat(rootId);
//process.stdout.write(dottedSymbol);
var rows = this.getElementsByIdStartsWith(dottedSymbol);
rows.forEach(function(row)
{
if (row.style.display == "") {
row.style.display = "none";
}
else {
row.style.display = "";
}
});
},
答
功能getDocumentById
只会给一个项目,作为ids
应该是唯一的。如果你想得到这种行为,我建议使用类而不是id或上面的评论中所述的getElementByTagName
。
答
您也可以使用querySelectorAll功能
document.querySelectorAll('#id');
// This will return a NodeList with all elements that match the criteria.
function (optionSymbolRoot) {
var idArr = [];
var trs = document.querySelectorAll("tr");
for(var i=0; i<trs.length; i++)
{
var s = trs[i].className;
if(true == s.startsWith(optionSymbolRoot))
idArr.push(trs[i]);
}
return idArr;
}
答
document.getElementById
获取具有指定id属性的单个元素。要获取页面上所有的<tr>
标签,您可以使用getElementsByTagName
或querySelectorAll
。
var rows = document.getElementsByTagName('tr');
//OR
var rows = document.querySelectorAll('tr');
第二种方法是更灵活,因为它接受任何有效CSS选择,包括标签名称,.classes
和#ids
,但有点慢。
答
你可以选择与querySelectorAll
和CSS3 attribute selector:attr^="str"
document.querySelectorAll('tr[id^="str"]')
的NodeList
将需要转换为Array
function rowsIdStartsWith(optionSymbolRoot){
var selector = 'tr[id^="' + optionSymbolRoot + '"]'
var selected = document.querySelectorAll(selector)
return [].slice.call(selected)
}
对于初学者 “开头”, 'document.getElementById'返回一个具有指定id的单个元素。您可能正在寻找['getElementsByTagName'](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName) – Hamms
您确定它是'getElementbyById'而不是'getElementsByTagName'吗? –
'row.style.display'可以有多个值,所以在切换时像':'这样更好地测试'row.style.display = row.style.display =='none'? '':'none''。 – RobG