jQueryでhrefのルート書き換え
- jQueryを使用して、特定のidに対応するhrefタグのルートを書き換えたいです。
- ベストな方法は、フォルダ構造が複雑でテンプレートを使用しているため、jQueryを使って書き換えることです。
- 直接書き換えるとhrefの中身が全部変わってしまうため、prependを使用してhrefの中身に追記したいと思っています。
- ベストアンサー
jQueryでhrefのルート書き換え
jqueryを使用して、idによってhrefタグのルートを書き換えたいと思っているのですが可能でしょうか？？ <body id="●"> <a href="1.html">1</a> <a href="2.html">2</a> <a href="3.html">3</a> <a href="4.html">4</a> bodyのidがAの時… <a href="A/1.html">1</a> <a href="A/2.html">2</a> <a href="A/3.html">3</a> <a href="A/4.html">4</a> のようなことをしたいです。 このソースだけ見たら直接書けばいいんじゃないかと思われてしまいそうですが、フォルダ構造が複雑でテンプレートを使用しているのでjQueryを使った書き換えがベストだと思いました。 $("#A a").attr({ href:"A/"}); だとhrefの中身全部書き換えられてしまいますし、prependを使用してhrefの中身に追記出来ればと思うのですがうまくいきません… よろしくお願いします。
- webdesigningkai
- お礼率78% (30/38)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ループ(each)で回して「"a/" + link.attr("href")」でできますよ。 ついでにbodyタグのidも自動で取得するようにしておきました。 $(function(){ var id = $("body").attr("id"); $("#" + id + " a").each(function(){ var link = $(this); link.attr("href", "a/" + link.attr("href")); }); });
関連するQ&A
- jqueryについて
jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });
- ベストアンサー
- AJAX
- jQueryでの記述をjavascriptに
下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。 どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>
- 締切済み
- JavaScript
- jQueryで困っています。教えてください。
スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });
- ベストアンサー
- JavaScript
- jqueryの構文について
はじめまして、最近jqueryの勉強を始めました。 セレクタを変数で指定した場合の子要素の取得の仕方がわからず、困っています。 アドバイスいただけませんか？ <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#next").click(function () { //下のように書いてみたのですが動きません。 var next_slide = $("#slide01").next(); $(next_slide).text("hoge");//これは動きます var img_url = $(next_slide > a).attr("href");//エラーを起こします alert(img_url); return false; }); }); </script> </head> <body> <ul> <li id="slide01"><a href="url01">スライド01</a></li> <li id="slide02"><a href="url02">スライド02</a></li> <li id="slide03"><a href="url03">スライド03</a></li> </ul> <a href="#" id="next">次へ</a> </body> </html> 要は次の要素の子要素にアクセスしたいのです。 ご教授のほどよろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- jqueryでhrefの値を取得して代入する方法
jquery 初級者です。 下の様なaタグをクリックした時に、（リンク先に移動し）hrefの値と紐付けされているdivを開きたいのですが、どうしてもうまくいきません。 <a class="btn" href="#contents">開く</a> <div id="contents" style="display:none;"> 開きたいコンテンツ。通常は見えない。 </div> ※実際はこうしたリンク要素がたくさんあるため、hrefの値を取得する形にしたいのです。 どなたか詳しい方宜しくお願い致します。
- 締切済み
- JavaScript
- jqueryについて【初歩】
見ていただきありがとうございます。 jqueryについて初歩的な質問です。 下記の記述は ひとつのボックスに対して内包するaタグのリンクを指定してボックスごとリンクにしているスクリプトになりますが、これにtargetの属性を付加させたいです。 しかしいろいろ試しましたがうまくいかず、ツンでます… jqueryに精通している方宜しければご回答いただけませんでしょうか？ よろしくお願いいたします。 $(function(){ $(".sampleBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
- 締切済み
- JavaScript
- jQueryのコードで分からない箇所があります
プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
- jQueryで書き換えた要素のリセット
jQueryで書き換えた要素のリセット 多分かなり初歩的な質問ですが、すいません。 jQueryでDOMの書き換えをやりたいのですが、その場合、書き換える前の状態にリセットするような関数？はありますでしょうか。 ないとすれば、書き換える前の要素を取り出しておいて、もう一度代入するような方法しかないでしょうか。 具体的にやりたいのは、ある条件の時のみaタグのURLを書き換え、条件から外れると元のURLに戻る、というものです。 素のhtml <a href="http://www.hoge.com/"></a> 条件を満たしているとき <a href="http://www.mogamoga.com/"></a> 条件を満たしていないとき <a href="http://www.hoge.com/"></a> 詳しい方おられましたら、どうかご教授ください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryで画像にリンクを張りたい
HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryの質問。
毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
お礼
ありがとうございます！！ 最初そのままコピペしたら「href="a/●.html"」となって、bodyのidを取得してない…と悩んだのですが、link.attr("href", id +"/" + link.attr("href"));としたらちゃんと動きました！！ jQueryは便利ですね！もっと使いこなせるよう勉強します。 ありがとうございました。