Javascript 獲取<span>元素</span>內的文本

Question

我需要獲取元素內的文本。

我只能獲取此元素的 class 而不是 ID。

<span class="fileName">test.png</span>

所以我需要一種方法來獲取test.png ，但正如你所見，我只有元素的 class 而不是 ID。

請注意，我們可能有更多<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>

在我們有更多的情況下，如上面的示例，我需要獲取所有值，而不僅僅是一個，因為我需要使用 jQuery 將此值傳遞到另一個頁面。 所以它應該能夠從那個元素中獲得一個或多個值。

請幫忙！

而且我也不是 javascript 專家！

Answer 1

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

數組filenames名將包含圖像的所有名稱。 您可以將此數組傳遞給另一個 jQuery function，或者您喜歡這樣做的任何其他地方。

您可以在這里測試 »

更新

由於您要求文件名是用逗號分隔的字符串，因此您可以這樣做：

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

現在， filenames名將包含字符串test1.png,test2.png,test3.png,test4.png 。

Answer 2

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

（由於您沒有使用 jQuery 標記問題，我假設您必須使用普通的 JavaScript 來完成。）

Answer 3

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

這里span.fileName選擇器返回所有帶有 class 文件名的跨度，然后我們遍歷，從每個跨度讀取文本。 您可能想先找到一個容器元素，然后只在其中迭代，例如

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

Answer 4

這是我的看法：

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

Answer 5

使用以下 jQuery 選擇器

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