jQuery ライブラリ 総合質問所 vol.4

1 ：Name_Not_Found：2014/05/17(土) 17:00:26.40 ID:???.net

jQuery および jQuery UI ライブラリの使い方や、
jQueryプラグインの作り方を質問するスレッドです。

こんなプラグインありませんか？と聞くスレではありません。
jQueryを使って作る側の質問スレです。
探すのは自分で探してください。ろくにサポートもされてなさそうな
野良プラグインの使用はおすすめしません。

前スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.net/test/read.cgi/hp/1369444026/

jQuery以外の話題はこちらへ

+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.net/test/read.cgi/hp/1399072595/

937 ：Name_Not_Found：2015/12/22(火) 23:47:37.01 ID:pBUWf4Ut.net

出力結果のイメージを書け

938 ：Name_Not_Found：2015/12/22(火) 23:48:19.45 ID:pBUWf4Ut.net

あと「どうやりますっけ？」じゃねえよアホ
知ってたけど忘れましたみたいな言い方すんな

939 ：Name_Not_Found：2015/12/22(火) 23:53:52.23 ID:???.net

>>936
$("#h").html($("a").map(function() {
return this.href;
}).get().join("<br>"));

940 ：936：2015/12/23(水) 00:12:13.75 ID:???.net

>>938
すいませんすいませんすいません

>>939
うおすげ簡潔。
ありがとうございます！！！！！

941 ：Name_Not_Found：2015/12/23(水) 00:15:06.76 ID:???.net

（jQueryプラグインを作る時以外）eachを使ったら負けだと思え

942 ：Name_Not_Found：2015/12/23(水) 00:20:00.05 ID:???.net

>>941
それはなぜですか？
便利なのでよく使ってしまうんですが

943 ：Name_Not_Found：2015/12/23(水) 00:24:56.28 ID:???.net

ちなみに最新ブラウザのアロー関数を使ったらこうな

$("#h").html($("a").map((i, e) => e.href).get().join("<br>"));

944 ：Name_Not_Found：2015/12/23(水) 00:33:35.58 ID:???.net

>>942
jQueryは、要素を一つづつ操作するライブラリではなく、
「CSSセレクタにマッチした0個以上の要素の塊」に対して操作するライブラリだから。
jQueryが関数型風ライブラリと言われる理由の一つでも有る。

eachを使うと要素を一つづつ操作することになる。
それはjQueryの本来の考え方に合っていない。

これはCSSの考え方にも適合している。
CSSはセレクタにマッチした要素に対して装飾を行うもの。
1つずつ操作をするという手続き型的なやり方はしない。

jQueryプラグインが例外なのは、そもそもプラグインというのは
素のJavaScriptを使ってjQuery風なメソッドを作るものだから仕方がない。

945 ：Name_Not_Found：2015/12/23(水) 01:19:03.09 ID:???.net

>>944
なるほどjQueryの考え方からすると本筋ではないということですか
本筋から逸れたやり方をすることで
処理速度やコードの可読性が低下したりといった実害はありますか？

また、セレクタでピックアップした要素のひとつひとつに
操作を施したい場合、よりよい方法とはどんなものでしょう？

946 ：Name_Not_Found：2015/12/23(水) 01:23:57.95 ID:???.net

> 処理速度やコードの可読性が低下したりといった実害はありますか？

「うおすげ簡潔」が答えだろう。jQueryのやり方だと簡潔になる。

> また、セレクタでピックアップした要素のひとつひとつに
> 操作を施したい場合、よりよい方法とはどんなものでしょう？
eachを使わない。

947 ：Name_Not_Found：2015/12/23(水) 01:36:17.89 ID:???.net

実害はないということですか
それどころか簡潔な記述にできると

eachを使わない場合forループをまわすか
そもそもループを必要としない処理方法を考えるかですね
（上のmapの例のように）

しかし私の理解不足もあるのかもしれませんが
今後も気軽にeachを使いつづけてしまいそうな気がします・・・

948 ：Name_Not_Found：2015/12/23(水) 01:39:19.31 ID:???.net

すみません、書き込んだあとに気が付きましたが
>>946を読み誤って逆の解釈をしてました

よろしければeachを使わない簡潔な記述の例を教えてください

949 ：Name_Not_Found：2015/12/23(水) 01:47:38.08 ID:???.net

eachを使わなけれいいだけだろう。
例？

$('a').hide()

はい。おしまい

950 ：Name_Not_Found：2015/12/23(水) 02:03:11.22 ID:???.net

俺も気にせずふつうに使ってるがダメなのか？
>>949は参考にならんし・・・

951 ：Name_Not_Found：2015/12/23(水) 03:37:13.99 ID:???.net

>>926
jQueryのイベントバブリングと、
「return false;」「e.stopPropagation();」「e.preventDefault();」について
ttp://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c

return true; にしたら、親要素へイベントが伝わるのでは？

952 ：Name_Not_Found：2015/12/23(水) 14:21:22.49 ID:???.net

Windows7,8,10でDesktopのwidthとheightを取りたいのですが、
Startボタンがあるツールバーの部分は除いた大きさを取れますか？

953 ：Name_Not_Found：2015/12/23(水) 15:13:05.26 ID:???.net

無理。そもそもブラウザの外の情報は取れないと考えるべき

954 ：Name_Not_Found：2015/12/23(水) 16:20:16.20 ID:???.net

>>953
横からすまん。
screen.Height/screen.widthではダメなの？

955 ：Name_Not_Found：2015/12/23(水) 16:23:55.06 ID:???.net

>>954
それでいいよ

956 ：Name_Not_Found：2015/12/23(水) 17:04:33.70 ID:???.net

>>952
つ screen.availHeight

957 ：Name_Not_Found：2015/12/23(水) 17:06:59.39 ID:???.net

>>956
ありがとうございました

958 ：Name_Not_Found：2015/12/23(水) 18:36:58.81 ID:???.net

>>951
レスありがとうございました。
trueでもだめでした。

959 ：Name_Not_Found：2015/12/23(水) 20:49:32.23 ID:???.net

<input type="radio" name="name1" id="radio_id_10" /><label for="radio_id_10">text10</label>
<input type="radio" name="name1" id="radio_id_11" /><label for="radio_id_11">text11</label>
<input type="radio" name="name1" id="radio_id_12" /><label for="radio_id_12">text12</label>
_ _
<input type="radio" name="name2" id="radio_id_20" /><label for="radio_id_20">text20</label>
<input type="radio" name="name2" id="radio_id_21" /><label for="radio_id_21">text21</label>

例えば、こういう時に、idとそのlabelの文字を以下のように配列に取り出したいのですが、

[
　[
　　{id: "radio_id_10", label:"text10"},
　　{id: "radio_id_11", label:"text11"},
　　{id: "radio_id_12", label:"text12"}
　],
　[
　　{id: "radio_id_20", label:"text20"},
　　{id: "radio_id_21", label:"text21"}
　]
]
forループを使う方法でゴチャゴチャ書けば出来そうなのですが、jQueryっぽくスマートに一行で書く方法を教えて下さい。

960 ：Name_Not_Found：2015/12/24(木) 23:45:42.41 ID:???.net

jquery uiで作ったdialogは親ウィンドウの範囲外に出られないですが、どうにかして外に出す方法はありますか？

961 ：Name_Not_Found：2015/12/25(金) 02:02:42.65 ID:???.net

>>959
この前のやつか？ まずは自分で考えろ。
あとjQueryは一行で書くものとか俺は言ってないからな。

962 ：Name_Not_Found：2015/12/25(金) 02:09:23.87 ID:???.net

>>959
まあ可哀想だからヒントをやろうｗ

var names = ・・・
function foo(i, el) {・・・}
var ret = $.map(names, function(name) {
return [$('[name="' + name + '"]').map(foo).get()];
});

console.log(JSON.stringify(ret, null, 2))

963 ：Name_Not_Found：2015/12/25(金) 03:03:32.12 ID:???.net

>>962
ちなみに
その質問者はこないだ回答もらた俺じゃないよ。

964 ：Name_Not_Found：2015/12/25(金) 03:07:01.51 ID:???.net

親戚の息子は親の敷地の範囲外に出られないですが、どうにかして外に出す方法ありますか？

965 ：Name_Not_Found：2015/12/25(金) 08:35:06.51 ID:???.net

>>962
偉そうに言うくせに一行で書けないのかよ。使えない奴だ

966 ：Name_Not_Found：2015/12/25(金) 08:49:21.92 ID:???.net

>>965
横に長くなってもいいなら一行で書けるぞ？

var ret = $.map(・・・<namesの中身>・・・, function(name) { return [$('[name="' + name + '"]').map(・・・<fooの中身>・・・).get()]; });

処理が多くなれば、それだけコードは増えるのは当然なわけで
見づらくなるだけなんだが。

967 ：Name_Not_Found：2015/12/25(金) 08:55:13.59 ID:???.net

初心者は一行で書くことが偉いとか思ってるからな（笑）

968 ：Name_Not_Found：2015/12/25(金) 10:43:11.55 ID:???.net

>>960
同じような質問以前出てたような

969 ：Name_Not_Found：2015/12/25(金) 10:55:54.94 ID:???.net

>>968
出来るのかどうか思い出せよ

970 ：Name_Not_Found：2015/12/25(金) 15:44:49.06 ID:???.net

出来ません！

971 ：Name_Not_Found：2015/12/25(金) 22:21:07.98 ID:???.net

>>969
>>970
出来るだろ、上くらい見なよ

972 ：Name_Not_Found：2015/12/25(金) 23:50:36.17 ID:???.net

>>971
出来ないだろ。
上の方法では確かに移動範囲が広がるが、それはdialogが親ウインドウの枠で
制限されなくなるが、はみ出した部分は表示されない。
>>960 がやりたいのは、親ウインドウの外に自由に移動したいんだろ。
それは無理。

973 ：Name_Not_Found：2015/12/26(土) 00:22:01.34 ID:???.net

uguiならマスク外すだけでは

974 ：Name_Not_Found：2015/12/26(土) 00:23:30.75 ID:???.net

ごめん>>973はぼけてて別スレと勘違いしてた
スルーで

975 ：Name_Not_Found：2015/12/27(日) 23:35:40.94 ID:???.net

$(this)はどう言う意味になりますか？

976 ：Name_Not_Found：2015/12/28(月) 03:07:38.88 ID:???.net

thisが何を指してるかによって意味が変るんじゃないかな

977 ：Name_Not_Found：2015/12/28(月) 15:17:12.46 ID:???.net

JSのthisは、文脈でコロコロ変わるから、ややこしいことで有名

thisの使い方を、調べた方がいい

978 ：Name_Not_Found：2015/12/28(月) 18:39:50.13 ID:???.net

まあでもイベントハンドラ内かなとは思うけど…様子見

979 ：Name_Not_Found：2015/12/30(水) 05:10:15.47 ID:???.net

>>975
「それ」もしくは「その要素」


「コップ」を持ってきてください。
そして「それ」に水を入れてください。

980 ：Name_Not_Found：2015/12/30(水) 10:59:48.46 ID:???.net

DOMの要素に対してならjQueryの各種の操作が出来ますが、
$.get("page1.html", function(data) {..})
でdataに読み込んだpage1.htmlに対して同じような操作をしたいのですが無理ですか？
例えばpage1.htmlの中にある button だけを取り出したいとか。
あるいはidを指定して検索して、その属性を取り出すとか。

981 ：Name_Not_Found：2015/12/30(水) 14:40:42.47 ID:???.net

$(html).findとかでできるだろ

982 ：Name_Not_Found：2015/12/30(水) 16:43:20.26 ID:???.net

>>981
ヒントありがとうございました。
findでは出来なかったのですが、filterで出来ました。
でもfindとfilterの違いが分かりません。

983 ：Name_Not_Found：2015/12/30(水) 17:05:45.08 ID:???.net

findみつける
filter見つけたものを絞り込む

984 ：Name_Not_Found：2015/12/31(木) 11:00:03.73 ID:???.net

$(document).ready の中で
$.getScript('xxx.js')
を実行した場合、それが完了するタイミングと、
$(window).load
が実行されるタイミングの関係はどうなります？
少し試したら、
xxx.jsの実行が終わってから $(window).loadが実行されるようなのですが、
そういう保証はありますか？
つまり、xxx.jsの中で
var a=1;
が有った時にaを$(window).load以降で利用したいのですが。

985 ：Name_Not_Found：2015/12/31(木) 13:00:58.51 ID:???.net

> そういう保証はありますか？
ない


モジュールの依存関係の話なら
RequireJSやWebPackを使え

986 ：Name_Not_Found：2015/12/31(木) 13:25:46.10 ID:???.net

質問ですがお願いします。
ページ末付近のボタンをクリックして、あるライブラリを実行させます。

<button id="syori">処理１</button>
$('#syori').click(function(){　ライブラリなど　});

正常動作後ページ頭に一瞬で移動してしまいます。
ライブラリなしでしたら飛ばずにその画面位置を保ちます。
いくつかのブラザでも同じ挙動をします。

ボタンではなくaタグである場所に移動させると
一瞬#anへ飛んで一瞬でページ頭に戻ってしまいます。

<p id="syori"><a href="#an">処理１</a></p>

そこでfunction内だけ、ページ頭へ移動せず、または#anに留まるような
処置はどうしたらいいでしょうか？