javascript Javascript获取<span>元素内的文本

Javascript get text inside a <span> element

提问by DiegoP.

I need to get the text that is inside a element.

我需要获取元素内的文本。

I can only grab the class of this element and NOT the ID.

我只能获取这个元素的类，而不是 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.

所以我需要一种方法来获取test.png，但是正如您所看到的，我只有元素的类而不是 ID。

Just notice also that we may have more <span class="fileName"></span>, so it could look like this

还要注意我们可能有更多<span class="fileName"></span>，所以它可能看起来像这样

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

在我们有更多的情况下，就像上面的例子一样，我需要获取所有的值，而不仅仅是一个，因为我需要使用 jQuery 将此值传递给另一个页面。因此它应该能够从该元素中获取一个或多个值。

Please help!

请帮忙！

And also I am not a javascript expert!

而且我也不是 javascript 专家！

回答by Shef

var filenames = $('.fileName').map(function(){
    return $(this).text();
}).get();

The array filenameswill 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.

该数组filenames将包含图像的所有名称。您可以将此数组传递给另一个 jQuery 函数，或者您喜欢的任何其他地方。

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, filenameswill contain the string test1.png,test2.png,test3.png,test4.png.

现在，filenames将包含字符串test1.png,test2.png,test3.png,test4.png。

回答by pimvdb

Use document.getElementsByClassName: http://jsfiddle.net/pCswS/.

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

（因为你没有用 jQuery 标记问题，我假设你必须用普通的 JavaScript 来做。）

回答by Rup

$('span.fileName').each(function() {
    var fileName = $(this).text();
    doSomethingWithFileName(fileName);
});

Here the span.fileNameselector 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.

在这里，span.fileName选择器返回所有具有类 fileName 的跨度，然后我们进行迭代，从每个跨度中读取文本。您可能想先找到一个容器元素，然后只在其中进行迭代，例如

var $container = $('#myFileNames');
$container.find('span.fileName').each( ... );

回答by Simeon

Here'smy 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);

回答by bevacqua

Use the following jQuery selector

使用以下 jQuery 选择器

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