jQuery で画像URLの一部を削除したいです

jQueryでタグの一部を削除したいのでご教授下さい。
【html】

<div class="main_box">
<ul class="ichiran">

<li>


<!-- ▽商品画像 -->
<a target="_top" href="store-g_ab-874500.html" >
<img src="/img/store-g_ab-874500_25.jpg" class="im_pict" />
</a>
<!-- △商品画像 -->


<!-- ▽商品名 -->
<p class="itemname">

<a target="_top" href="store-g_ab-874500.html">

バッグ AB-H0851...

</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="im_price">2,580円 （税込）</p>
<!-- △販売価格 -->

</li>

<li>


<!-- ▽商品画像 -->
<a target="_top" href="store-g_ab-882700.html" >
<img src="/img/store-g_ab-882700_25.jpg" class="im_pict" />
</a>
<!-- △商品画像 -->


<!-- ▽商品名 -->
<p class="itemname">

<a target="_top" href="store-g_ab-882700.html">

バッグ AB-H1021...

</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="im_price">2,980円 （税込）</p>
<!-- △販売価格 -->

</li>

<li>


<!-- ▽商品画像 -->
<a target="_top" href="store-g_ab-853400.html" >
<img src="/img/store-g_ab-853400_25.jpg" class="im_pict" />
</a>
<!-- △商品画像 -->


<!-- ▽商品名 -->
<p class="itemname">

<a target="_top" href="store-g_ab-853400.html">

リュック AB-B019...

</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="im_price">3,480円 （税込）</p>
<!-- △販売価格 -->

</li>

<li>


<!-- ▽商品画像 -->
<a target="_top" href="store-g_ab-853500.html" >
<img src="/img/store-g_ab-853500_25.jpg" class="im_pict" />
</a>
<!-- △商品画像 -->


<!-- ▽商品名 -->
<p class="itemname">

<a target="_top" href="store-g_ab-853500.html">

リュック AB-B093...

</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="im_price">3,780円 （税込）</p>
<!-- △販売価格 -->

</li>

</ul>
</div>

※jQueryでこの中の画像URLの一部「store-g_」を削除したい場合はどうすればいいですか？
/img/store-g_ab-853500_25.jpg
↓
/img/ab-853500_25.jpg

超初心者なので、編集が出来ません。
$(function(){
~
});
までの間を教えて頂けたら幸いです。

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

kei344

2017/06/30 11:44

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答1件

ベストアンサー

できるだけ、自分で考えてみるといいと思います。
考え方としては、分割して考えることです。

画像をすべて取得する
すべての画像に対してループする。
ひとつの画像のsrc属性を取得する。
src属性に含まれる「store-g_」を""(空文字）で置換する。
置換した文字列をsrc属性に設定する。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
9    <title>Document</title>
10</head>
11
12<body>
13    <div class="main_box">
14<ul class="ichiran">
15
16<li>
17
18
19<!-- ▽商品画像 -->
20<a target="_top" href="store-g_ab-874500.html" >
21<img src="/img/store-g_ab-874500_25.jpg" class="im_pict" />
22</a>
23<!-- △商品画像 -->
24
25
26<!-- ▽商品名 -->
27<p class="itemname">
28
29<a target="_top" href="store-g_ab-874500.html">
30
31バッグ AB-H0851...
32
33</a></p>
34<!-- △商品名 -->
35
36<!-- ▽販売価格 -->
37<p class="im_price">2,580円 （税込）</p>
38<!-- △販売価格 -->
39
40</li>
41
42<li>
43
44
45<!-- ▽商品画像 -->
46<a target="_top" href="store-g_ab-882700.html" >
47<img src="/img/store-g_ab-882700_25.jpg" class="im_pict" />
48</a>
49<!-- △商品画像 -->
50
51
52<!-- ▽商品名 -->
53<p class="itemname">
54
55<a target="_top" href="store-g_ab-882700.html">
56
57バッグ AB-H1021...
58
59</a></p>
60<!-- △商品名 -->
61
62<!-- ▽販売価格 -->
63<p class="im_price">2,980円 （税込）</p>
64<!-- △販売価格 -->
65
66</li>
67
68<li>
69
70
71<!-- ▽商品画像 -->
72<a target="_top" href="store-g_ab-853400.html" >
73<img src="/img/store-g_ab-853400_25.jpg" class="im_pict" />
74</a>
75<!-- △商品画像 -->
76
77
78<!-- ▽商品名 -->
79<p class="itemname">
80
81<a target="_top" href="store-g_ab-853400.html">
82
83リュック AB-B019...
84
85</a></p>
86<!-- △商品名 -->
87
88<!-- ▽販売価格 -->
89<p class="im_price">3,480円 （税込）</p>
90<!-- △販売価格 -->
91
92</li>
93
94<li>
95
96
97<!-- ▽商品画像 -->
98<a target="_top" href="store-g_ab-853500.html" >
99<img src="/img/store-g_ab-853500_25.jpg" class="im_pict" />
100</a>
101<!-- △商品画像 -->
102
103
104<!-- ▽商品名 -->
105<p class="itemname">
106
107<a target="_top" href="store-g_ab-853500.html">
108
109リュック AB-B093...
110
111</a></p>
112<!-- △商品名 -->
113
114<!-- ▽販売価格 -->
115<p class="im_price">3,780円 （税込）</p>
116<!-- △販売価格 -->
117
118</li>
119
120</ul>
121</div>
122    <script>
123        $(function () {
124            $('img').each(function() {
125                let src = $(this).attr('src');
126                src = src.replace('store-g_', '');
127                $(this).attr('src', src);
128            });
129        });
130    </script>
131</body>
132
133</html>

投稿2017/06/30 12:27

退会済みユーザー

総合スコア0

honeybee

2017/07/03 09:31

ありがとうございます！解決しました！まだ勉強の初期段階で、ネットで調べたものを自分なりにあてはめて、 .attr() .replace() .split() にしてみたり、その他色々試したのですが、根本がまだ勉強不足の為、ソースをのせてとんちんかんな質問をして聞きたい事が聞けないといけないと思ってしまいました。次回は勉強の為、ソースをのせて質問したいと思います。大変助かりました。

行動規範の内容に同意します