CODEWITHSUNDEEP
javascriptjqueryclass
DiegoP.
DiegoP.

Reputation: 45757

Javascript get text inside a <span> element

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!

Upvotes: 7

Views: 19577

Answers (5)

Shef
Shef

Reputation: 45599

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.

You can test it here »

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.

Upvotes: 9

Simeon
Simeon

Reputation: 5579

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);

Upvotes: 1

Rup
Rup

Reputation: 34418

$('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( ... );

Upvotes: 2

bevacqua
bevacqua

Reputation: 48566

Use the following jQuery selector

$("span.fileName").html()

Upvotes: 0

pimvdb
pimvdb

Reputation: 154968

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.)

Upvotes: 2

Related Questions