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

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

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

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

jQuery

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

Q&A

解決済

3回答

959閲覧

jqueryをjavascriptに変換したい

MTON

総合スコア13

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/04/19 14:59

編集2020/04/19 15:10

以下jqueryのコードをjavascriptを使って同じconsoleが取れるように変換したいのですが、やり方がわかりません。
おそらくjquery同様、配列で取得しなければならないんだと思われますが、当方Javascript初心者にて、
方法がわからず、困っております。
お力添えお願いできませんでしょうか?

html

1 <div id="main"> 2 <ul> 3 <li><img src="images/91356751_cb249cee19_o.jpg" alt="タイトル00"></li> 4 <li><img src="images/91741178_f199a7d1a0_o.jpg" alt="タイトル01"></li> 5 <li><img src="images/91741350_e7b97aea57_o.jpg" alt="タイトル02"></li> 6 <li><img src="images/100379577_99beca500a_o.jpg" alt="タイトル03"></li> 7 <li><img src="images/100379776_c2239096f3_o.jpg" alt="タイトル04"></li> 8 <li><img src="images/107150612_93dfd5a6bb_o.jpg" alt="タイトル05"></li> 9 <li><img src="images/107545824_b0e6a31bbd_o.jpg" alt="タイトル06"></li> 10 <li><img src="images/109630285_eadfdb879f_o.jpg" alt="タイトル07"></li> 11 <li><img src="images/110439658_1a79abcb8a_o.jpg" alt="タイトル08"></li> 12 <li><img src="images/110439974_a9b1e47401_o.jpg" alt="タイトル09"></li> 13 </ul> 14 </div>

css

1 * { 2 margin: 0; 3 padding: 0; 4 } 5 6 #main { 7 width: 960px; 8 margin: 0 auto; 9 } 10 11 #main ul { 12 list-style: none; 13 } 14 15 #main ul li { 16 float: left; 17 width: 230px; 18 margin: 5px; 19 } 20 21 #main li img { 22 width: 230px; 23 height: 167px; 24 display: none; 25 opacity: 0; 26 } 27 28 #loading { 29 position: absolute; 30 top: 50%; 31 left: 50%; 32 margin: -16px 0 0 -16px; 33 }

jquery

1 <script> 2 3 //jquery 4 $(function () { 5 var srcList = []; 6 function init() { 7 $("#main").find("img").each(function (index) { 8 srcList[index] = $(this).attr("src"); 9 console.log(srcList) 10 }); 11 }; 12 init(); 13 }); 14 15 </script>

↓jQueryのコンソール画面(javascriptを使ってこれと同じものを取得したい)
イメージ説明

//試してみたこと

javascript

1 (function () { 2 var srcList = []; 3 function init() { 4 var img = document.getElementsByTagName("img"); 5 for (let i = 0; i < img.length; i++) { 6 var imgSrc = img[i].getAttribute('src'); 7 console.log(imgSrc) 8 9 } 10 }; 11 init(); 12 })();

↓Javascriptのコンソール画面

イメージ説明

返信をいただいて、配列で入れてみました

javascript

1 (function () { 2 function init() { 3 var img = document.getElementsByTagName("img"); 4 for (let i = 0; i < img.length; i++) { 5 var imgSrc = img[i].getAttribute('src'); 6 var array = [imgSrc] 7 console.log(array) 8 } 9 }; 10 init(); 11 })();

イメージ説明

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

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

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

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

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

guest

回答3

0

以下のように修正してみるといかがでしょうか?

diff

1 (function () { 2 function init() { 3+ var array = []; 4 var img = document.getElementsByTagName("img"); 5 for (let i = 0; i < img.length; i++) { 6 var imgSrc = img[i].getAttribute('src'); 7- var array = [imgSrc] 8+ array.push(imgSrc); 9 console.log(array) 10 } 11 }; 12 init(); 13 })();

投稿2020/04/19 15:26

jun68ykt

総合スコア9058

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

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

0

取るところ自体はそれで問題ないのですが、変更後のコードではにsrcListへ詰める操作がなくなっています。

投稿2020/04/19 15:03

maisumakun

総合スコア145121

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

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

MTON

2020/04/19 15:12

ご返信ありがとうございます。 配列にしてみたのですが、jqueryのコンソール画面のようにループごとに画像がふえていくようにするには、どうすればよいのでしょうか?
guest

0

ベストアンサー

とりあえず使われていない変数を使えばよいのでは。

js

1srcList[i] = img[i].getAttribute('src'); 2console.log(srcList)

投稿2020/04/19 15:03

kei344

総合スコア69364

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

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

MTON

2020/04/19 15:12

ご返信ありがとうございます。 一旦、[]を使って、配列にしてみたのですが、jqueryのコンソール画面のようにループごとに画像がふえていくようにするには、どうすればよいのでしょう?
kei344

2020/04/19 15:22

提示しているコードになぜ差し替えないのでしょうか。
MTON

2020/04/19 15:24

ご返信ありがとうございます。 勘違いしておりました。 解決しました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問