Javascript在<span>元素</span>中获取文本

时间:2011-07-11 13:24:54

标签: javascript jquery class

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

我只能抓住这个元素的类而不是ID。

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

所以我需要一种方法来获取test.png,但是如你所见,我只有元素的类而不是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专家!

5 个答案:

答案 0 :(得分:9)

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

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

You can test it here »

更新

由于您请求文件名是由逗号分隔的字符串,您可以这样做:

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

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

答案 1 :(得分:2)

使用document.getElementsByClassNamehttp://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。)

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:1)

Here's我的看法:

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

答案 4 :(得分:0)

使用以下jQuery选择器

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