- 締切済み
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()』親の親って・・・(汗) もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです！
- maz1105
- お礼率43% (22/51)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
関連するQ&A
- 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で入れ替えできないものかと・・・
- ベストアンサー
- JavaScript
- Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え
Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え 立て続けに何度も質問して申し訳ありません。いろんな方に質問して、答えていただき、 【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を持つ親要素もランダムで順番を切り替えたいのです。 つまり、上と下で２つに分けたランダムが動いているようにしたいのです。 有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか・・・。 すみません、もし分かるかた、教えていただけたら助かります！！
- 締切済み
- JavaScript
- jQueryで同じ要素の先頭へ親要素を移動したい
下記のとき、<span>□</span>をクリックしたら、pタグの一番上へ要素を移動するにはどうすればよいでしょうか？ 変更前 <section> <div>★</div> <p><span>☆</span></p> <p><span>■</span></p> <p><span>□</span></p> 変更後 <section> <div>★</div> <p><span>□</span></p> <p><span>☆</span></p> <p><span>■</span></p> ■やりたいこと ・<section>はそれぞれ複数あるので、クリックした地点からの相対パスで、一番上要素を指定したいです ・「$(this).parent()」を、「$(this).parent()」のpタグ先頭の先頭へ追加すればよい？ どうやって？
- ベストアンサー
- 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
- 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で孫要素を追加する方法
分からない事があり、質問させていただきます。 やりたい事はphpからデータを受け取りその数に合わせて動的にli要素を出力する、という物です。 <div id="list_box"> <li class="item"> <a href="">こんにちは</a> </li> . . . </div> というような感じにしたいです。 jqueryで自分なりに書いてみたんですが、 for (var i = 0; i < data.length; i++) { $('#list_box').append('<li class="item"></li>') .find('li') .append('<a href="">' + data[i].name + '</a>'); } これでは思うような結果にはなりませんでした。 よく考えてみると find()で指定した li は直前で追加したli要素に限定できていません。 うまくいかない理由は分かったと思うのですが、どういう風にセレクタを指定すればよいのか解りません。 ご回答よろしくお願い致します。
- ベストアンサー
- JavaScript
- jqueryでhrefの値を取得して代入する方法
jquery 初級者です。 下の様なaタグをクリックした時に、（リンク先に移動し）hrefの値と紐付けされているdivを開きたいのですが、どうしてもうまくいきません。 <a class="btn" href="#contents">開く</a> <div id="contents" style="display:none;"> 開きたいコンテンツ。通常は見えない。 </div> ※実際はこうしたリンク要素がたくさんあるため、hrefの値を取得する形にしたいのです。 どなたか詳しい方宜しくお願い致します。
- 締切済み
- 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
- dom要素のhtml取得について－get()
dom要素のhtml取得について－get()メソッドを使用するのがいいのか？ don要素のhtmlを取得したいと考えていますが うまくいきません。 以下htmlです。 ------------------------------------------------- <div id="hoge"> <div class="day-number">16</div> <div class="kurasuhoge"><a href="http://hogeURL.com" class="anker">○</a></div> <div class="day-number">17</div> <div class="kurasuhoge"><a href="http://hogeURL2.com" class="anker">○</a></div> </div> ------------------------------------------------- この中のアンカータグを取得し配列に格納したいです。以下のように格納出来れば理想です。 var hairetsu = {16:'<a href="http://hogeURL.com" class="anker">○</a>',17:'<a href="http://hogeURL2.com" class="anker">○</a>']; まずはアンカータグを取得と思い以下を書きました。 ------------------------------------------------- var hensu = $("#hoge .anker").parent().get(); alert(hensu); ------------------------------------------------- 結果[object HTMLDivElement],[object HTMLDivElement] と表示されてしまいます。 今getメソッドを使用していますが 他にいいメソッドがあればアドバイスいただけたら嬉しいです。 まとめますと 「#hogeの中の.anker要素をもつhtmlソースを摘出し配列に格納したいです。」 修正方法をご教示いただければ幸いです。
- ベストアンサー
- JavaScript
