如何从元素文本/值找到数组元素的id

how to find id of array element from element text/value

本文关键字：数组元素 id 元素 文本      更新时间：2023-09-26

我有以下代码。在alert(text)行中，我得到了数组中的元素。我需要算出这个元素张成的空间的id。例如，对于数组中的第二个元素，我需要弄清楚Yellow的id是"test4"，因此我可以确定数组中元素的id是test2、test4和test6。我不知道如何从span中的文本/值中获得span 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>

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<9

您唯一的实际选择是首先获得跨度列表，例如从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语句。如果没有它们，你就会落入的陷阱，这是最好避免的。

您可以遍历每个span，看看它们是否在您的数组中，如果是，则警告它们的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小提琴

相关文章：