javascript - javascript按集合中的标题搜索节点并将其返回

我编写了一个函数，该函数接受一个HTMLcollection和一个文本，并对该集合进行迭代，以搜索具有该标题的节点。然后，它应该返回该节点。
问题在于，即使找到正确的节点，它也始终返回未定义状态：在代码中，您可以看到有一个console.log输出，如果当前节点具有该标题，则输出该信息。在控制台上，我可以看到一个“ true”，这是我期望的结果，但是循环并不会在那里停止，并且该函数不会返回任何内容。

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

我尝试使用更简单的函数，这些函数仅返回集合中的某些节点作为输入，并且它们可以正常工作。例如

function tt(coll){ return coll[7].children[0]}

提前致谢。

编辑

我编辑了代码以更正错误。现在代码可以正常工作了，但是选择答案的方法要好得多。

最佳答案

这是一种递归方法（demo 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;
    }
}

然后，您只需要传递一个函数，该函数将根据您设计的任何逻辑返回一个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')));