$.ajaxで取得したhtml内のimgのsrc属性を変更したい

Question

僕はWEBデザイナーとしてお仕事をしています。
今、jqueryで特定のURLから特定のコンテンツ（お客様の声など）を取得し、サイト上に掲載するような機能を実現したいと思っています。
jqueryに関してはあまり得意ではないのですが、$.ajaxという関数を使用し、特定のURLのhtmlを取得し、表示するところまでは実現できました。ただ、取得したimgタグのsrc属性も変更しなければ掲載先のサイト上に取得した画像が表示されないようなので、自分で考えて下記のようにコーディングしてみましたが、うまくいきませんでした。

※URLはすべてダミーです

$.ajax({
url: 'http://example.com/', //目的のアドレス
cache: false,
dataType:'html',
success: function(html){
var voice_cont1 = $(html).find('#voice'); 
voice_cont1.find('img').each(function () {
$(img).attr('src', 'http://example_1.com/wp/wp-content/themes/theme1/images/');
}); 
$('#voice_1').append(voice_cont1);
}
});

要するに$.ajaxにて取得した目的のアドレスのhtmlの中にあるid="voice"のdiv要素を変数voice_cont1に代入して、さらにvoice_cont1内のimgのsrc属性を変更しようとしてるのですがうまくいかないのです。

どなたかjqueryに詳しい方、修正の方法や上記機能の実現方法をご教示頂ければ、と思います。

ちなみに下記のようなコードを書いてみましたがやはりだめでした。

$.ajax({
url: 'http://example.com/', //目的のアドレス
cache: false,
dataType:'html',
success: function(html){
var voice_cont1 = $(html).find('#voice');
voice_cont1('img').attr('src').replace('images/' , 'http://example_1.com/wp/wp-content/themes/theme1/images/'); 
$('#voice_1').append(voice_cont1);
}
});

jqueryに対する基本的な知識が自分にはないように思うのですが、ご助言頂ければ幸いです。
宜しくお願いします。

Comments

[kei344]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Y.H.]

コードで使用されている例示用のURLのドメインは「example.com」「example.jp」およびこれらのサブドメインなど実在しないことが保証されているものを使用ください

Answer 1

• voice_cont1 を replace しようとしていますが、そこは不要ではありませんか?( attr() でセットする)
• voice_cont1('img') と記述していますが、そこは要素を検索して each でセットする部分ではありませんか?

気になったのは上２点です

---

attr(attributeName, attributeValue) で新しい値をセットできます

voice_cont1('img') に関しては:

$(voice_count1).find('img').each(function(index){
  $(this).attr('src', 'http://example.com/where/to/img/path/img.jpg');
});

と、一度 ajax で取得・検索した #voice 要素群から更に、 <img/> 要素を検索・属性のセットをすると、うまく動作してくれるかもしれません
(既存の属性値にあるドメイン・パス部分を書き換える必要があれば、もう少しコードを書く必要があるでしょう)

以上、何か参考になれば幸いです

Links

• .attr() | jQuery API Documentation
• .each() | jQuery API Documentation

Comments

[silver_mouse2]

回答ありがとうございます！
頂いたコードを使用してみたら、目的のURLのimgタグのsrc属性が変更された状態で表示されました！頂いたコードのような書き方で書けば良かったのですね。

ただ、仰って頂いたように目的のURLのimgのファイル名までのパスを掲載サイトで表示されるように一括で変換するには、もう少しコードを書く必要がありそうでした。
もう少し考えてみます！