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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

295閲覧

stop(jQueryUI)内にあるメソッドを外部化したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/13 07:43

編集2017/10/13 08:29

###前提・実現したいこと
jQueryUIのDraggableを使用しています。

以下のソースコードのstop: function () {}内に.each()を設置しているのですが、stopの度に.each()が動作するのはあまり良くないのではないか、と考えています。

そこで、stop: function () {}の外に.each()を設置しながらも、stop: function () {}の中から変数$elmを呼び出せるようにしたいのですが、可能でしょうか?

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

###該当のソースコード

javaScript

1$($element).each(function () { 2 $(this).draggable({ 3 drag: function () { 4 var $hogehoge = $('#hogehoge'); 5 }, 6 7 stop: function () { 8 $('#hoge').each(function () { 9 var $elm = $(this).children('.items'); 10 var $test = $(this).children('.items').data('aaa'); //追記部分 11 console.log($elm); //追記:eachでなくとも取得できる 12 console.log($test); //追記:data-aaa="10"のみ取得できる 13 }); 14 }, 15 }); 16});

html

1<section id="hoge"> 2 <div class="items" data-aaa="10">あああ</div> 3 <div class="items" data-aaa="20">いいい</div> 4 <div class="items" data-aaa="30">ううう</div> 5 <div class="items" data-aaa="40">えええ</div> 6 <div class="items" data-aaa="50">おおお</div> 7</section>

※data-aaaを追記いたしました。

###追記
masaya_ohashi様のご指摘の通り、$elmの部分は.each()でなくとも取得できましたが、その下にある.itemsdata-aaaを取得しようとすると、はじめの行<div class="items" data-aaa="10">あああ</div>のみ取得できる形となってしまいます。

そうではなく、すべての.itemsdata-aaaを取得したい場合、どのようにすれば良いでしょうか。

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

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

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

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

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

masaya_ohashi

2017/10/13 07:57

#hogeの要素は複数個存在するのですか?
退会済みユーザー

退会済みユーザー

2017/10/13 08:03

#hogeはひとつですが、その下にclass="items"が複数個存在します。htmlを追記いたしましたので、そちらをご参照いただければと存じます。説明が足らず申し訳ございません。よろしくお願いいたします。
masaya_ohashi

2017/10/13 08:33

stopの際に、要素内の.itemsのdata-aaaが配列で取得したい、という要望で認識はあっていますか?
退会済みユーザー

退会済みユーザー

2017/10/13 08:38

はい、そのような認識で合っております。お手数をお掛けいたします。
masaya_ohashi

2017/10/13 08:41

.itemsが動的に増減したり、data-aaaが動的に書き換わることはありますか?
退会済みユーザー

退会済みユーザー

2017/10/13 08:45

.itemsは頻繁ではありませんが、増減する可能性があるものです。data-aaaは基本的に固定の値となります。
guest

回答1

0

ベストアンサー

なぜ「stopの度に.each()が動作するのはあまり良くないのではないか」と思ったのかわかりませんが、やろうとしていることを実現するには.each()しか方法はないです。なんとなく良くない、という非合理な理由であればそれは無視してよいです。

javascript

1 stop: function () { 2 var list = []; 3 var $elm = $('#hoge > .items'); 4 $elm.each(function () { 5 var $test = $(this).data('aaa'); 6 list.push($test); 7 }); 8 console.log(list); // data-aaaの配列[10, 20, 30, 40, 50] 9 },

#hogeの内容が動的に変わらないのであれば、createの際に取ってしまって、stopで再利用する形もよいかもしれません。

javascript

1 create: function () { 2 var list = []; 3 var $elm = $('#hoge > .items'); 4 $elm.each(function () { 5 var $test = $(this).data('aaa'); 6 list.push($test); 7 }); 8 $(this).data('list', list); 9 }, 10 stop: function () { 11 var list = $(this).data('list'); 12 console.log(list); // data-aaaの配列[10, 20, 30, 40, 50] 13 },

以下の回答は質問文編集前の内容です

コードとHTMLを見る限り、現状eachを使う理由がありません。これでいいです。

javascript

1 2 stop: function () { 3 var $elm = $('#hoge > .items'); 4 console.log($elm); 5 },

投稿2017/10/13 08:07

編集2017/10/13 08:47
masaya_ohashi

総合スコア9206

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

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

退会済みユーザー

退会済みユーザー

2017/10/13 08:34

ご回答ありがとうございます。なるほど、この場合は特にeachを使う必要なく取得できました(勉強になります)。 ただ度々説明不足で申し訳ないのですが、本来の目的としては.itemsにあるdata属性を取得したかったのです。しかし、うまく取得が出来ません。 再度、一部内容を修正致しましたので、そちらを拝見いただければと存じます。 何卒、よろしくお願い致します。
退会済みユーザー

退会済みユーザー

2017/10/13 09:00

ありがとうございます!ご案内いただいた内容で取得できました。.itemsの個数が多い場合、stopの度にeachが動くのは処理的に良くないのかと思ったからです。今回は(createとstopとを分けた方が理解しやすいという点で)後者の方法を採用させていただきましたが、その点に関して特に問題のないようでしたら、今後前者の方法も検討していきたいと思います。ありがとうございました。
masaya_ohashi

2017/10/13 09:23

itemsの個数が数十個程度ならほとんど気にならない速度だと思うので、そこまで神経質にならなくていいと思いますよ。
退会済みユーザー

退会済みユーザー

2017/10/13 09:30

なるほど、あまり気にしすぎなくても良いということで安心いたしました。ご丁寧に説明頂きありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問