how to find id of array element from element text/value
Question
I have the following code. In the alert(text) line I get which elements are in the array. I need to figure out id of the span for that element. For example for the second element in the array, I need to figure out that the id for Yellow is "test4", so I can determine that the ids of the elements in the array are, test2, test4 and test6. I can't figure out how to get the span id from the text/value in the span.
<!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>
3 answers
solution1
0 2014-06-14 11:23:56
Your only real option is to first get a list of the spans, for instance from querySelectorAll , then loop through that list looking at the innerHTML of each to see which one(s) match.
For instance, you can get the list like this:
// Find all spans with `id` values starting with "test"
var list = document.querySelectorAll("span[id^=test]");
(There I'm using the "attribute starts with" selector, but if I were you I'd add a class to the spans and use that instead.)
Then loop through that list (inside your loop through the values in your array).
var listIndex;
for (listIndex = 0; listIndex < list.length; ++listIndex) {
if (text === list[listIndex].innerHTML) {
// it matches
}
}
So putting all that together:
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
}
}
}
}
Side note: If you look above, you'll notice I added var statements for i and text . Without them, you were falling prey to The Horror of Implicit Globals , which is best avoided.
solution2
0 ACCPTED 2014-06-14 11:28:49
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);
}
}
}
Fiddle: http://jsfiddle.net/4rZ5h/
This uses indexOf , so you'll need a shiv for IE<9 support
solution3
0 2014-06-14 11:40:45
You could go through each span to see if they are in your array, and if they are, alert their 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.