2

我有一个 javascript 数组，它被硬编码到我的 javascript 文件中：

var avatar_layers = new Array('background', 'body', 'hair', 'shirt', 'arms', 'legs', 'feet', 'weapon')

由于它是硬编码的，因此很难在不同的 HTML 文件之间使用它。

我想更改它，以便 javascript 将在页面上查找所有具有标题类的 h3 标签，并使用这些标签的内容来创建数组。

我怎样才能做到这一点？

在阅读之后，我发现我应该使用以下内容

document.getElementsByTagName("h3.title")[0];

这将获得所有 h3.titles。但是，我不确定如何将收集到的数据输出为数组。

我真的很感激任何指示。谢谢！

更新：我不能使用 Jquery，它必须是普通的 java 脚本

你可以在这里看到我的代码：http: //jsfiddle.net/zk5Hn/2/

4

7 回答 7

3 
​var array = [];

(function(){
    var elements = document.getElementsByTagName("h3");
    for (var i = 0; i < elements.length; i++) {
        array.push(elements[i].innerText);
    }
})();

​alert(array);​

试试看。

http://jsfiddle.net/Jsckt/

或者，您可以使用 jquery：

$(function(){
    var array = [];

    $("h3.title").each(function() {
        array.push(this.innerText);
    });

    alert(array);
}​;​

http://jsfiddle.net/Jsckt/2/

5年后编辑：

  1. 出于性能和期望的原因，这些天应该避免使用 innerText
  2. 您现在可以将 DOM 节点列表分解为数组

从 2018 年开始，您可以使用 up2date 解决方案：

const headings = [...document.querySelectorAll("h3.title")].map(node => node.textContent);
alert(headings);
于 2012-09-25T14:11:58.180 回答
2

不，document.getElementsByTagName不会应用类选择器，您需要使用document.querySelectorAll它（并且因为 IE 等旧版浏览器不支持它，您可能需要使用选择器库或其他一些解决方法）。

然后，你得到了一个NodeList已经像一个元素数组的背部。遍历它并将每个元素的内容添加到您的数组中：

var headingEls = document.querySelectorAll("h3.title");
var avatar_layers = []; // empty array literal
for (var i=0; i<headingEls.length; i++)
    avatar_layers.push(headingEls[i].textContent);

不要忘记在加载 DOM 之前您可以访问元素，您需要在domready事件上执行该片段；你不能立即使用数组。

于 2012-09-25T14:07:01.673 回答
2

就像是：

var titles = document.querySelectorAll('.title'),
    avatar_layers = [];
for( var i=0; i<titles.length; i++ ) {
    avatar_layers.push( titles[i].innerHTML );
}

它将创建一个新的空数组。然后查看所有具有该类的元素.title并提取它的 HTML 内容。然后将此内容推送到数组中。

使用 jQuery 会很简单：

var avatar_layers = $('.title').map(function(){
    return $(this).html();
});

这是你想要的吗？

请注意，querySelectorAllIE7 不支持此功能，因此如果您需要对这些浏览器的支持，则需要 jQuery 之类的库或其他一些解决方法。

于 2012-09-25T14:12:22.827 回答
1 
var h3s = document.getElementsByTagName("h3");

var arr = [].map.call(h3s, function(el) {
                              return el.textContent || el.innerText;
                           });

您可以在此处获取.map旧浏览器的补丁：MDN.map

于 2012-09-25T14:11:15.187 回答
1

如果您使用的是 jQuery，

var titleArray = new Array();
$('h3.title').each(function(){
    titleArray.push($(this).text());
});

alert(titleArray);

演示：http: //jsfiddle.net/muthkum/WVsEB/3/

于 2012-09-25T14:14:37.597 回答
1

旧版本的 Javascript 没有通过属性“类”选择元素的原生方法。在过去，我找到了一种自创的方法来填补这一空白。您可以在此处找到解决方法。此功能也适用于 IE6

于 2012-09-25T14:32:24.170 回答
0 
<h3 class = 'title'>trtr</h3>
<h3 class = 'title'>tcrtr</h3>
<h3 class = 'title'>tdrtr</h3>
<h3 class = 'title'>trrtr</h3>
<h3>trgtr</h3>

var arrayDemo  = [];
$.each($('h3[class*=title]'), function () {
         arrayDemo.push(this.innerHTML);
});

alert(arrayDemo);

这是此 http://jsfiddle.net/ymtFg/的演示

于 2012-09-25T14:18:11.863 回答