javascript 在 collection 和 return 中按标题搜索节点
javascript search node by title in collection and return it
我编写了一个函数,它接受一个 HTMLcollection 和一个文本并迭代 collection 搜索具有该标题的节点。那么它应该return那个节点。
问题是它总是 returning 未定义,即使它找到了正确的节点:在代码中,您可以看到如果当前节点具有该标题,则输出 console.log。在控制台上,我可以看到一个 "true",这正是我所期望的,但是循环并没有就此停止,而且函数也没有 return 任何东西。
function searchButtonbyText(group,text){
for(var i=0;i<group.length;i++){
for(var j=0; j< group[i].children.length; j++){
var child = group[i].children[j];
console.log(child.title == text );
if( child.title == text ){
console.log(child);
return child;
}
}
}
}
我尝试使用更简单的函数,这些函数仅 return 某些节点以 collection 作为输入并且它们工作正常。例如
function tt(coll){ return coll[7].children[0]}
提前致谢。
编辑
我编辑了代码以更正错误。现在代码可以正常工作,但所选答案的方法要好得多。
这是一个递归的方法(演示enter link description here)
function searchButtonByText(element, text) {
var match;
if(element['title'] && element['title'] === text) {
return element;
} else {
for(var i = 0; i < element.children.length; i++) {
match = searchButtonByText(element.children[i], text);
if(match) {
break;
}
}
return match;
}
}
具有以下HTML:
<ul id='Group'>
<li><button title='One'>One</button></li>
<li><button title='Two'>Two</button></li>
<li>
<ul>
<li><button title='A'>A</button></li>
<li><button title='B'>B</button></li>
<li><button title='C'>C</button></li>
</ul>
</li>
<li><button title='Three'>Three</button></li>
</ul>
然后你可以这样调用它:
console.log(searchButtonByText(document.getElementById('Group'), 'Two'));
它从任意节点开始,然后查看每个子节点直到找到匹配项(无论它们嵌套的程度如何)。或者您可以进一步概括这一点,并使测试成为这样的回调 (demo):
function searchByFunction(element, matcher) {
var match;
if (matcher(element)) {
return element;
} else {
for (var i = 0; i < element.children.length; i++) {
match = searchByFunction(element.children[i], matcher);
if (match) {
break;
}
}
return match;
}
}
然后你只需要传递一个函数,returns 一个基于你设计的任何逻辑的 true 或 false 值:
console.log(searchByFunction(document.getElementById('Group'), function(element) {
return element['title'] && element['title'] === 'C';
}));
最后,为了解决处理元素数组(每个元素都可能有子元素)的需求,这里有一个可行的解决方案 (demo):
function searchByFunction(element, matcher) {
var match,
i;
if(element.length) {
for (i = 0; i < element.length; i++) {
match = searchByFunction(element[i], matcher);
if (match) {
break;
}
}
} else {
if (matcher(element)) {
return element;
} else {
if(element.children) {
for (i = 0; i < element.children.length; i++) {
match = searchByFunction(element.children[i], matcher);
if (match) {
break;
}
}
}
}
}
return match;
};
连同生成匹配函数的辅助函数:
function buildTitleMatcher(title) {
return function(element) {
return element['title'] && element['title'] === title;
};
};
您可以像这样将它与单个元素一起使用:
console.log(searchByFunction(document.getElementById('Group'), buildTitleMatcher('C')));
或者像这样的元素数组:
console.log(searchByFunction(document.getElementsByTagName('li'), buildTitleMatcher('B')));
我编写了一个函数,它接受一个 HTMLcollection 和一个文本并迭代 collection 搜索具有该标题的节点。那么它应该return那个节点。 问题是它总是 returning 未定义,即使它找到了正确的节点:在代码中,您可以看到如果当前节点具有该标题,则输出 console.log。在控制台上,我可以看到一个 "true",这正是我所期望的,但是循环并没有就此停止,而且函数也没有 return 任何东西。
function searchButtonbyText(group,text){
for(var i=0;i<group.length;i++){
for(var j=0; j< group[i].children.length; j++){
var child = group[i].children[j];
console.log(child.title == text );
if( child.title == text ){
console.log(child);
return child;
}
}
}
}
我尝试使用更简单的函数,这些函数仅 return 某些节点以 collection 作为输入并且它们工作正常。例如
function tt(coll){ return coll[7].children[0]}
提前致谢。
编辑
我编辑了代码以更正错误。现在代码可以正常工作,但所选答案的方法要好得多。
这是一个递归的方法(演示enter link description here)
function searchButtonByText(element, text) {
var match;
if(element['title'] && element['title'] === text) {
return element;
} else {
for(var i = 0; i < element.children.length; i++) {
match = searchButtonByText(element.children[i], text);
if(match) {
break;
}
}
return match;
}
}
具有以下HTML:
<ul id='Group'>
<li><button title='One'>One</button></li>
<li><button title='Two'>Two</button></li>
<li>
<ul>
<li><button title='A'>A</button></li>
<li><button title='B'>B</button></li>
<li><button title='C'>C</button></li>
</ul>
</li>
<li><button title='Three'>Three</button></li>
</ul>
然后你可以这样调用它:
console.log(searchButtonByText(document.getElementById('Group'), 'Two'));
它从任意节点开始,然后查看每个子节点直到找到匹配项(无论它们嵌套的程度如何)。或者您可以进一步概括这一点,并使测试成为这样的回调 (demo):
function searchByFunction(element, matcher) {
var match;
if (matcher(element)) {
return element;
} else {
for (var i = 0; i < element.children.length; i++) {
match = searchByFunction(element.children[i], matcher);
if (match) {
break;
}
}
return match;
}
}
然后你只需要传递一个函数,returns 一个基于你设计的任何逻辑的 true 或 false 值:
console.log(searchByFunction(document.getElementById('Group'), function(element) {
return element['title'] && element['title'] === 'C';
}));
最后,为了解决处理元素数组(每个元素都可能有子元素)的需求,这里有一个可行的解决方案 (demo):
function searchByFunction(element, matcher) {
var match,
i;
if(element.length) {
for (i = 0; i < element.length; i++) {
match = searchByFunction(element[i], matcher);
if (match) {
break;
}
}
} else {
if (matcher(element)) {
return element;
} else {
if(element.children) {
for (i = 0; i < element.children.length; i++) {
match = searchByFunction(element.children[i], matcher);
if (match) {
break;
}
}
}
}
}
return match;
};
连同生成匹配函数的辅助函数:
function buildTitleMatcher(title) {
return function(element) {
return element['title'] && element['title'] === title;
};
};
您可以像这样将它与单个元素一起使用:
console.log(searchByFunction(document.getElementById('Group'), buildTitleMatcher('C')));
或者像这样的元素数组:
console.log(searchByFunction(document.getElementsByTagName('li'), buildTitleMatcher('B')));