[JS] setAttributeで保存される順番

このQ&Aのポイント
  • IE8ではsetAttributeした属性の順番がarrと異なる
  • elementに属性を設定するためにはどうすればいいか
  • IEでsetAttributeの順番を保持する方法
回答を見る
  • ベストアンサー

[JS] setAttributeで保存される順番

IEで悩まされています。 配列arrで指定されている属性情報をノードにセットする際に、以下のようにしたところ、 IE8では設定されたelement.attributesはarrとは異なる順番となってしまいます。 (FF10ではsetAttributeしたとおりの順番でelement.attributesに格納されます) for ( var i = 0; i < arr.length; i++){ element.setAttribute( arr[i].name, arr[i].value); } 配列arrで指定されている順番そのままでelementに属性を設定したいのですが、 どうすれば可能でしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.1

「仕様上」不可能です。なぜなら、XML および HTML の基本仕様として、属性は順序を持たないからです。IE の振る舞いは正当です。 順序が必要なら要素として書き直すか、やり方を変えて下さい。 ついでながら、JavaScript における for...in でのプロパティ列挙も順序は実装依存です。プロパティは順序を持ちません。

関連するQ&A

  • element.options.lengthとは?

    http://javascriptist.net/ref/element.select.option.value.html のサイトのサンプルコードの24行目にある for (var i=0;i<element.options.length;i++) { の部分に、element.options.lengthがあります。 これは、が入るのでしょうか。 <select> <option></option> <option></option> </select> の場合はelement.options.lengthが2に <select> <option></option> <option></option> <option></option> <option></option> </select> の場合はelement.options.lengthが4に <select> <option></option> </select> の場合はelement.options.lengthが1に というようにelement.options.lengthは <select>の<option>の合計数を常に表しているのでしょうか。

  • is not a functionというエラー

    jqueryのスクリプトを書いていたところ $(function () { var wrapper = $("#main"); var wrapperWidth; var blocks = []; NewBlocks(blocks, wrapper.children()); function NewBlocks(blocks, elements) { for (var i = 0; i < elements.length; i++) { var element = elements[i]; var block = new Block(element); blocks.push(block) } } function Block(element) { this.element = element; element.style.margin = "10px"; this.init(); } Block.prototype = { init: function () { this.width = this.element.offsetWidth; this.height = this.element.offsetHeight; } } }); 上記スクリプトを実行すると「this.init is not a function」というエラーが出てしまいます。 一体何をどう間違っているせいでエラーが出るのか、どうかご教授いただけますでしょうか。

  • [JS] childNodesを置き換える

    あるノードのchildNodesを別のノード配列オブジェクトに置き換えたいです。 以下のようにしてみました。 var nodes = new Array(); nodes[0] ... nodes[n] を作成。 var target = document.getElementById("id"); target.childNodes = nodes; この処理はFF10ではスルーされてしまうようです。 1つずつappendChildしないで設定する方法はありますか?

  • ActionScriptで配列をクリアする方法を教えてください。

    ActionScriptで、オブジェクトを格納した配列をクリアする正しい方法を教えてください。 具体的には、 ・new Array() で配列を生成する。 ・new Object() で生成したオブジェクトを配列に格納する。 ・配列の中身を処理したあと、配列を一度クリアする。 ・配列に別のオブジェクトを格納する。 ような処理をしたいのですが、メモリリークを起こさずに配列をクリアするにはどうしたらいいでしょうか? 例えば、イメージはこんな感じです。(意味のないコードですが) // 配列の生成 var arr = new Array(); // 配列にオブジェクトを格納 for (var i = 0; i < 5; i++) { var obj = new Object(); obj.num = i; } // 配列のクリア arr.length = 0; // クリアした配列に別のオブジェクトを格納 for (var i = 0; i < 5; i++) { var obj = new Object(); obj.num = i * 2; } 上記のコードで、arr.length = 0; で配列をクリアしていますが、これで配列に格納されたオブジェクトが確保したメモリがすべて解放されるでしょうか? あるいは、配列の内容がなくなるまで pop() 等で取り出す等の処理をする必要があるでしょうか? 以上よろしくお願いします。

    • ベストアンサー
    • Flash
  • 配列のlengthの意味

    配列を作って以下のように作りました。 ==================================== var arr:Array = new Array(); arr[0] = "地球"; arr[1] = "太陽"; arr[2] = "月" arr["川"] = "rever"; arr["魚"] = "fish" arr["鳥"] = "bird"; trace(arr[0]);  //結果: 地球 trace(arr["魚"]);  //結果: fish trace(arr.length);  //結果: 3 →なぜ6ではない? ==================================== 連想配列3つと、普通の3つの2種類を arrという配列に入れたのですが、 lengthを調べると 3 と出ます。 連想配列というのは、 length には反映されないのでしょうか。 またその場合、連想配列の個数を調べるときは どのように書けばよいのでしょうか。 連想配列って、配列のどこに格納されているのだろう。。? と不思議に思ってしまいます。 ご存知の方いらっしゃいましたら、 何卒よろしくおねがいいたします。

    • ベストアンサー
    • Flash
  • 配列について、その要素を並べ替えて得られる配列を重複することなく全て得たいです。

    要素数が5つなら5!で120通り、nであればn!通りの配列をすべて得たい、といった具合です。 自分で組んでみたところ、再帰呼び出しを多用しているせいか要素を8つにした時点でFirefoxだと「このページのスクリプトは処理に時間がかかっているか応答しなくなっています。…」、IEでも似たような警告文が表示されてしまいます。 コードは以下に示すとおりです。 そこでお聞きしたいのは、  1.「処理に時間が~云々」などの表示をさせずに処理を   続けさせるにはどのように書いたらいいか  2.もっと短くスマートなコードで全走査できないか の2つです。 1.についてはユーザサイドでなく開発者サイドで、かつalertを使う以外の方法で、警告文を出させないで処理を続けさせるためにはコードをどのようにしたらよいでしょうか。 2.に関しては、私が書いたコードは正直わかりにくいと思いますので、もっとシンプルに全走査できるアルゴリズムがあったら教えてほしいです。 どうかよろしくお願いします。 <html> <body> <script type="text/javascript"> <!-- //Arrayオブジェクトに自身をコピーした配列を返すclone()メソッド追加 Array.prototype.clone = function(){ // 自分自身が配列かをチェック if(this[0].constructor == Array ){ var ar, n; //新しい配列を用意する ar = new Array(this.length); for(var n=0;n<ar.length;n++){ //再起呼び出しで配列の中身をコピー ar[n] = this[n].clone(); } //作成した配列を返す return ar; } return Array.apply(null,this); } //★要素を並べ替える前の配列の宣言 var ar = new Array("1","2","3","4","5","6","7","8"); //並べ替え後の配列を格納する配列宣言 var arranged_ar = new Array(); function arArrange(){ //引数は(呼び出した節の、並び替える前の配列内での順番,すでに取り出した節の配列,兄弟の配列) function createBranch(parentCounter,parentNodes,sameDepthBranches){ var branches = new Array(); //呼び出した節の子ノード格納用の配列宣言 branches = sameDepthBranches.clone(); //呼び出した節の兄弟をコピー branches.splice(parentCounter,1) //呼び出した節を除いて子ノードの配列作成完了 var pushed_ar = new Array(); //この節以前に登場した節を格納する(最終的に並べ替え終わった配列になる)配列宣言 pushed_ar = parentNodes.clone(); //呼び出し元のpushed_arをコピー for(var i=0;i<branches.length;i++){ pushed_ar.push(branches[i]); //pushed_arに子ノードを1つ追加 //走査が葉ノードに達したときの処理 if(pushed_ar.length == ar.length){ var length = arranged_ar.length; arranged_ar[length] = new Array(); for(var j=0;j<pushed_ar.length;j++){ arranged_ar[length].push(pushed_ar[j]); //arranged_arに並び替え後の配列を格納 } //走査がまだ葉ノードに達していない場合の処理 }else{ createBranch(i,pushed_ar,branches); //自身を再帰呼び出しすることで葉ノードに達するまでループ } //子ノード以下の走査が終わった場合の処理 pushed_ar.splice(pushed_ar.length-1,1); //追加した子ノードを削除して次の子ノード追加へ } return; } //↑で宣言したcreateBranch関数の呼び出し for(i=0;i<ar.length;i++){ var tempAr = new Array(); tempAr.push(ar[i]); createBranch(i,tempAr,ar); } //結果をresultに格納 var result = ""; for(var i=0;i<arranged_ar.length;i++){ result += i+1 + ": "; for(var j=0;j<arranged_ar[i].length;j++){ result += arranged_ar[i][j] + ","; } result += "<br>"; } //結果を画面に表示 document.getElementById("result").innerHTML = result; return; } --> </script> <input type="button" value="全並べ替えパターン走査" onclick="arArrange();"> <p id="result">ここに結果表示</p> </body> </html>

  • 関数内での繰り返し処理の結果を配列で受け取りたい

    関数内でfor文で繰り返し処理を行い、 結果を配列として返すような関数を書きたいと思っています。 function hoge(){ var a = [1,2,3,4]; for (var i=0; i < a.length; i++){ a1 = "a" + i; var arr = new Array(); arr.push(a1); } return arr; } しかし、以下のように 関数hogeの結果を変数bで受け取ってみると、 配列の最後のデータしか表示されません。 var b = hoge(); alert(b); //a3のみが表示される a0, a1, a2, a3と表示されるようにするには、 どうしたらよいでしょうか。

  • 配列の中身を全て順番に別の関数へ引数として渡すには

    配列の中身を全て順番に別の関数へ引数として渡すには、どうすればよいでしょうか? このままだと、'null' は Null またはオブジェクトではありません。 となります。 function piyo(hoge){ alert(hoge); } for (var i = 0; i < hogearray.length; i ++) { piyo(hogearray[i]);//ここを通ったら、順番の関数を呼び出すようにしたい } また、グローバル変数として渡すには、どうすればよいでしょうか?

  • AS3の配列の中にアクセス

    FlashCS3でas3を使っています。 配列についての質問なのですが、 下記のコードがあるとします。 var btn_arr:Array=[aboutA_mc,aboutB_mc,aboutC_mc,aboutD_mc]; 配列に格納したボタン全てに、同じマウスアクションをつけたい場合など、 for (var i:int = 0; i<btn_arr.length; i++) { btn_arr[i].addEventListener(MouseEvent.Roll_Over,abcdOver); } function abcdOver(e:MouseEvent):void { btn_arr[i].textColor = #FFFFF; とかで、出来るかなと思ったのですが、上手くいきません。 何か良い方法があれば、ご教授よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • 配列をソートしたいです

    配列をソートしたいです ArrayクラスのsortOn()を使って、 「x座標の大きい順」に順番をならべ変えたいのですが 上手く行きません。。 現在、配列を使い 3つの矩形のSpriteを配置しています。 ↓現在のコード ===================================== var arr:Array = new Array(); for(var i:int=0; i<3; i++){  arr[i] = new Sprite();  with(arr[i].graphics){   beginFill(0x666666);   drawRect(0,0,8,8);   endFill();  }  arr[i].x = i*10;  addChild(arr[i]); } ===================================== 今、各Spriteのxプロパティは  arr[0].x = 0;  arr[1].x = 10;  arr[2].x = 20; になっているのですが、 これをソートして  arr[0].x = 20;  arr[1].x = 10;  arr[2].x = 0; にならべ変えたいのですが、 どのように書けばいいのかがわかりません。。 今、このように書いてるのですが arr.sortOn(arr.x, Array.NUMERIC); 並べ替えができません、 (おそらく arr.x が駄目なのだと思うのですが。。) どなたかご存知の方いらっしゃいましたら どうかよろしくお願いいたします。

    • ベストアンサー
    • Flash