質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1452閲覧

JavaScript:loadで取得したタグ付きの値を成形してタグを取り除きたい

igaiga

総合スコア144

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2017/04/06 01:24

編集2017/04/06 08:08

以下のようにloadで値を取ることができましたが、
タグも一緒についてきてしまいます。。。

<ul class="checkBoxListLink"> <li><a href="/?hoge=&year=1">1年以内<span></span></a></li> <li><a href="/?hoge=&year=2">2年以内<span></span></a></li> <li><a href="/?hoge=&year=3">3年以内<span></span></a></li> </ul> <script type="text/javascript"> $(".checkBoxListLink > li > a").each(function(i) { var url = $(this).attr("href"); $(this).children("span").load(url + " #sort_val"); }); </script>

表示は以下のようになるのですが、

<li><a href="/?hoge=&year=1">1年以内<span><span id="sort_val">0件</span></span></a></li>

これを以下のように表示させたいのですがお知恵を拝借できないでしょうか。

<li><a href="/?hoge=&year=1">1年以内</a><span>0件</span></a></li>

よろしくお願いいたします。

###完成版:loadを使用した場合

<ul class="checkBoxListLink"> <li><a href="/?hoge=&year=1">1年以内<span></span></a></li> <li><a href="/?hoge=&year=2">2年以内<span></span></a></li> <li><a href="/?hoge=&year=3">3年以内<span></span></a></li> </ul> <script type="text/javascript"> $(".checkBoxListLink > li > a").each(function(i) { var url = $(this).attr("href"); $(this).children("span").load(url + " #sort_val", function(){ $(this).html($(this).find(">span").text()); }); }); </script>

###完成版:ajaxを使用した場合

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".checkBoxListLink > li > a").each(function(i) { var me=$(this); $.ajax({ url:me.attr('href'), type:"get", dataType:"html", success:function(data){ me.find("span").html($(data).find('#sort_val').text()); }, }); }); }); </script> <ul class="checkBoxListLink"> <li><a href="/?hoge=&year=1">1年以内<span></span></a></li> <li><a href="/?hoge=&year=2">2年以内<span></span></a></li> <li><a href="/?hoge=&year=3">3年以内<span></span></a></li> </ul>
kyunta👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

具体的なHTMLも持ってくるHTMLの仕様も書いていないのでなんと言えませんが
たとえば以下のような処理をいれてみてはどうでしょう?

javascript

1 $(".checkBoxListLink > li > a > span > span").each(function(i) { 2 $(this).parents('span').text($(this).text()); 3 }); 4

調整版

とりあえず、こんな感じでしょうか?
※追記:そのままコピペでも動くように追記しときます

javascript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function() { 4 $(".checkBoxListLink > li > a").each(function(i) { 5 var me=$(this); 6 $.ajax({ 7 url:me.attr('href'), 8 type:"get", 9 dataType:"text", 10 success:function(data){ 11 /* debug用 */ 12 console.log(data); 13 console.log($(data).text()); 14 me.find("span").text($(data).text()); 15 }, 16 error:function(xhr,err){ 17 console.log(err); 18 }, 19 }); 20 }); 21}); 22</script> 23<ul class="checkBoxListLink"> 24 <li><a href="/?hoge=&year=1">1年以内<span></span></a></li> 25 <li><a href="/?hoge=&year=2">2年以内<span></span></a></li> 26 <li><a href="/?hoge=&year=3">3年以内<span></span></a></li> 27</ul>

投稿2017/04/06 01:55

編集2017/04/06 06:30
yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

igaiga

2017/04/06 02:08

すみません。HTMLも入れました。ページ内のタグじゃなくて、loadで取得した値の方をいじりたいのですが、意味合いとしては同じでしょうか。
yambejp

2017/04/06 02:12

もどってくる値は「○○件」というテキストなのでしょうか? それともspan付きの整形されたhtmlなのでしょうか?
igaiga

2017/04/06 02:28 編集

戻ってくるのは<span id="sort_val">0件</span>です。タグなしの”0件”だけ持ってきたいです。
yambejp

2017/04/06 02:28

それと仕様がよくわからないのですが・・・ hrefで呼び出したデータをわざわざ自分のうしろのspanに埋め込むなら 呼び出されたあとはもうアンカーである必要はないのでは? アンカーをクリックしても○○件ってしか表示されないのですよね?
igaiga

2017/04/06 02:35 編集

リンク先の検索結果が何件表示されているかを取得したいと思います。アンカーである必要は無いといえば無いのですが、デザイン上の都合だけです。 クリックしたリンク先は検索結果画面なのですが、ページを開かずに何件あるか知りたいです。 完成イメージは下記のページの絞り込み検索部分です。 https://www.chintai-h.com/rent_search/%E6%9D%B1%E4%BA%AC%E9%83%BD/%E8%B1%8A%E5%B3%B6%E5%8C%BA
yambejp

2017/04/06 02:56

もってきたデータを直接loadせずにajaxでとりにいくとよいですね 調整版追記しておきました
igaiga

2017/04/06 03:56

ありがとうございます。とりあえずそのまま入れてみましたが動きませんでした。ajaxはじめて触るので勉強してみます。
yambejp

2017/04/06 04:37

動かないということなので、とりあえず省略していた部分も書いておきます エラーの場合はコンソールで確認できると思います。 動かないというのはどういう状態なのかかいてください
igaiga

2017/04/06 05:09

差し替えてクロームのコンソールを確認しましたが、何も表示されませんでした;;
yambejp

2017/04/06 05:19

成功していればコンソールにはなにも表示されないですよ 念の為これってファイルはローカルではなくhttpサーバーにアップしてテストしてますよね? また、リンクをクリックして飛んだ場合は0件と表示されるのでしょうか?
yambejp

2017/04/06 06:32 編集

debug用にsuccessにconsole.logを入れてみてください (サンプルに追記してあります) ちなみにリンク先は自サバ内ですよね? 他のサーバーを参照する場合はXSS対策に引っかかってるかもしれません
igaiga

2017/04/06 07:06

大変申しわけございません。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>を入れていませんでした。jquery.min.jsはあるから不要だと思ったけど、別物なんですね。。。 自サバ内です。 ページ内全てのテキストを拾ってきてしまいましたが動作しました。loadよりも読込が早いような気がします。
yambejp

2017/04/06 07:25

> jquery.min.jsはあるから不要 その認識であっていると思いますが、微妙に古いバージョンなのかもしれませんね
igaiga

2017/04/06 07:41

長い間お付き合い頂きましてありがとうございました。以下のように変更してほしいものだけ取得できました!既存のjquery.min.jsは1.11.0でした。。。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".checkBoxListLink > li > a").each(function(i) { var me=$(this); $.ajax({ url:me.attr('href'), type:"get", dataType:"html", success:function(data){ /* debug用 */ console.log(data); console.log($(data).text()); me.find("span").html($(data).find('#sort_val').text()); }, }); }); }); </script>
igaiga

2017/04/06 07:58

そうなんですね。。。ありがとうございました。
guest

0

下記でどうでしょうか?

javascript

1$(".checkBoxListLink > li > a").each(function(i) { 2 var url = $(this).attr("href"); 3 $(this).children("span").load(url + " #sort_val"); 4 $(this).find(">span").html($(this).find(">span>span").text()); 5}); 6

loadのcallbackで実行するように修正

javascript

1$(".checkBoxListLink > li > a").each(function(i) { 2 var url = $(this).attr("href"); 3 $(this).children("span").load(url + " #sort_val", function(){ 4 $(".checkBoxListLink > li > a > span").each(function(){ 5 $(this).html($(this).find(">span").text()); 6 }); 7 }); 8});

投稿2017/04/06 02:44

編集2017/04/06 03:07
yohe32

総合スコア76

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

igaiga

2017/04/06 02:53

ありがとうございます。入れてみましたが反応なしです。">span>span"を">span"や"span"にしてみましたが変わらず。。。l
yambejp

2017/04/06 02:57

たぶんloadは非同期処理になるので直後の作業は戻りを待たないと難しいのでは?
yohe32

2017/04/06 03:08

ご指摘の通りでした。 修正版を追記しました。 yambejpさんありがとうございます。
igaiga

2017/04/06 03:32

ありがとうございます。入れてみましたがやはり動きませんでした。2回目のeachの意図がわからなかったのですが、これは何をしているのでしょうか。
yohe32

2017/04/06 05:05

何かエラーはでていますか? 2回めのeachは、 ロード完了後なので、 <li><a href="/?hoge=&year=1">1年以内<span></span></a></li> のspanを一つずつ見て、タグを取り除く処理をしています。
igaiga

2017/04/06 05:16

なるほど!2回目のeachの箇所を下記のように変更したところ正常に動作しました!ありがとうございました。 $(this).each(function(){
yohe32

2017/04/06 05:18

良かったです。 お手数おかけしました。 ありがとうございます。
igaiga

2017/04/06 05:28

戻ってきた値は下記です。(イメージどおりです。) <li><a href="/?hoge=&year=1">1年以内</a><span>0件</span></a></li> たぶんeachはなくても大丈夫かなと思ったので下記のようにしても動作しました。 $(".checkBoxListLink > li > a").each(function(i) { var url = $(this).attr("href"); $(this).children("span").load(url + " #sort_val", function(){ $(this).html($(this).find(">span").text()); }); });
yohe32

2017/04/06 05:30

そうですね。 上記の場合、eachは不要です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問