【超至急】jQueryで動的サイトをappendで作成する際、タグが勝手に変換されて困っています。

■ソースコード
<head>
<script>
var list = ['a', 'b', 'c', ...];
$.each(list, function(i, item) {
var max_length = item.length;
var m = '';
if (i == 0) { … [A処理]
m += '<div>';
m += '<div>';
m += '<div>';
}
<****> … [B処理]
if (i == max_length) { … [C処理]
m += '</div>';
m += '</div>';
m += '</div>';
}
$("#test").append(m);
</script>
</head>
<body>
<div id="test"></div>
</body>
■実行結果
<div><div><div> ← [a結果]
<****>
</div></div></div> ← [b結果]
<****>
<****>
;
<****> ← [c結果]ループの最後
■環境
IE10, FireFox22, Chrome28,IOS6(Safari)
■質問
ループの最後に[C処理]が行われてほしいのですが、[C処理]は実際には行われていません。
このためか、[b結果]に[C処理]があるように見えますが、これはブラウザ?が勝手につけています。これは、PCブラウザのデバッガで確認しております。max_lengthも正しいですし、固定値にしても結果は変わりません。
なぜこのようなことが起こるのでしょうか?
実際にはもう少し複雑な分岐がありますが、上記の基本動作が動かないために非常に困っております。
至急で申し訳ありませんが、アドバイスや問題点をご指摘願います!!

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/18 21:36:45
  • 終了:2013/08/24 00:30:01

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932013/08/19 02:11:10

ポイント34pt

タグのとじ忘れとかがあるのかな。
あと、$("#test").append(m);の時点で#testが存在することが保証されていないのでお決まりの

$(function(){
  document読み込み後に実行したい処理
});

が必要かと。

文字列でHTMLを組むのではなくDOMElement的(?)に組んだほうがわかりやすいと思います。

var m = $('<div>');
m.append($('<div>'));

これで↓が生成される。

<div><div></div></div>
id:cochoo

ご回答ありがとうございます。
ご指摘の処理で期待したとおりに動作することを確認しました!
mのスコープには気が付きませんでした!

2013/08/24 00:23:15

その他の回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932013/08/19 02:11:10ここでベストアンサー

ポイント34pt

タグのとじ忘れとかがあるのかな。
あと、$("#test").append(m);の時点で#testが存在することが保証されていないのでお決まりの

$(function(){
  document読み込み後に実行したい処理
});

が必要かと。

文字列でHTMLを組むのではなくDOMElement的(?)に組んだほうがわかりやすいと思います。

var m = $('<div>');
m.append($('<div>'));

これで↓が生成される。

<div><div></div></div>
id:cochoo

ご回答ありがとうございます。
ご指摘の処理で期待したとおりに動作することを確認しました!
mのスコープには気が付きませんでした!

2013/08/24 00:23:15
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/08/19 09:40:51

ポイント33pt

 括弧の対応がずれているのでこれでエラーなく動くとは思えません。コピペミスってませんか?
 
 正しいコードの構造が分かりませんのでなんとも言えませんが、変数をウォッチしてみるといいかもしれませんね。
 たとえば

var list = ['a', 'b', 'c'];

$.each(list, function(i, item) {
  var max_length = item.length;
  console.log(i,max_length)
})
//実行結果(itemは配列ではない)
//0 1
//1 1
//2 1

 あるいは

var list = ['a', 'b', 'c'];
var max_length = list.length;

$.each(list, function(i, item) {
  console.log(i,max_length)
})
//実行結果(iはmax_lengthとイコールにならない)
//0 3
//1 3
//2 3

 のようなことが起きているのでは。

id:cochoo

ご回答ありがとうございます。
本当ですね。なぜこうなるのでしょうか?
でも、ヒントをいただいて助かりました!!感謝です!

2013/08/24 00:26:26
id:a-kuma3 No.3

a-kuma3回答回数4504ベストアンサー獲得回数18702013/08/19 10:03:35

ポイント33pt

実際のコードは、このままではないのかもしれませんが、確実におかしなところが二つあります。

$.each(list, function(i, item) {
    var max_length = item.length;
    var m = '';     // ※(1)
    if (i == 0) {
        [A処理]
    }

    [B処理]

    if (i == max_length) {      // ※(2)
        [C処理]
    }
});

※(1)
ループの中にしかスコープがありません。
なので、二回目 (i == 1) のループのときには、A処理でつけた は DIV は消えてしまいます。

※(2)
each のコールバックに渡される第一引数 (i) は、0始まりです。
つまり、最後のループでは i == max_length - 1 です。

修正したのがこちら。

var max_length = item.length;
var m = '';     // ★(1) ループの外に出す
$.each(list, function(i, item) {
    if (i == 0) {
        [A処理]
    }

    [B処理]

    if (i == max_length - 1) {      // ★(2) max_length - 1 と比較
        [C処理]
    }
});

さらに、この順番で処理すれば良いのであれば、A処理、C処理は、ループの中に入れる必要はないと思います。

var max_length = item.length;
var m = '';     // ★(1) ループの外に出す

[A処理]

$.each(list, function(i, item) {

    [B処理]

});

[C処理]


実物と見比べてみてください。

他1件のコメントを見る
id:Lhankor_Mhy

あ、自分もmのスコープについて見落としてましたw

2013/08/19 10:18:21
id:cochoo

ご回答ありがとうございます。
mスコープについては気が付きませんでしたが、
なるほど、こうして順を追って確認していただくととてもわかりやすいです。
しかし、思い込みや知らなかったことばかりで質問側として恥ずかしいかぎりです。
ありがとうございました!!

2013/08/24 00:29:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません