jQueryでランダムに生成したIDでハマった時の対応


はじめに

なんとなく趣味でちょっとjQuery扱ってみたいなーと思ってハマった部分のメモ書きになります!
jsで同様の挙動になるかは試しておらず、特に調べもしていないので、既存でも記事があったらごめんなさいw

目標

  • 背景divに対して Math.rondom() で生成した値を利用したidによる新規divを作成した上で、cssを追加する
    • divを勝手に作って、勝手に消えるような挙動を作りたいためにランダムにしたかった

ハマったコード

var hoge = "Hoge-"
var bg = $("#background")
var id = hoge + Math.random()
bg.append('<div id="' + id + '"></div>')

$("#" + id).css({
... //css記載
})

上記の場合、cssが適用されなかった

原因

  • idに対して . が組み込まれていたせい
    • ですよね・・・そりゃ、なりますよね・・・

改善したコード

var hoge = "Hoge-"
var bg = $("#background")
var id = hoge + Math.floor( Math.random() * 1000 )
bg.append('<div id="' + id + '"></div>')

$("#" + id).css({
... //css記載
})
  • ものにはよりますが、1000個ぐらいのdivであれば、まぁ、重なることがないかなと

結論

  • 使用できる文字列ぐらい、リファレンス読むかどうにかすべきだったw
  • idに対して . が組み込まれていた場合、取得できない
    • 根本的原因調査まではしていないので、とりあえず動くからOKってことで・・・