Jqueryで親要素の順番入れ替え方法
- Jqueryを使用して、親要素の順番を入れ替える方法を説明します。
- 要素の順番を入れ替えるためには、要素を取得し、親要素の順序を変更する必要があります。
- 具体的なコード例を示して、要素の順番を入れ替える方法を紹介します。
- ベストアンサー
Jquery 親要素で順番入れ替え
Jquery 親要素で順番入れ替え a要素を取得して、その親の親(<div id="shop">)の順番を入れ替えしたいのです。 【HTML】 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> 【Jquery】 $(function(){ $('a[href*="http://www.aaaa.jp"]').parent().parent(); $('a[href*="http://www.bbbb.jp"]').parent().parent(); .... }); これで『http://www.aaaa.jp』のリンクを持つdivと『http://www.bbbb.jp』のリンクを持つdivとを指定できるわけですが、 ページを表示した時に順番を入れ替えするにはどうしたらよいのでしょうか?例えば、 【実行結果HTML】 <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> HTMLを直接触って変更できたら楽なんですけどね~。PHPで吐き出されているのでムリなんです。ソースぐちゃぐちゃで仕様書もない始末なので、Jqueryで入れ替えできないものかと・・・
- maz1105
- お礼率43% (22/51)
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
以下でどうかな? <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var shopA = $('a[href*="http://www.aaaa.jp"]').parent().parent(); var shopC = $('a[href*="http://www.cccc.jp"]').parent().parent(); shopA.before(shopC); }); </script> http://semooh.jp/jquery/api/manipulation/before/content/
関連するQ&A
- Jquery 特定のa要素を持つ親を2つに分けてランダムに順番入れ替え
Jquery 特定のa要素を持つ親を2つに分けてランダムに順番入れ替え 立て続けに何度も質問して申し訳ありません。いろんな方に質問して、答えていただき、 【HTML】 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.dddd.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.eeee.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.ffff.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.gggg.jp">お店の名前</a></p> <p>あああああああああ</p> </div> 【Jquery】 $(function(){ var shopA = $('a[href*="http://www.aaaa.jp"]').parent().parent().css("background-color","#CCC"); var shopC = $('a[href*="http://www.cccc.jp"]').parent().parent().css("background-color","#666"); shopA.after(shopC); }); 特定のURLを持つ親のdivの順番を入れ替えることに成功しました。が、 さらにこの特定のa要素を持つdivをリロードごとにランダムで順番を切り替えるにはどうすればいいのでしょうか?? さらに、特定のURLを持たない、つまりそれ以外のURLを持つ親要素もランダムで順番を切り替えたいのです。 つまり、上と下で2つに分けたランダムが動いているようにしたいのです。 有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか・・・。 すみません、もし分かるかた、教えていただけたら助かります!!
- 締切済み
- JavaScript
- Jqueryで特定のa要素を持つ親要素の取得について
Jqueryで特定のa要素を持つ親要素の取得について <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> ここから、『http://www.bbbb.jp』のリンクを持つdivを指定するとして・・・ $('a[href*="http://www.bbbb.jp"]').parent().parent().css("background-color","#ccc"); こんな風に書きました。 これでもOKなんですけど、『.parent().parent()』親の親って・・・(汗) もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです!
- 締切済み
- JavaScript
- jqueryで要素の中身を要素の外に出す方法
教えを貸してください。 jQueryを使って、要素を追加したり、削除したりしています。 このようなHTMLがあります。 <div class="fast"> <div class="second"> <p><a href="goo.ne.jp">goo</a></p> </div> <div class="second"> <p><a href="yahoo.co.jp">yahoo</a></p> </div> <div class="second"> <p><a href="google.co.jp">google</a></p> </div> </div> このとき、yahooへのリンクを含む<div>から外したいのです。 <div class="fast"> <div class="second"> <p><a href="goo.ne.jp">goo</a></p> </div> <p><a href="yahoo.co.jp">yahoo</a></p> <div class="second"> <p><a href="google.co.jp">google</a></p> </div> </div> 対象となるdivとその中身を取得することはできています。 そのdivを消して、divのあった場所に挿入する。 という方法に悩んでいます。 良い方法がありましたら、教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで親カテゴリーが違う場合値を変えたい
http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly こちらのソースをいじってます。 [rel~=tooltip]に当てはまる要素で現在選択してる物の親要素が.webなら~と条件分岐したいのですが、実行しても、[rel~=tooltip]が含まれる要素の中に.webがあるならみたいなニュアンスになってるようです。どうやればここに条件分岐できるのでしょうか? HTML↓ <html> <head>~</head> <body> <div class="web"><a href="" rel="tooltip">abc</a></div> <div class="none"><a href="" rel="tooltip">abc</a></div> </body> </html> jQuery↓ $( document ).ready( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); if(target.parent('.web')) { tooltip = $( '<div id="tooltip" class="web"></div>' ); }; if(target.parent('.none')) { tooltip = $( '<div id="tooltip" class="none"></div>' ); }; if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); }
- ベストアンサー
- JavaScript
- iframe内からjQueryで指定したい
jQueryのparentで親要素のIDを収得したいのですが、iframe内から、 読み込み元のHTMLを.parent()で追っていくと、取得できません。 jQuery("div#main iframe").contents().find('body').click(function(){ var hoge = jQuery(this).parent().parent().attr("id"); alert(hoge); }); .parent()では読み込み元のHTMLをまでいけないようなんですが、jQueryでは取得できないのでしょうか。 他にiframeから親を取得する記述があるのでしょうか。 アドバイスいただけると助かります。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 こちら↓の板が閉鎖されるのを知らずにポストしていまい、 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi 解決の見込みがなさそうですで、改めてこちらでお尋ねしています。 ややマルチ気味で恐縮ですが、ご容赦ください。
- ベストアンサー
- 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でページ内リンクに誤差が出る。
フェード効果を追加したページ内リンクをクリックすると、上に300px程ずれてしまうエラーがでてしまいます。 これを解決するにはどうすればいいでしょうか? http://code.jquery.com/jquery-1.6.2.jsを使用 * javascript ************* (function($){ var speed = 300, active = "actve", n_active = ":not(." + active + ")", getTarget = function(elm){ var h, r = $(""); elm.each(function(){ if(h=$(this).attr("href").match(/#.+$/)) r = r.add(h[0]); }); return r; }; $.fn.extend({ changer : function(){ var t = $(this).children("a"); getTarget(t.filter(n_active)).hide(); t.click(function(){ var elm, func, t = $(this); getTarget(t.parent().children("a")).queue([]).stop(1,1); func = function(){ getTarget(t.addClass(active)).fadeIn(speed); }; elm = getTarget(t.siblings("."+active).removeClass(active)); if(elm.length) elm.fadeOut(speed, func); else func(); return false; }); } }); })(jQuery); $(function(){ $("#group1").changer(); }); * html ************* <div style="padding:500px 0 500px;">余白用</div> <div id="group1"> <a href="#text1" class="actve">1を表示</a> <a href="#text2">2を表示</a> <a href="#text3">3を表示</a> </div> <hr> <div id="text1"><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p></div> <div id="text2"><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p></div> <div id="text3"><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p></div> 上記の内容で、リンクをクリックすると切り替わったと同時に、上に戻ってしまいます。 見たところ、ランダムではなく、一定の箇所まで戻るといった感じでした。 これを直すにはどうすればいいでしょうか?
- ベストアンサー
- JavaScript
- jquery tab要素に文字列追加
jqueryのタブ要素にinnerhtmlで文字列を挿入したいのですが、なぜかどのような文字列を挿入しても 先頭に"undefined"の文字が挿入されてしまいます。 この文字列が入らないようにするにはどのようなコードを書く必要があるのでしょうか? ご教授お願いします。 コード例は下に記載させて頂きました。 <div style='clear:both;' id="tabdemo1"> <ul> <li><a href="#ex1">ex1</a></li> <li><a href="#ex2">ex2</a></li> </ul> <div id="ex1"> </div> <div id="ex2"> </div> </div> var html; html="Hello world"; document.getElementById("ex1").innerHTML += html;
- 締切済み
- JavaScript
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- jQueryについて教えてください
http://www.skuare.net/test/jFloatingmenu.html こちらのサイトを参考に製作をしたのですが <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;">メニュー1</a></li> <li><a href="#" onclick="return false;">メニュー2</a></li> </ul> </div> こちらの部分をテキスト表示だと表示されるのですが メニューを画像(CSSを使ったロールオーバー)にすると 点線のみ表示され、画像が表示されなくなります。 <ul> <li class="category1_1"><a href="#" target="_parent">メニュー1</a></li> <li class="category1_2"><a href="#" target="_parent">メニュー2</a></li> </ul> 原因がわかりません 教えていただけませんでしょうか?
- ベストアンサー
- JavaScript
お礼
すんばらし~~!!!OKです ありがとうございます。 なるほど、そのまま変数に入れて、before とか afterとか appendとか使えば、 自由に入れ替えできそうですね。ありがとうございました!!