javascript - 需要帮助在 Javascript 中查找/遍历 dom

Question

我敢肯定这是一个多余的问题，但我已经找了一个小时左右，却空手而归，所以希望有人能提供帮助...

寻找一种方法来使用 JS(不是 jquery)在搜索“Chicken”(或任何值)时返回下面 li 的类。

<li class='113252'>
    <span>Chicken</span>
</li>

因此希望 javascript 在给定 span 值(在本例中为 Chicken)时返回 li 类。

谢谢!

Answer 1

试试这个:

var spanArray = document.getElementsByTagName('span');

for (var i=0; i<spanArray.length; i++) {
    if(spanArray[i].innerHTML.toUpperCase() === 'CHICKEN')
    {
        alert(spanArray[i].parentNode.className);
        break;
    }
}

现在，我更熟悉 jQuery，但似乎在此处链接的 fiddle 中工作:http://jsfiddle.net/FranWahl/fCzYc/2/ (已更新以包含建议的 break; 比赛后)

您可以为 parentNode 添加更多类型检查以确保它是一个 li 等等，但这应该让您入门。

此外，我完全不确定这在大文档中的效率如何。

编辑
阅读了一些评论后，我更新了上面的代码以包含 ajax333221 建议的中断.

Dennis提到最好在 ul 上调用 getElementByTagName。假设你可以有一个没有 ul 的 li 我把它作为单独的代码添加在这里，因为我不确定 OP 是否有 ul 标签。

代码查询每个 ul (jsFiddle here )

var ulArray = document.getElementsByTagName('ul');
var parentFound = false;

for (var i = 0; i < ulArray.length; i++) {
    var spanArray = ulArray[i].getElementsByTagName('span');

    for (var i = 0; i < spanArray.length; i++) {
        if (spanArray[i].innerHTML.toUpperCase() === 'CHICKEN') {
            alert(spanArray[i].parentNode.className);
            parentFound = true;
            break;
        }
    }

    if(parentFound)
    {
        break;
    }
}​