如何从元素文本/值中查找数组元素的 id答案

【问题标题】：how to find id of array element from element text/value如何从元素文本/值中查找数组元素的 id
【发布时间】：2014-06-14 11:20:33
【问题描述】：

我有以下代码。在 alert(text) 行中，我得到了数组中的元素。我需要找出该元素的跨度 id。例如对于数组中的第二个元素，我需要弄清楚 Yellow 的 id 是“test4”，因此我可以确定数组中元素的 id 是 test2、test4 和 test6。我不知道如何从跨度中的文本/值中获取跨度 ID。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    function doFunction(){
    var myArray = ["Green", "Yellow", "Brown"];
    for (i = 0; i < myArray.length; i++) { 
    text = myArray[i];
    alert(text);
    }
    }
    </script>
    <title></title>
  </head>
  <body>
    <span id="test1">Red</span><br>
    <span id="test2">Green</span><br>
    <span id="test3">Blue</span><br>
    <span id="test4">Yellow</span><br>
    <span id="test5">Orange</span><br>
    <span id="test6">Brown</span><br>
<button name="button" onclick="doFunction()">Click Me</button>    
  </body>
</html>

【问题讨论】：

虽然我已经在下面回答了您的字面问题，但我还是忍不住想，如果我们对您想要实现的目标有更广泛的了解，我们可以为您提供帮助找到更好的整体方法。
为什么要获取“黄色”颜色的id，为什么不把颜色作为id呢？

标签： javascript arrays element getelementbyid

【解决方案1】：

function doFunction(){
var myArray = ["Green", "Yellow", "Brown"];
var mySpans = document.getElementsByTagName("span");
for (var i = 0; i < mySpans.length; i++) { 
       if(myArray.indexOf(mySpans[i].innerHTML) > -1){
           alert(mySpans[i].id);
       }
   }
}

小提琴：http://jsfiddle.net/4rZ5h/

这使用indexOf，所以你需要一个 shiv 来支持 IE

【讨论】：

非常感谢您的帮助。尽管第一个响应也是答案，但我会将其标记为答案，因为 javascript 新手会收到带有 span id 的警报。

【解决方案2】：

您唯一真正的选择是首先获取跨度列表，例如来自querySelectorAll，然后遍历该列表查看每个跨度的innerHTML 以查看哪些匹配。

例如，您可以像这样获取列表：

// Find all spans with `id` values starting with "test"
var list = document.querySelectorAll("span[id^=test]");

（我使用的是“属性开头为”选择器，但如果我是你，我会在跨度中添加一个类并改用它。）

然后循环遍历该列表（在循环中遍历数组中的值）。

var listIndex;
for (listIndex = 0; listIndex < list.length; ++listIndex) {
    if (text === list[listIndex].innerHTML) {
        // it matches
    }
}

所以把所有这些放在一起：

function doFunction(){
    var myArray = ["Green", "Yellow", "Brown"];
    var list = document.querySelectorAll("span[id^=test]");
    var listIndex, text, i;
    for (i = 0; i < myArray.length; i++) { 
        text = myArray[i];
        for (listIndex = 0; listIndex < list.length; ++listIndex) {
            if (text === list[listIndex].innerHTML) {
                // this span matches
            }
        }
    }
}

旁注：如果您看上面，您会注意到我为i 和text 添加了var 语句。没有它们，您将成为The Horror of Implicit Globals 的牺牲品，最好避免。

【讨论】：

var el = document.getElementsByClassName('spanner').innerHTML; alert("el 是：" + el);
太棒了！非常感谢你！我非常感谢您的代码完美运行的细节和解释。我浪费了很多时间试图弄清楚这一点，我从你的代码中学到了。

【解决方案3】：

您可以遍历每个跨度以查看它们是否在您的数组中，如果是，请提醒他们的 ID。

function doFunction(){
    var myArray = ["Green", "Yellow", "Brown"];

    // All your spans
    var mySpans = document.getElementsByTagName('span');

    // Go through each of them
    for (var i = 0; i < mySpans.length; i++) {
        // See if the value is in the array
        var myIndex = myArray.indexOf(mySpans[i].innerHTML);
        // If they are
        if(myIndex!=-1){
           // Alert the text and the id
           alert(myArray[myIndex] + ' : ' + mySpans[i].getAttribute('id'));
        }
    }
}

JS Fiddle

【讨论】：