jQueryで要素を移動する方法とは？
- jQueryを使用して同じ要素の先頭へ親要素を移動する方法について教えてください。
- 具体的な要件として、<span>□</span>をクリックした場合にpタグの一番上へ要素を移動したいです。
- 解決方法としては、クリックした要素の親要素からpタグの先頭への要素の移動を行えば良いですが、具体的な実装方法を知りたいです。
- ベストアンサー
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タグ先頭の先頭へ追加すればよい？ どうやって？
- re97
- お礼率80% (601/744)
- JavaScript
- 回答数1
- ありがとう数12
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://www.atmarkit.co.jp/ait/spv/1002/12/news101_2.html この辺使えばいけるでしょう
関連するQ&A
- 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で、指定した要素の子要素の値を取得
<form> <section><span class="area">大阪</span> ・jQueryで、上記の「大阪」を取得するにはどうすれば良いでしょうか？ ・既に「.find('section')」で、$(this)に<section>タグを取得しているのですが、その下のspanタグ内にある値、というやり方で取得するにはどう書けば良いでしょうか？ $(this).children.value とかやってもうまくいきませんでした
- ベストアンサー
- JavaScript
- jqueryのthisはイベントが起きている要素？
jqueryのthisはイベントが起きている要素を示すそうですが、 下記の例の.js-is-input-error1をthisにしても必須項目と出てきません。 こちらの例であればイベントが発生している要素とは、必須項目というテキストが出て来るspanタグがそれに該当する要素ではないのでしょうか？ https://codepen.io/anon/pen/VmgPav アニメーションなら動いている要素が、イベントが発生している要素ということでしょうか？ イベントが発生している要素というのがどうもはっきりわかりません。 アニメーションなら、(div.anime).animation()ならdiv.animeがイベントが発生している要素ですよね。 (button).click() ｛ (div.anime).animation() ｝ であればbuttonではなくdiv.animationがイベントが起きている要素ですよね？
- 締切済み
- JavaScript
- jQueryのcontainsフィルターについて
こんにちは。 jQueryについてご質問があります。 jQueryのcontainsフィルターで要素を取得できなくて困っております。 たとえば以下のようなHTMLがあるとします。 ======================== <g class="parent"> <text width="50" height="50" x="10" y="10"><tspan>abc</tspan></text> </g> ======================== このときtspan要素を取得したい場合、 $("g.parent text tspan:contains('abc')"); のようにしても取得できないのです。 例えば次のパターンの場合 ========================= <section class="parent"> <p><span>abc</span></p> </section> ========================= $("section.parent p span:contains('abc')"); というコードを実行すると正確にspan要素を取得できます。 前者の場合はなぜ取得できないのでしょうか？ ご教示よろしくお願いいたします。
- 締切済み
- JavaScript
- 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
- 「インライン要素」と「ブロック要素」の違いは何
SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 ｄｉｖタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか？
- ベストアンサー
- CSS
- jQuery 要素を移動する方法
以下のHTMLで<div class="target">ホゲ</div>を 自身の親要素の兄弟である <div class="header">内の一番後ろに移動する方法を知りたいです。（★の部分です） ちなみにこの型は2つだけでなく、10個とかあります。 jQuery(".target").each(function(){ jQuery(this)～ }); みたいな感じで簡単にいけるかなと思って甘くみていたら、うまくいかず、 この方法だとできない気がしてきてお尋ねしている次第です。 <div class="header">新規 Div タグの内容がここに入ります★</div> <div class="aaaa"> <div class="bbbbb"> <div class="contents"> <div class="target">ホゲ</div> </div> </div> </div> <div class="header">新規 Div タグの内容がここに入ります★</div> <div class="cccc"> <div class="dddd"> <div class="contents"> <div class="target">ホゲ</div> </div> </div> </div> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 【ｊQuery】スマフォサイトのアコーディオン
スマートフォンサイトで使用するアコーディオンについて 下記サイトのものを参考に制作しています。 http://07design.net/blog/?p=477 こちらのスクリプトでは、一つのコンテンツをクリックして、 もう一度クリックしない限り開いたままの状態になりますが、 一つのコンテンツが開かれている場合、 その他のコンテンツを閉じるように動作させることは可能でしょうか？ イメージ的にはこちらのサイトにあるようなものです。 http://www.geekzshu.com/jquery/975 どなたか解決策がお解かりの方がおられましたら 宜しくお願いいたします。 ■html <section class="list"> <div class="acordion"> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> </div> </section> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header: "h3", collapsible:true, animated: 'bounceslide' , autoHeight:false, active:10 }); }); </script> ■javascript $(document).ready(function(){ //acordion_treeを一旦非表示に $(".acordion_tree").css("display","none"); //triggerをクリックすると以下を実行 $(".trigger").click(function(){ //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら if($("+.acordion_tree",this).css("display")=="none"){ //classにactiveを追加 $(this).addClass("active"); //直後のacordion_treeをスライドダウン $("+.acordion_tree",this).slideDown("normal"); }else{ //classからactiveを削除 $(this).removeClass("active"); //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ $("+.acordion_tree",this).slideUp("normal"); } }); });
- ベストアンサー
- 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でtdの要素を変更したい
以下サイトを参考に、バリデーションルール機能を実装した入力フォームを作成していました。 ttp://ascii.jp/elem/000/000/479/479507/ (html作成) ttp://ascii.jp/elem/000/000/479/479507/index-2.html(ルール実装) 参考サイトは、dlタグで表を作成されているのですが、 私は、tableタグで作成したものに適用したいと思い機能実装に挑戦しました。 エラー判定時に、 $(this).parent().prepend("<p class='error'>入力必須項目です</p>") この一文で、エラー要素の前にPタグをつけようとしているようなのですが、 tableタグのため、うまくいきません。tdとtdの間に入り表が崩れてしまいます。 【inputタグ(=ゲームタイトル名)の後ろ】に、【入力必須項目です。】と文字を追加するためには、 どのように変更すればいいのでしょうか。 (<td><input type="text" class="validate required error">入力必須項目です。</td> としたい。) $(this).parent().prepend("<p class='error'>入力必須項目です</p>") ここを変化させたらいいと思うのですが、htmlやafter等に変更してもうまくいきません。 ttp://ascii.jp/elem/000/000/479/479507/ (html作成) ttp://ascii.jp/elem/000/000/479/479507/index-2.html(ルール実装) に紹介されている、ソースのどの部分を変更すれば実装することができるのでしょうか… ご教授お願いします。 =========現在機能を実装しようとしているhtmlソース============= <form> <table> <tr> <td>ゲームタイトル名</td> <td><input type="text" class="validate required"></td> </tr> ： ： </table> <input type="submit" value="ゲーム情報登録"> </form>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 リンク先、大変参考になりましたー