特定のIDがついているdivを任意の順に並び替える処理方法
- 特定のIDがついているdivを任意の順に並び替える処理方法について、JavaScriptのコード例を紹介します。
- jQueryのafter()メソッドを使用して、指定したdivを順番に追加する方法について解説します。
- 変数を使って動的にdivを追加する際には、ループ処理を組み合わせることで実現できます。
- ベストアンサー
特定のIDがついているdivを任意の順に
HTML内の特定のIDがついているdivを任意の順に並び替える処理を行いたいです。 <div id="sample-field">hogehoge</div> <div id="hoge-field">ほげほげほげ</div> <div id="dummy-field">ホゲホゲ</div> divのIDが固定であれば、 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); という感じでいけるそうで、このafter()の中身を作ろうとして詰まっています。 ---------------------------------------------------------------- var targetField = "hoge-field,dummy-field,sample-field";//←この順にしたい targetField = targetField.split(","); targetFieldLength = targetField.length; for ( i=0; i < targetFieldLength; i++ ) { source = "jQuery(" + "'" + "#" + targetField[i] + "'" + "),"; } ---------------------------------------------------------------- jQuery('#kotei').after(source); まず、↑のように書きました。 順にお尻に連結していくには「＋」だというのは理解しているのですが、 そもそも、変数 source は上書きされていくので、意図したものにはなりません。 最後の「,」を削除する処理も必要ですが、targetFieldLengthの数のループの時だけ処理を変える事で対応できそうな気はしています。 本当は、↓こうしたいです。 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); 拙い説明で恐縮ですが、 アドバイスいただけると嬉しいです。 よろしくお願いします。
- Search_tmp
- お礼率52% (21/40)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
単純にに関数化するのではダメなのでしょか？ 処理自体ができないのか、記述方法を好みの形式にしたいというのかがわかりませんが、好みの書式で記述したい場合はextend等でjQueryの関数化すればよろしいかと。 （全角空白は半角に） <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var sorting = function(){ if(arguments.length < 2) return; var i = 1, id, after, pre = $("#" + arguments[0]); while(id = arguments[i++]){ after = $("#" + id); pre.after(after); pre = after; } } $(function(){ sorting("kotei", "hoge-field", "dummy-field", "sample-field"); }); </script> </head> <body> <div id="sample-field">hogehoge sample</div> <div id="hoge-field">ほげほげほげ hoge</div> <div id="dummy-field">ホゲホゲ dummy</div> <div id="kotei">kotei</div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
A No1です。 コピペした時に、宣言や何かが落ちてしまったみたい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>test</title> わざわざ書くまでもないとは思いますが…。
関連するQ&A
- jQueryで指定した要素自身のHTML
jQueryを使用していて困っています。 下記の様なHTMLがある場合に <div id="hoge"> <div id="first">hoge</div> <div id="second">hogehoge</div> <div id="third">hogehogehoge</div> </div> “<div id="second">hogehoge</div>”を取得したいです。 $("#second").html()では、 hogehoge が取得されることになりますし、 $("#hoge").html()では、 <div id="first">hoge</div><div id="second">hogehoge</div><div id="third">hogehogehoge</div> が取得されることになると思います。 $("#second").wrap("<div class='target'></div>")して、 $(".target").html()を取得しても良いのですが、 他のところで影響がでそうで怖いので、できれば避けたいです。 （殆ど完成状態にありますので……） 何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
- 複数のタグをDIVタグで囲みたい
<TD>タグの中に<IFRAME>タグと<INPUT>タグがあり、それを<DIV>タグで囲みたいのです。 <TD> <TD> <IFRAME id="xxx" ... ==> <DIV> <INPUT id="yyy" ... <IFRAME id="xxx" ... </TD> <INPUT id="yyy" ... </DIV> </TD> jQueryのwrapall関数かと思うのですが、サンプル等では同じ種類のタグを囲むものしか ありませんでした。 jQueryは経験がないので、四苦八苦しています。 どなたかお知恵をお貸しください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- IDごとに個別のDIVを表示させる方法
http://www.skyrocketlabs.com/articles/jdiv-a-jquery-navigation-menu-alternative.php こちらのチュートリアルにあるドロップダウン式のナビを勉強のために作っております。 デモ版は1つの行でつくられているのですが、こちらのチュートリアルを応用し、同じようなナビを何行も続けて縦に重ねていく形を作りたいのです。 この場合、提供されているサンプルをどのようにいじればよいでしょうか？ デモ内では <li><a href="#" id="menu1">Rollover me!</a></li> ここにマウスを載せると <div id="hidden-div"> が表示される形になっていると思うのですが、 例えばこれを、 <li><a href="#" id="menu1">Rollover me!</a></li> .....<div id="hidden-div1"> <li><a href="#" id="menu2">Rollover me!</a></li> .....<div id="hidden-div2"> <li><a href="#" id="menu3">Rollover me!</a></li> .....<div id="hidden-div3"> menu（数字）ごとに、その下の個別の<div id="hidden-div（数字）">を出したいのです。 未だ知識が浅いため、いろいろいじくってはいるのですが、どうにも解決できません。 どなたかご教授お願いします。
- ベストアンサー
- JavaScript
- Jqueryのセレクタ範囲について
お世話になります。 【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか？ $("#aaa").not(":input"） としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。 反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。 何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input～）」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか？
- ベストアンサー
- PHP
- 指定されるdiv の部分の再読み込み処理について
javascript についてあまりわからないですが、javascript で以下のようなことをしたいですが、よくやり方がわかないので、わかっている方は教えていただきたいです。 <div id="sample"> この部分には、DBからデータを取り出す処理が入っているとする </div> form でsubmitをすると、id が sampleのところの処理を更新してくれる ようなjavascript はどうやって実現しますか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで特定id以外の下にある要素を削除したい
HTMLの制御にjQueryを使用しています。 作業の流れで、#contents以外の要素に存在する特定のクラスを削除したいと思っています。 対象ソースをコンパクトに書くと <body> <div id="contents"> <p class="test">moji</p> </div> <div id="etc"> <p class="test">moji</p> </div> <div id="etc2"> <p class="test">moji</p> </div> </body> というもので、contents以外のetc,etc2にあるclass="test"をremoveしたいのです。 ※cotents以外はidがイロイロ変わるので、「contents以外」でやろうとしています。 jQueryのマニュアルを見ながら、次のようなコードを書きました。 jQuery("*").not("#contents").hasClass("test").removeClass("test"); しかし、実行がうまくいきません。 FireFoxのFireBugで動作を見てみると「functionがない」というメッセージなっています。 jQuery("*").not("#contents").each( function() { jQuery(this).hasClass("test").each( function() { jQuery(this).removeClass("test"); }); }); でも同じ結果でした。 何か良い方法はないでしょうか。
- ベストアンサー
- JavaScript
- 任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？ よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。 この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。 例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。 いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。 お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryの配列の渡し方について
jQueryでの配列の渡し方についてご質問です。 jQueryではなくjavascriptでも良いのですが、不慣れなのでjQueryで試行しています。 ---------------------------------------------- targettab = targettab.split( ',' ); jQuery.each(targettab, function(i, val) { var livetab = "<li id='" + i + "'>" + val + "</li>"; jQuery(livetab).appendTo(jQuery("ul#tab")); }); ---------------------------------------------- ※変数 targettab に「あああ,いいい,うううう]という値が入っています。 こう↑書きますと、ul#tabの内部に <li id='1'>あああ</li> <li id='2'>いいい</li> <li id='3'>ううう</li> と入り、リストが生成されます。 ここまでは良いのですが、このそれぞれのidに入っている数字を任意の文字列にしたいです。 例えば、 targetstrings = "hoge,foo,dummy"; targetstrings = targetstrings.split( ',' ); という配列を差し込んで、最終的に <li id='hoge'>あああ</li> <li id='foo'>いいい</li> <li id='dummy'>ううう</li> という形で整形したいです。 jQuery.eachでは、そもそもできないような気がしていますが、 お知恵を拝借できましたら、大変ありがたいです。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 不明点などあれば、何なりとお知らせください。
- ベストアンサー
- JavaScript
- jQuery 最初のDIVの前へ、最後のDIVを
jQUeryで、 指定した要素の中にある複数のDIVの内、最初のDIVの前に 指定した要素の中の最後のDIVを複写して作成。 そして、 指定した要素の中の最後のDIVを削除する 方法について教えていただけないでしょうか。 <div id="waku"></div> Menu=[{'Cmnt1':'aaaaaaa'},{'Cmnt1':'bbbbbbbbbb'},{'Cmnt1':'ccccccccccc'},{'Cmnt1':'ddddddddd'}]; for(var i=0;i<Menu.length;i++){ $(#waku).append(<div id="eachDiv"'+i+'">'+文字列+'</div>'); $('#eachDiv'+i).append('<br>'+i+' : '+Menu[i].Cmnt1); } として、以下のようなイメージのdivの構造を作成します。 <div id="waku"> <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> <div id="eachDiv3">文字列 <div>3:ddddddd</div> </div> </div> 上記のような構造を 以下のような構造にしたいのです。 <div id="waku"> <div id="eachDiv3">文字列 <div>3:ddddddd</div> </div> <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> </div> 次のようにしてみましたが、#eachDiv3の中の要素のみ複写されてしまいます。 つまり、以下のようになってしまいます。 <div id="waku"> <div>3:ddddddd</div> //eachDiv3の中身 <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> <div id="eachDiv3">文字列 </div> </div> //コード var elem=$('#waku div:last'); $('#waku div:first').before(elem.clone(true)); elem.remove(); #eachDiv3自体を先頭へ複写して、最後の#eachDiv3を削除するにはどのようにしたら良いのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryのカスタムデータ属性追加について
いつもこちらでお世話になっています。 jQueryでカスタムデータ属性（data-*）を新規追加するにはどう記述すれば良いのでしょうか。 html側にはカスタムデータ属性が未設定の状態です。 以下の方法で試してみましたが、カスタムデータ属性を取得すると「NaN」となっています。 【html】 <div id='hoge'>hogehoge< /> 【ｊQuery】 $(#hoge).attr({ 'data-a': 'A', 'data-b': 'B' }); よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ 早々にアドバイスいただいていたにも関わらず、 お礼が遅れていしまい大変申し訳ありませんでした。 関数化ですね。 基本メソッドをある程度把握した上で、extendメソッドの利便性が発揮できる部分も多そうで、 複雑な印象もあって今までスルーしてしまってしました。 いただいたコードも今後の為に役立てさせていただきます。 本当にありがとうございました。