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

何かのようなもの：

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

新しい空の配列が作成されます。次に、そのクラスを持つすべての要素を調べて、その.titleHTML コンテンツを抽出します。次に、このコンテンツを配列にプッシュします。

jQuery を使用すると、非常に簡単になります。

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

これは、あなたの望むことですか？

IE7 ではサポートされていないことに注意してくださいquerySelectorAll。したがって、これらのブラウザーのサポートが必要な場合は、jQuery などのライブラリーまたはその他の回避策が必要になります。

于 2012-09-25T14:12:22.827 に答える
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 に答える
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 
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

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 に答える