Javascript get text inside a <span> element
Solution 1
var filenames = $('.fileName').map(function(){
return $(this).text();
}).get();
The array filenames
will contain all the names of the images. You can pass on this array to another jQuery function, or anywhere else you like to do so.
Update
Since you request the filenames to be a string separated by a comma, you can do it like this:
var filenames = $('.fileName').map(function(){
return $(this).text();
}).get().join(',');
Now, filenames
will contain the string test1.png,test2.png,test3.png,test4.png
.
Solution 2
Use document.getElementsByClassName
: http://jsfiddle.net/pCswS/.
var elems = document.getElementsByClassName("fileName");
var arr = [];
for(var i = 0; i < elems.length; i++) {
arr.push(elems[i].innerHTML);
}
alert(arr);
(Since you didn't tag the question with jQuery I assume you have to do it with plain JavaScript.)
Solution 3
$('span.fileName').each(function() {
var fileName = $(this).text();
doSomethingWithFileName(fileName);
});
Here the span.fileName
selector returns all spans with class fileName then we iterate through, reading the text from each one. You may want to find a container element first and then only iterate inside that, e.g.
var $container = $('#myFileNames');
$container.find('span.fileName').each( ... );
Solution 4
Here's my take:
var spans = document.getElementsByClassName('fileName');
var values = [];
for(var i = 0; i < spans.length; i++) {
values.push(spans[i].innerHTML);
}
// Example of processing: alert the values
alert(values);
DiegoP.
Updated on June 13, 2022Comments
-
DiegoP. almost 2 years
I need to get the text that is inside a element.
I can only grab the class of this element and NOT the ID.
<span class="fileName">test.png</span>
So I need a way to get
test.png
, but as you see I have only the class of the element and not the ID.Just notice also that we may have more
<span class="fileName"></span>
, so it could look like this<span class="fileName">test1.png</span> <span class="fileName">test2.png</span> <span class="fileName">test3.png</span> <span class="fileName">test4.png</span>
In the case we have more, like the example above, I need to get ALL the values and not only one, because I need to pass this value to another page with jQuery. So it should be able to get one value or more from that element.
Please help!
And also I am not a javascript expert!
-
Rup almost 13 years@AndyL always the way - sorry. Actually I misread that he wants all the values in an array: Shef's answer is better.
-
DiegoP. almost 13 yearsit just returns one value and not All
-
DiegoP. almost 13 yearsIt returns an array..How do I get the plain values and not the Array. Is there a way to get the values of this array?
-
DiegoP. almost 13 yearsok but how do I get the real names. Now I just get the word : Array
-
DiegoP. almost 13 yearsSame as above, it returns the word: Array. But how do I get the real names?
-
Shef almost 13 years
filenames.toString()
, will do just fine if you want the seperator to be a comma,
. Otherwise, you can usefilenames.join('yourSeparatorHere')
. Once you have the array, you can do anything you like with it. :) -
pimvdb almost 13 years@DiegoP: It does work for me - otherwise change it into
alert(arr.join())
, which converts it into a string (with commas between the elements). -
DiegoP. almost 13 yearsCan you include it in the code above? As I said I am not a javascript expert. It does not have any sense for me. I just want to get in the var filenames the name of each file separated by comma, nothing more =(