我有以下代码。在警报(文本)行中,我得到了数组中的元素。我需要弄清楚该元素的范围的id。例如,对于数组中的第二个元素,我需要弄清楚黄色的id是" test4",所以我可以确定数组中元素的id是test2,test4和test6 。我无法弄清楚如何从span中的text / value中获取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>
答案 0 :(得分:0)
你唯一真正的选择是先获取一个跨度列表,例如从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
}
}
}
}
旁注:如果你看上面的话,你会注意到我为var
和i
添加了text
个语句。如果没有它们,你就会成为The Horror of Implicit Globals的牺牲品,这是最好的避免。
答案 1 :(得分:0)
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,所以你需要一个适用于IE&lt; 9支持的shiv
答案 2 :(得分:0)
您可以浏览每个范围以查看它们是否在您的阵列中,如果是,则提醒其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'));
}
}
}