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

JavaScriptライブラリ を自ら学ぶ人のための質問スレッドです。

■質問を書く上で
(1) 質問にならない投稿はご遠慮ください。(煽り、コード制作依頼など)
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 長い間連続して質問する場合にレス番を名前にしてあれば、質問の流れが回答者に伝わりやすくなります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。質問テンプレートを活用してみてください。

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【ライブラリ】使用しているライブラリ名を記入してください。(ex: jQuery)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

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

■関連スレ
+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.net/test/read.cgi/hp/1399072595/
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
JavaScript Tips コレクション
http://toro.2ch.net/test/read.cgi/hp/1070611524/
1行javascriptプログラミング　　　
http://toro.2ch.net/test/read.cgi/hp/1066750037/
【node.js】サーバサイドjavascript 2【Rhino】
http://toro.2ch.net/test/read.cgi/tech/1358937029/

■各種ライブラリ
jQuery API Documentation
http://api.jquery.com/
jQuery Mobile API Documentation
http://api.jquerymobile.com/
prototype.js
http://prototypejs.org/
API Docs - YUI Library
http://yuilibrary.com/yui/docs/api/
Underscore.js
http://underscorejs.org/

プログラミング初心者な質問で申し訳ないのですが
jQueryで配列を複数個呼び出すときってどう書けばよいのでしょうか？

[0]と[2]だけを呼び出したいのですが・・
var arr = $('#meta').toArray();
$('p').append(arr[0][2]);←こんな感じで呼び出したいのですが

>>3
$('p').append(arr[0], arr[2]); // 最も、arr[2] は undefined だけど

>>4
できました！ありがとうございます！！

＞var arr = $('#meta').toArray();
はvar arr = $('#meta').find('a').toArray();の間違いです。失礼しました

>>5
ついでにいうと toArray() も不要

>>6
うおっ。確かにｗ　重ねてありがとうございます！

nikkeiモバイルにアクセスしたら、
「データベースサイズを増やしますか」って聞かれたんだけど
http://news.mynavi.jp/articles/2013/06/03/iphone_why67/

これはLocalStorageを5MBから10MBに拡張できるってことだよね？
これをJS上で明示的にユーザーに問い合わせるにはどうすればいいんでしょう？

jQueryで$('.class名')と指定するのは
推奨されないと聞いた事あるのですが、
要素が同じ場合は、$('要素名').filter('.class名')と書けばよいですか？

>>9
推奨されない理由を調べて
それから考えよう。

>>8
問い合わせフォームのこと？
JSなら、document.forms

jQueryなら、フォーム要素を使う
jQueryの方が簡単

>>11
すみません、聞き方が悪かったです。
標準だとたしかLocalStorageが5Mしか容量ないものを
10MBまで拡張させる方法が知りたいということです。

>>12
ブラウザ個別の機能では？例えば Chrome API の storage では容量を変えられる。

>>13
そんなAPIがあるんですね。ありがとうございます。

bootstrapでpopoverがmousedownのタイミングで閉じてほしいのですが
どうすればいいですか？

http://getbootstrap.com/javascript/

ここのdropdownのサンプルを見るとクリックで閉じるのはデフォルト動作のようです
しかし本来ドロップダウンはmousedownで閉じられるべきもので、
OSもそのようになっています
どうしたら・・

Bootstrapにその機能がないなら諦めとけ

Bootstrapを使うときは、Bootstrapで用意された機能や
デザインをそのまま受け入れること。

下手に自分のこだわりを通そうとするとハマる。

jqueryで「指定したクラスを持つ子要素を持つdiv」を指定する方法を教えて下さい

>>18
http://zng.info/specs/css3-selectors.html#child-combinators
http://api.jquery.com/parents/

ありがとうございました

>>16
gruntが使えるならソースコードの方をダウンロードしてdropdown.jsを書き換えてからjsをビルドする。
使えないならミニファイされてないjsを書き換えて使えば良いんじゃない？

表を作るライブラリみたいのありませんか？
カラムで並び替えたりできるやつです

>>22
http://codezine.jp/article/detail/6636

>>23
ありがとうございます

jqueryでドルを単体で使った場合、ドルは何を指し示しているんですか？
こんな感じ↓名前空間？

$.getJson()

>>25
http://api.jquery.com/jQuery/

http://jsbin.com/doyakubo/1/edit

�@をSample.html�AをSample.cssと名前をつけて同一フォルダに保存したけど動作しない。
原因わかる人いないかな？　テキストエディットとsafariを使ってます。

>>27
動いたけど
http://jsbin.com/doyakubo/4

JSBinの使い方間違ってるんじゃない？
テンプレにもあるように http://validator.w3.org/ ぐらいチェックして
それからライブラリの質問じゃないからスレ違い

>>28
おっと、それは失礼した

domの作成をjqueryでやるメリットは何でしょうか？
作成に限って言えば、生JSで作成してもコーディング量、簡便さなど大差ない気がします

>>30
通常作成するだけじゃ終わらないからです。
DOMを作成したら、そのあとイベントを割り当てたりするでしょう？

>>30
ノード作成をjQuery出やらないほうが便利な場面もあるし、jQueryでなければならない必然性はない
DOM APIに慣れるとjQueryが使いがたいと思う場面は確かにある

DOM APIの何が嫌かって、スペルが長いことなんだよな。

document.getElementById('a').addEventListener('click', function() {});

$('#a').on('click', function() {});
もしくは
$('#a').click(function() {});

これだけでもDOM APIは嫌になるが、jQueryはさらに
セレクタをクラス名にするなどして、当てはまる要素全てに
イベントつけられるし。

DOMを扱う行が10行を超えたら、もうjQueryを使ったほうがいいと思う。

>>33
それDOMのだと、もし#aの要素が無かったら…とか考えてしまう

>>34
それが健全な考え方だろう
しかし、ないときにエラーにならないのはもっと困る

jQueryはエラーにならないのか
これは面倒くさいな...

jQuery('#hogehoge').on('click', lisetener); // #hogehogeが存在しなくてもエラーにならない

存在しないことが想定されている場合には、nullチェックしなくていいからjQueryが楽
想定外ならjQueryは発見が遅れるって感じ

イベント定義するなら該当要素が存在する事を保証したロジックにする
しかし、それでも想定ミスで存在しなかったのならエラーになるのが望ましい
そうでないのなら、要素の存在有無でコードを条件分岐させるのが望ましい
…と俺は思う

>>35
いやそれは、IDで指定しているからそう思うんだよ。

#('.hoge').on()だと考えてみな。
.hogeは0個以上。

つまり要素が複数あってもなくても
コードを変える必要がない。

これは空の配列やNULLオブジェクトパターンにもつながる考え方。

たまに、var o; o = $('.o'); if(o.length) { o.on(・・・) } とか
var o = null; if(何かの条件) { o = なにか } if(o) { o.on(・・・) } みたいな
チェックコードをかく人がいるけど、

var o = $(); o.on(・・・)

という単純なコードでいいんだよね。
「0個以上の当てはまる要素」という風に一般化して考える。

要素があるかないかをいちいち調べるコードっていうのは
これみたいなあほさがあるよね。

※ aは配列

if (a.length > 0) { // ← 意味が無いチェック
　for(var i = 0, max = a.length; i < max; i++) {
　　console.log(a[i]);
　}
}

>>38
HTMLとcssの関係と同じだけど、
HTMLとJavaScriptの関係っていうのは
そういう風に密接につながったものじゃない。
それぞれ独立しているもの。

要素があるかないかを考える以前に、
要素があるかないかってのはわからないと考えるべき。

だから、ID指定でjQueryを使うっていうのは
だいたい間違った考えなんだよね。

だからjQueryのセレクタはクラス（や要素名や名前属性など）で指定し、
HTMLにはその要素はあってもなくてもいいものとして作る。

>>39
ノードリストならDOM APIでも普通に書けばエラーにならないけど、それは比較対象として適切？
そりゃあ、jQuerｙは内部的には配列だからそういう挙動になるだろうけど、「動くか動かないかわからない」という本質は変わってないよね
idで指定したときの問題に対してノードリストを上げるのは論理のすり替えじゃないの？

>>39
idかclassかは問題の本質とは関係ない
重要なのは「要素の存在を保証できるかどうか」だ

存在を保証できる場合というのは例えば、HTMLで事前に該当要素を書いている場合や要素の挿入直後の場合だ
この場合は要素が存在することは確定しているのでコード上で要素が非存在となるならエラーになることが望ましい

基本的にはしっかりとアルゴリズムを組めば要素の存在は保証できる
しかし、要素のappendChild, removeChild を繰り返す度にイベント定義する場合や多量ノードにイベント定義する場合は別だ
この場合はバブリングを利用して上位ノードに一つだけイベント定義するのが望ましい
そうすれば要素を入れ替える度の処理が不要になり、メモリ消費も削減できる

---
ノードリストでイベント指定する場合は>>42のいうように普通に組めばエラーにならない
存在確定する状況ならエラーにしてもいいが、それは人に依るだろう
最も、この場合はバブリング可能で上位ノードにイベント定義する場合が多く、その場合は上位ノードの存在保証が必要になる
(clickはバブリング可能なのであなたの出した例なら上位ノードを指定する)

> 要素があるかないかってのはわからないと考えるべき。
そもそも、アルゴリズムで要素の存在は保証されるべきだ
存在不明の要素にイベント定義するということは、そのイベントが動作する保証もないという事だ
そして、動かなかった時に「要素が存在しなくて動かなかったのか」「ハンドラのコードバグで動かなかったのか」の原因切り分けが全く出来てない状態からデバッグすることになる
これは良い実装とはいえない

>>43
それは考え方が単純だよ。

「要素が絶対に存在していなければならない時」はなくてエラーなっても良いが、
「要素が存在していなくてもいい時」はエラーにならない方がいい。

HTMLをウェブAPIを実行するための入力フォームだと考えれば、
特定の画面にそのフォームがなければならないことというのはまず無い。

たとえば削除ボタン（POSTするフォーム）があったとしよう。
そのボタンに対してJavaScriptで確認ダイアログを表示するとしよう。

この削除ボタンはどのページにでも移動可能。そして一般的に
JavaScriptはHTMLに対してちょこっと付加価値を付けるという扱いで使うべき。
つまりこの削除ボタンに、特定のクラスをつけ、JavaScriptは
そのクラスに対して処理を付加することになる。

そして、この削除ボタンはデザイナーの都合で表示されなくなったり別のページに移動したりするわけ。
それでも、特定のクラスをつけた場合は全て同じ動きをする。
というベストプラクティスを達成する場合、クラスの有り無しを意識しちゃダメなんだよ。

jQueryのDatepicker プラグインで
結果をyyyy mm dd の3つ分けて入力する方法がわかりません。。。

2つに分ける方法は以下に出ていたのですが
私のレベルでは3つに分けられませんでした。

---------------

jQuery( function() {
jQuery( '#jquery-ui-datepicker' ) . datepicker( {
altField: '#jquery-ui-datepicker-alternate',
altFormat: 'yy'
} );
} );

---HTML---

<input type="text" id="jquery-ui-datepicker">
<input type="text" id="jquery-ui-datepicker-alternate"/>

jqueryである要素を空にするにはどうしたらいいですか？

>>45
http://www.softel.co.jp/blogs/tech/archives/92
こういうことではなく？

>>46
空にしてタグだけ残すなら
$("ある要素").html("");

タグごと消すなら
$("ある要素").remove();

>>44
シンプルなプログラムならその考え方でいいが…。
「イベントA→イベントB→イベントC」の順に依存関係が存在した場合、イベントAが定義されないならイベントB,Cも定義されないのが望ましい。
jQueryでは定義/未定義を判別できず、例えばイベントBだけ定義された状況で思わぬバグを引き起こす可能性がある。

どちらかといえば、あなたの方が想定する状況を限定しすぎている(単純化している)ように思うが…。
バブリングについての意見はないのか？
一つだけの要素にイベント定義する場合も十分あるはずだが…。

なんでイベントに依存関係があるんだよ？
依存関係があるのなら、それを一つにまとめるだけの話だろ。

>>50
一般論としてイベントに依存関係があるという話ではなく、処理の流れで依存関係が出来ると読めたけど
処理Bより先に処理Aが先に実行されてなければならない状況はあるでしょ？
大規模開発なら処理を分けることはあるし、まとめることが必ずしも良いとは限らない

>>51
いや、一つのイベントでだろ？
たとえばクリックした時に、
違う処理を二つやんのか？

まずないね。

jqueryオブジェクトに
_hoge
などの独自プロパティ持たせてもいいんですか？

>>53
独自プロパティ持たせるぐらいなら
専用のdataメソッドあるだろ。

あとjQueryプラグインの”正しい"拡張は
そのように独自プロパティやメソッドを
追加することに等しい。
だから”正しい"方法であれば持たせて良い。

>>47
有難うございます！！
助かりました。

どうやら、検索レベルの方が問題のようでした・・・

googleで計算式を入力すると答えが出ますが
ああいう風に数式から答えを算出するライブラリありませんか？

eval("1 + 2")

それだと「文字列が数式のみかどうか」を調べないといけないですが
それはどうやりますか？

jqueryのaddClassで
"hoge moge"など書くと複数クラスを適用できますが
これは普通に使っていい機能なのでしょうか？

英語リファレンスの方に書いてありました

>>58
単に eval()でthrowされたエラーをcatch

数式だけなら問題ありませんが
コードが入力されたら実行されちゃいますよね

>>62
実行された所で問題につながるかどうかは明らかにされてないがな
ページ利用者が変な式を入力してページのふるまいがおかしくなるだけでは
問題とは言えないだろう

あきらかにされてなくてもナシなのは当たり前のことです
問題とは言えないだろうといいますが、大問題です

事前に正規表現でチェックすれば？ /^[\d\s+\-*\/]+$/.test(str)
eval使いたくないとかもっと柔軟にしたいなら「数式 パーサ」で検索検索ゥ

Googleくらい融通の効くライブラリは知らないや
自分で書くしかないんじゃね

evalでユーザーに任意のコード実行されて何が問題になるのか。全く問題無いだろ。

まじで言っているのですか？evalが危険なのは常識だと思いますが

次の様 evalを使うページが存在するとき、
ページ利用者にどのような実害が生じる可能性があるか、具体的に挙げなさい

<!DOCTYPE html><html><head><meta charset="utf-8" />

<script>
onload=function(){
var ele = document.getElementById('input');
ele.onchange = function(){
eval(ele.value);
}
}
</script></head><body>

<textarea id="input"></textarea>

</body></html>

内部のデータが壊れて整合性が狂う可能性あるじゃん

そんなの自己責任だろ。

ブックマークレット実行するとか
JavaScriptデバッガで適当な命令
実行するのと何も変わらん。

デバッガまでいじったら自己責任だが
表向き用意してるインターフェイスにそんな可能性があるのは問題
こんなの論争する価値もないほど自明のことだと思うが
世の中にはトンデモプログラマーがいるものだな

iframeでそのページを出して、
この画像の続きを見たければこの文字列をコピペしてください
みたいに書いておくとか

lodashで、テンプレートにヘルパメソッドを渡してフィルタした値を出力する、ってやる時には
<% print(helper(val)); %>
ってやるしかないですか？
<%= helper(val) %>
みたいに書きたいのですが、これだとエラーになります

「jqueryオブジェクト」同士をマージするにはどうやればいいですか？
$.mergeは普通のオブジェクト用のようです

addでした

スマホで安定して動くファイルアップロードプラグインありますか？
lagoscriptってサイトのjquery.upload-1.0.2.min.jsを使ってたんだけど
iOS7だと動いたり動かなかったり、今はサイト自体が無くなってしまったようで

jQuery.merge
のような関数を自分で追加するにはどうしたらいいですか？

>>77
何のために追加するのか、
どんな機能を追加するのか？

どうしてもjQueryプラグインにしないといけないのでない限り
追加しない方がいい。

グローバル変数やだ、じゃあjQueryに追加しちゃえ
この程度の考えなら、やめた方がいい。

JavaScript 3 で聞いても返事なかったので、こちらで伺います。
動的に追加されたaタグに対して、タップするにはどうすればいいですか？

>>78
追加する方法を聞く質問に対してそんな答えはいりませんし
もう分かったから別にいいです

なにここ、殺伐としてるの？

全然してませんよ
和気靄靄です

どこが和気靄々なの？

あなたに本質が見えてないだけだと思いますよ

煽りばかりだね

click();
みたいに tap(); はないのかね。。

$('a').bind('touchstart', function() {alert('タッチ');});

ありがとう。
でも、それはタッチイベントを発生させるんじゃなくて、実際にタッチしたらalertで「タッチ」と出る感じじゃない？

jqueryで「親要素が指定した要素である」という条件で絞りこむにはどうしたらいいですか？

>>88
jQuery の click() もclickイベントを発火させるAPIじゃないよ

そうだったのか。。

>>86,91
HTMLInputElement.prototype.click と勘違いしたのかな
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
それから誤解されやすいから求めるAPIのライブラリ名ぐらいは書いた方がいいと思うな

jQuery では trigger() が該当するけど、jQuery 定義したイベントにしか対応しないから DOM L3 Events 互換ではないよ
http://api.jquery.com/trigger/

まあ elem.click が存在してたらそれ呼ぶけどね

>>93
気が付かなかった
2.1.1のコード読んだけど、input[type=checkbox] だけ反応するみたいだね
一つの関数に複数機能を詰め込む仕様はわかりにくいなー

そこじゃなくて(いや、そこもだけど)

> // Call a native DOM method on the target with the same name name as the event.
> // Don't do default actions on window, that's where global variables be (#6170)

ここのところかな。

> elem[ type ]();

アンカーはクリックできないようにはなっているみたいだけれど

jqueryのval()などは「マッチした最初の要素で実行した結果」を返しますが
自分でこういうプラグインを作成する時は
単にthisに対しての実行結果を返すだけでいいのでしょうか？
実行集合の集合を返す場合と、単一の実行結果を返す場合の書き分けが良く分かりません

×実行集合の集合
○実行結果の集合

おお、丁寧にありがとう。
ブラウザでみたとき、実際にマウスを使ってクリックやタップしたのと同じ効果を求めてたんだけど、そういうのはないのだね。

96の件ですが、
集合の要素数のぶんだけプラグインのメソッドが呼ばれていると思いきや、
要素がいくつであれメソッドは一回しか呼ばれないんですね
なんか色々勘違いしてたっぽいです

>>89
もうちょうっと詳しく描いてくれないとわかんない。
クリックされた要素が…とかなら
if($(this).parents("親要素")[0]){
処理;
}

>>99
一度jQueryプラグイン書いてみるといいですよ。
簡単ですから。

jqueryでアニメーション中の要素を指定するには
:animated
を使いますが、この種のセレクタを否定形で書くことはできますか？
#test:!animated
みたいなイメージです

$('#test').not(':animate')
とするしかないでしょうか？

:not() ってセレクタあるよ

jqueryで
the set of matched elements
自体をまるっと入れ替えるにはどうしたらいいですか？
addで追加はできるので、
クリアするメソッドがあればいいのですが

jQueryの話題はこっち

jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400313626/

jQueryはここで問題ない

別にここでいいって書いてあるが、
専用のスレのほうが良い答えが得られるって話。

ねーよww
馬鹿すぎワロタ

>>105
.slice() かな .eq() で範囲外を指定するのでもいけそうだけど

副作用的にクリアする方法はいくつかありそうですね
ありがとうございます

validateプラグインの質問ですが
必須チェックはサブミット直前のみ、それのチェック以外はリアルタイム
といったようにバリデーションの種類ごとに
タイミングを変えることは可能でしょうか？

jQueryのHTML読み込みについて質問です

.loadやその中の.ajaxで、ローカルHTMLに別のローカルHTML(同一ディレクトリパス下)を読み込む事が、各ブラウザの新しめのバージョンでは出来なくなりました

ブラウザが「XSS対策のため、別ドメインからは読み込めない」よう制限を掛けているそうですが、同一階層のローカルファイルがこれに引っ掛かるのは、なぜですか？
サーバに置けば、動くそうです

>>113
ブラウザが昔より高機能になってる一方で
ディレクトリパス何それ？な一般利用者は相変わらず多いだろうから
同一階層でも別ドメイン扱いにすることにしたのだろう

>>113
ローカルがfileスキームを指しているのならHTTP通信ではないからです
http://localhost/ の環境を構築すればローカルテスト可能です

>>114
ブラウザが、ですか？

>>115
XMLHttpRequestとして扱えなくなったってことですかね
用途が、ユーザに納品するHTMLモックアップでの話(そして読み込みの使途は、メニューdivを各HTMLにハードコーディングしたくない、とか)なので、一般の人のPCでHTMLファイルとして開けないとまずいんですよね

IEに関しては当面、UA情報を制御するmetaタグでごまかせそうなんですが、数年後とかどうしようと思います

WSHのFileStreamObjectなら代替になるのかなぁ…

たとえば完了をコード200で見てたらHTTP以外じゃダメだよね
XMLHttpRequestを直接扱ってみては?

>>117
そういうことですか
selectivizr.jsなんかはネイティブコードですが、同じようにstatusが200の時だけ通してますね
自作もいとわない方向なので、XHRの使い方から調べてみます

みなさん、ありがとうございました

http://jsbin.com/devobosa/1/edit

bootstrapでpopoverのテストがしたくて
http://www.wivern.com/twitterbootstrap6.html
ここのサイトのコードをコピペしましたが
クリックしても何も起きません
何が駄目なんでしょうか？

jsbinとの相性が悪いのでしょうか？

と思ったけどテスト用サーバで実行しても何も起きません

いろいろサンプルを見て
$('.popover-test').popover();
を追加したら表示されるようになりました
自動的に追加されるんじゃなかったのでしょうか？

>>122
あなたが何を疑問に思っているのかわからない
使い方にも $('#example').popover(options) とあるし、何も問題はないように見える
http://www.wivern.com/twitterbootstrap6.html#608popovers

このライブラリを使おうとテストしているのですが
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

動的にノードを追加したときに?や｜などの記号を更新したいのですが
$("#browser").treeview({
add: branches
});
や
$("#browser").treeview({
remove: branches
});
はあるのですが更新みたいなものがなく追加したらひとつ上のノードは
記号が変わって欲しいのですが変わりません。
どうしたら更新できるのでしょうか。

>>123
bootstrapではdropdownはhtmlを書くだけで作成されるので
popoverも同様な動作をすると思ったんです
微妙に動的にしなければいけない必要性がよく分かりません

>>125
設計思想は作者以外にわからないので、作者に直接尋ねるしかないかと

それは少し違うのでは？
プログラムは合理性に基づいて設計されるのですから、
他人が理由を言い当てることは十分できるはずです
むろん良く出来たプログラムに限りますが

ホイールスクロールをしたら、アンカーごとにページが丸ごと移動するjqueryスクリプトってありますかね？
今mousewheel.jsで横スクロールサイトを作ってるんですが、アンカーによる移動をそのままスクロールでも実装したいと思ってます。
（下にスクロールしたら右にずずっと移動するのではなく、すぐに隣のセクションに移るような感じで）
欲を言えばある一定量のしきい値までスクロールがされたら一気に移動するような感じにしたいとは考えているのですが、ひとまずは以上のようなものを探しています。
誰か知ってる人居ませんかね？

■質問です
動的に生成したidにページ内リンクをしたいのですが、IE10が効きません。

ページA（http://hoge/A/）内のテキストリンク（とび先：http://hoge/B/#q4）から
ページB（http://hoge/B/）に遷移してきた時にページ内リンクで、#q4の位置に
表示されるようにしたいのですが、
idをjQueryで振らなければなりません。
それは出来たのですが、IE10だけ、#b4の位置に表示されず、アンカーが効きません。
jQueryでidが振られるタイミングの問題でしょうか？

$(function(){
$(".faq-question").each(function (i) {
i = i+1;
$(this).prepend('<span id="q'+i+'" class="q_number">Q'+i+'</span>');
});
});

動的idでページ内リンクをIE10で解決できる方法を教えてください

>>127
では、あなたが考えてみて下さい

>>129
idを振ったあとにlocation.hashでジャンプしてる感じ？

jQueryでボタンをクリックするとsubmitが実行されるようにしています。

$('.btn').click(function(){
document.form1.submit();
});

この時、「送信したくない要素」がある場合、どうしたらいいのでしょうか？
今は、$(inputのID).remove();　としているのですが、
これだとsubmit前に画面から消えるので、他の方法が無いか探しています。

試してないけど name属性消すのは?

>>132
名前をでたらめにすればいいよ

>>132
要素にdisabledを与えれば？

>>135
この方法にします。みなさんありがとうございました。

>>128
http://klutche.org/archives/536/
こういうのを参考にscrollTop()やoffset().topをscrollLeft()やoffset().leftに変えれば実現出来ないかな。

動きに関してはeasingプラグインを入れるか、
http://www.softel.co.jp/blogs/tech/archives/4282
こういうの参考にして自作する

>>125
tooltipで実装してるからでは？

>>131
いえ、遷移元のページでは、静的なリンクです。
普通のＨＴＭＬで記述してます

<a href="http://hoge/B/#q4">#q4へのリンク</a>

>>131
いいえ、普通のＨＴＭLのaタグです

>>139-140
遷移してからJavaScriptが実行されるのだから上手く動くわけがない
動いているブラウザは、たまたま間に合っているに過ぎない
>>131の方法で原理的には解決できる

本題から若干逸れるが、他からアンカー目標となるコンテンツをJavaScriptで生成するのはあまりよろしくない
出来るだけサーバサイドで動的出力するのが望ましい

別に問題ないでしょｗ

もし問題がある場合が明確になったら
その時やっと話を聞くことにするよ。

>>143
「遷移してからJavaScriptが実行されるのだから上手く動くわけがない」という明確な理由は既に指摘したはずだが
>>131の方法では一度、遷移した後にもう一度遷移する可能性があり、最適な対策とはいえない
しかも、JavaScript無効の環境ではリンク先にジャンプできない
それから、これは質問者が判断すべき事で外野がとやかくいうべきじゃない

すみません、間違って重複スレ（http://peace.2ch.net/test/read.cgi/hp/1400313626/）
に同じ質問をしてしまいましたが、再掲させていただきます。
（若干コードが異なります。また意図的なマルチではありませんのでご容赦お願いします）

（【CSS】
#wrapper { position: relative; width: 500px; height: 500px; }
#wrapper div { position: absolute; width: 500px height: 500px; display: none; }
#wrapper div:nth-child(1) { background-image: url(img1.jpg); }
#wrapper div:nth-child(2) { background-image: url(img2.jpg); }
・・・・
#wrapper div:nth-child(20) { background-image: url(img20.jpg); }

【html】
<div id="wrapper"><!-- inner divs --><div></div><div></div>・・・・・<!-- inner divs end --></div><!-- #wrapper end -->
<!-- #wrapperの内側に背景表示用のdivが20個あります。imgタグでないのは、今後background-size:coverなどを適用させる予定のため -->

【jQuery】
$wrap = $('#wrapper'); $elem = $wrap.find('div');

var animList = {
//最初全てのdivが重なって表示されている状態から、0.5秒間隔で一つ目のdivから20個目まで順々に消す処理をしています。
no1: function() { return $elem.show().each(function(i){ $(this).delay((20 - i) * 50).fadeOut(0); })},
no2: function(){ return....(some animation function) }
}

//アニメーションを同時再生させないために実行順序を登録。
$(window).on('load',function(){ var order = $.Deferred(function(dfd){ dfd.then(animList.no1).then(animList.no2)}).resolve(); });

上記コードで高速スライドショーみたいなのを実装したのですが
MAC firefox最新版だと期待通りに動くものの、MAC chrome最新版だと飛び飛びになってしまいます（他ブラウザでは未検証）
おそらく処理が追いついてないのでしょうが、飛び飛びにならないようにするにはどうしたらいいでしょうか？
以上、ご回答のほどよろしくお願いします。

>>145
.delay((20 - i) * 50)
これだと 0.05秒間隔になるんじゃないの?

あと .delay() は内部的にはsetTimeout() を使ってて、
時間が来たら次のqueueをってなってるんだけど、
>>145のやり方だと20個のタイマーを同時に動かしていることになるから
タイマーの短い時間での精度が悪いとばらばらになるんではないかな

一つのタイマーをつかって順々に処理させるほうがいいのでは?
それなら少々遅れようとも飛ばされることはないのでないかと予想
(ここまで全然検証してないけど）

>>146
0.05秒であっています。>>145のコメントが間違ってました
setTimeoutの方向で少し模索してみます

ちなみにeachをつかわずにべた書きで
animList.no1 〜 no.20まで関数定義して誤摩化そうとしてみましたが
激遅で使い物になりませんでした・・・

http://peace.2ch.net/test/read.cgi/hp/1399764134/742 より引用。

> 742 名前：Name_Not_Found[sage] 投稿日：2014/06/20(金) 14:49:43.42 ID:???
> jQueryのcss()などで要素のcssプロパティを追加する場合
> ブラウザ未対応プロパティまたは値が不正で無視された事を検知するにはどうすればいいでしょうか？
DOM APIで判定する。

'propertyName' in element.style // プロパティが存在する時は true

WEB制作板では、このスレが一番スキル高い人多いね。
他のスレは回答者クソばっかだ

JavaScriptスレにもスキル高い人はいるし、お世話になった
ただ、最近の質問は低レベルすぎてその人達はあまり出てこないけどね
潜在的にはここにいる人と同じ層なはず

>>147
画像を切り替えてパラパラマンガのようにアニメーションさせたいのであれば
CSSスプライトな背景画像を動かす方がリクエストも少なくなるしなめらかにできるような・・・・
------------------------------------------------------------
【html】
<div class="image"></div>

【css】
.image{
width: 310px;
height: 310px;
background: url(https://dl.dropboxusercontent.com/u/34189438/2ch/img.png);
background-position: -2800px;
}

【js】
$(window).load(function() {
for(var i = 0; i < 9; i++){
setTimeout(switchImg, 50 * i);
}
function switchImg(){
var bgposi = parseInt($('.image').css('background-position'));
$('.image').css('background-position', bgposi+310);
}
});
------------------------------------------------------------
CSSのanimationのほうがさらに軽そうだけど。
http://codepen.io/jascha/details/sIgAo

的外れな回答だったらすんません。

jqueryでデレゲートする時、
具体的なDOMを渡しても、同種のDOMが反応します

<div id="test"></div>
<div id="test1"></div>


$(document).on('click',document.getElementById('test'),function(e){
console.log(e.target.id);
})

これでtest1でも反応します。何故でしょうか？
testにだけ反応させたい時はどうしたらいいですか？

>>152
document.getElementById('test') を呼び出した時、対象ノードを取得できてないんじゃない？

ありがとうございます
取得は出来ていますが、デレゲートに失敗しているようで
div以外でも反応します
どうもdomをセレクタにすることは出来ないようです

>>154
ドキュメントにも selector しか書いてないね
ドキュメントを読む癖をつけるといいよ
http://api.jquery.com/on/

そもそも具体的なDOMが特定できてるんなら、delegateを使う意味というか意義がないんじゃね?

>>156
確かに

デレゲートには処理コストを下げるという意味もある

どの段階の?

>>152をjQueryを使わずに書けば無意味といわれる理由がわかると思う

言われてみれば、対象が単独の場合はデレゲートしてもコスト下がらないですね
ありがとうございました

あえてするんなら、そのままの構文で event.data にそのDOMが渡されてくるはずだから、
そこで違ったら return …かな(検証してない)

>>161
無意味なのは「要素ノードをキャッシュしようとしていたから」であってdelegeteが無駄な訳じゃないよ
単一ノードでもdocumentに付け外しを繰り返しても検出できるメリットがある
キャッシュしたら参照比較なのでこのメリットを享受できない

ちょっと意味が分かりません
例を示してもらえますか？

>>164
jQuery(document).on('click','#test',function (e) { console.log(e.target.id); });
上記コードは意味があるが、>>152は(正常動作したとして)無意味

すごく初歩的なことだと思うのですが、質問させてください。
jQuery(1.7.2) の animate() の実行前に処理をしたいものがあるのですが、うまく行きません。
# jQueryというよりは javascriptの書き方だと思うのでここで質問させていただきます。

this.info( "log 1" );
$(#hoge).animate(properties,options);
this.info( "log 2" );
$(#hoge).animate(properties,options);
とすると、this.info() が先に全部動いてしまいます。
おそらくメソッドチェーン？というのを使うのだと思うのですが、どのようにすればよいでしょうか。
animate()のコールバックを使うとanimate()が実行した後にthis.info()が動くのを確認したのですが、動く前にthis.info()を実行したいです。

>>166
全てanimate前にconsole出力されるはずたけど、非同期処理を理解してないのでは？

補足します。
1. this.info( "log 1" );
2. $(#hoge).animate(properties,options);
3. this.info( "log 2" );
4. $(#hoge).animate(properties,options);
と番号を振った時、1, 3, 2, 4 と動きます。
そうではなく、1, 2, 3, 4 と動かしたいです。

はい、あまり非同期処理が理解できていないと思っています。概念はなんとなくつかめているのですが、うまく扱えていません。
これは、メソッドチェーンを使えば1,2,3,4といった順番で動くのではないかと思っているのですが、どのようにすればよいでしょうか。

jQueryのアニメーションはキューに積まれて、タイマーで逐次実行されるんだわ

.queue() を調べてみて callback関数渡す構文のやつ

>>168
その手順だと 2. が終った後に 3. が始まるから動作が変化するけど、そこはいいの？

>>169
ありがとうございます。
animate()に限ったことではなく他の処理を書く場合にも陥りそうなので、できれば汎用的な書き方を知りたいと思っています。

>>170
はい、問題ありません。

>>168
アニメーションが実際に実行される直前にイベントが発行されるだろうから
そのハンドラの中で 1 や 3 を呼び出す

具体的には

http://api.jquery.com/animate/
を読めばわかるが
.animate( properties, options )
に渡す options オブジェクトの strat ハンドラに 1, 3 を入れるといいだろう

>>171
>できれば汎用的な書き方

>172 に補足すると、非同期に実行される類いの処理は
たいていの場合、その種のイベントが発行されるようになっている
ES6 では promise が js ネイティブになる。
そのときにはコードも汎用的な書き方が可能になるだろう

>>172-173
ありがとうございます。
animateのoptionsのstartですが、jQuery1.8から利用できるようでした。
jQuery1.7.2という縛りがあるため利用できなさそうです。

method1().method2().method3();
といったように利用したいのですが、都度都度functionを定義するのは面倒なのでこれを無名関数で行うにはどのようにすればよいでしょうか。
$(function(){
(function(){ alert(1); return this; }).(function(){alert(2);return this;});
});
syntax error ですが、こういった書き方ができればと思っています。

やりたいことは .queue() だと思ったんだけど違うのか?
.animate()と.animate()との間に割り込めればいいんだよね

あ、汎用的ってのは .animate()以外の.ajax()などの非同期処理もってことか?

Deferred を使って、一つ目の.animate() が完了してから次のを設定
とするしか無いのでは .ajax() なんかもその中に入れられるし

animation関連はキュー処理だからDeferred機構とはちょっと違うんだよね
割り込もうとしたらキューに積むか >>172 か
どっちにしろjQueryのアニメーション機能に特化しちゃうね

ありがとうございます。
http://s3pw.com/qrefy/collectdeferred/ ここにドンピシャのものがありました。

あまりjavascriptに慣れていないので、とても奇妙な書き方をしているかもしれませんが、
var hoge = function(){};
hoge.prototype = {
anime1:function(){
// animate
},
anime2:function(){
// animate
},
info:function(msg){
console.log("info:"+msg);
}
};
のように書いておき、
$.when()
.then(function(){
obj = new hoge();
obj.info("anime1");
}).then(function(){
obj.anime1();
}).then(function(){
obj.info("anime2");
}).then(function(){
obj.anime2();
});
といったような書き方ができればと思っています。
// ↑望んだ通りに動かないですが。
s3pw.com にあるように animate() のオブジェクトを返せばいいのかもしれないですが、animate() 以外にも obj が持つ他のメソッドも実行したいため、そのようにかけませんでした。
どのように解決すべきでしょうか。

jqueryでハンドラを付ける時、
詳細な指定をしている方を先に実行して欲しいです
$(document).on('click','ul[data-id=moge]',〜
と
$(document).on('click','ul',〜
では、上の方を先に実行して欲しいです
詳細なものほど優先するのは、CSSの決定同様に合理的動作だと思いますが、
そういう調整は内部でなされているのでしょうか？

試したところ、されてませんでした

jqueryで特定の要素がある時は実行したいのですが、どう書けばいいのでしょうか？
イメージとしては

if (指定IDを持つ要素が存在する) {
〜存在する場合の処理〜
} else {
〜存在しない場合の処理〜
}

という事がしたいです。　if ($('#hoge'))　では無理でした。

こいつ何回同じ質問すんだよｗ

自分の満足できる答えにならないから
悔しいんだろｗ

関数型言語風のコードは美しいからね。
それを認めたくないんだろう。

関数言語推しの人も同程度にうざい

if ($('.hoge').length ){
} else {
}
でOK

stopPropagation
と
stopImmediatePropagation
の違いを分かりやすく説明して下さい

Propagation を
stop するか
Immediate に stop するか
の違いがある

immediateじゃない場合はどこに伝播するんです？

お隣さん

>>184
この方法で出来ました。ありがとうございました。

よく分からないなあ
immediateじゃないstopはどこへの伝播を止めてるんです？

>>190
公式文書を読んでわからなければ諦める
http://api.jquery.com/event.stopimmediatepropagation/

ありがとうございます
・stopPropagation、stopImmediatePropagation、両方ともバブルアップを止める
・stopPropagationは、その要素に対する同種のイベントは止めない
・stopImmediatePropagationは、その要素に対する同種のイベントも止める
要約するとこういうことでしょうか

javascriptを使ってブラウザで動くパズルゲームを作りたいのですが簡潔にかけて初心者でも理解しやすいようなライブラリありませんか？

PC用にする予定なのでスマホに関してはどうでもいいです

>>193
http://toro.2ch.net/test/read.cgi/gamedev/1048171505/

jqueryのoffset()はウインドウ上の座標つまりウインドウ座標が返ってくるようです。
何故メソッド名がoffsetなんですか？
オフセット座標って親要素を基準にした座標のことじゃないんですか？

英語でお願いします

>>195
基準点が親要素であるとか、オフセットの定義に含まれて無い気がするけど。

offset()で取得されるのがドキュメント座標ならまだ分かりますが
クライアント座標というのは違和感があります

複数のノードを選択できるツリービューってありますか？

jquery-cookieの作者はなぜ$.cookie()に宣言したのだと思いますか？ただのfoocookie()とかじゃダメだったんでしょうか？
jquery-cookieの機能はjqueryと依存関係があるのでしょうか？

>>200
なぜグローバル空間を汚す実装が良いと思ったのですか？
既存のグローバル変数との競合を考慮しなかったのでしょうか？

>>200
少し前まで「jQuery plugin」がバズワードだったから

なんでもかんでも$に定義するならグローバル変数と大差なし
ユニークな名前のグローバル変数を定義した方がマシ

スクロールエリアでスワイプのイベントをとらえたいのですが
どのようにすればできるでしょうか。
下記のようなソースではできませんでした。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>
</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>

まず、bindは使うな。これは古いメソッドだ。

$(document).ready(function(){
これは冗長
$(function(){
こう書けば良い。

あとHTML5なら type="text/javascript" は不要。

バージョンを最新の1.4.3にして、
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

$(document).ready(function(){　の次の行あたりに
$.event.special.swipe.scrollSupressionThreshold = 10;
を追加。

jquery1.7.2で動的に追加したformをsubmit();したいのですが方法ありますか？

idとかないの

>>207
var frm="<form id=\"foo\"></form>";
$("hoge").append($(frm).clone(true));
$("#foo").submit();

>>208-209
ありがとうございます！

onscrollイベントの中で、スクロールした座標軸の種類を知ることは出来ないのでしょうか？
座標軸と、移動量を知りたいのですが

↑jqueryの話です

onscrollイベントのたびに座標をcheckして自分で検出するしかないでしょうか？

>>213
そうですね

そうですか
ありがとうございました

>>209
IDいらんだろ？
余計なコード書くなよ

>>209はcloneもいらんし。
なんでこう無駄なコード書くかなー。

idがabcのtrタグ内にある、nameが_defで終わるタグをリストしたい。
一番スマートな方法は？

<tr id="abc">
<td><input name="fas_def" /></td>
<td><input name="sec_def" /></td>
<td><input name="thr" /></td>
<td><input name="fou_def" /></td>
<td><input name="fif" /></td>
<td><input name="six_def" /></td>
</tr>

まちがえた！

nameが_defで終わるタグをリストしたい。
↓
nameが_defで終わるnameをリストしたい。

こんな感じの配列がゲットしたい！
@q = ('fas_def','sec_def','fou_def','six_def')

>>218
querySelectorAll

ｊQuery初心者で勉強中の者です。

ttp://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動で画像がフェードインしエフェクトが動く動きを実現するには

jquery.inview.jsとjquery.easing.1.3.js

が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせた画像を左右上下にエフェクトをかけて表示させる方法を詳しい方ご教授いただけないでしょうか

画像をフェードインさせるところまでは一人でできました。→ttp://aruearoe.com/

jqueryで
プラグインで追加されたメソッドの一覧を知る方法ありますか？

>>223
こちらへどうぞ
Webサイト制作初心者用質問スレ part240
http://peace.2ch.net/test/read.cgi/hp/1400371843/

>>224じゃない。

JavaScriptの話題はこっち

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/hp/1403330196/

意味不明の誘導だな

セレクターでどうしても詰まってしまっている問題があります。

<h3>タイトル１</h3>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>

<h3>タイトル２</h3>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>

のようなHTMLがあります。ここで<h3>をクリック時にその下の<p>をすべてhide()
したいとおもっているのですが、クリックされたh3の下にあるpを全てセレクトする方法が
わかりません。

Jquery UIのアコーディオンも確かめてみたのですが、今回の仕様には合わないので
自作でと、思っております。よろしくお願いいたします。

まず、クリックされたh3をセレクトできないと始まらないが
「クリックされた要素」はどうやってセレクトする？

その上で p すべてとは、
pの個数は決まってるのか？
pは連続しているのか？

>>228
ありがとうございます。
pの個数は決まっていません。
pは連続しています。つまりh3の下にはpが連続して出現し、
またh3が来ます。
隠したいのは次のh3が出現するまでp全てということです。

クリックされたh3はクリックイベントの中の$(this)で取得しようと
思っていましたが、ダメでしょうか？

なんとか自己解決しました。

クリックされたh3を$(this)でとりまして、

var next = $(this).nextAll(); でh3以降の要素をすべて取得します。
nextをeach() で回して、p だったら　hide()　して、h3が出現したら
return falseでeachを出ます。

これで狙った挙動を実現できました。

やりたいことをここに書いていたら、アイデアが出ました。
ありがとうございます。

>>230
h3とp要素をsectionやdivでかこってしまえばもっと簡単に書けるし早くなるんじゃね？
と思ったがこういうのは余計なお世話か

>>231
普通はそれが正しい。

>>231
>>232
おっしゃる通りなのですが、今回別ソースから動的にHTMLを引っ張ってきて、
それに対してアコーディオン効果を付けたい、という要望でして。
元のHTMLはむやみに触れない状況だったのです。

せめて連続するp要素がdivで囲われていれば、一発だったのですが。

■質問です■
$(document).ready(function(){
$('.aa').each(function () {
$(this).prepend('bb');
});
});
上記で要素追加.prepend();しているのですが、
phpのページ送り（URL、パラメーターは変更なし）のボタンをクリックすると
動的に内容が変更された後に
.prepend();の効果が外れてしまいます。 $('.aa')は動的変更後も存在します。

$(document).ready(function(){なので当然かとは思いますが、
phpで動的変化された後にもjQueryの効果を読ませるにはどうすれば可能でしょうか。

>>234
動的に内容が変更されるイベントにフックして $(this).prepend('bb'); すればいいだけだと思うけど

this じゃ無理か
イベントを貼り付けた要素にも依るが、event.target.ownerDocument あたりか

> phpのページ送り（URL、パラメーターは変更なし）のボタンをクリックすると
動的変更でもURL、パラメータは変更すべきでは？

>>234
答えじゃないが、コードが冗長だよ。無駄が多すぎ。

> $(document).ready(function(){
> $('.aa').each(function () {
> $(this).prepend('bb');
> });
> });

readyは、$(function()・・・と書くのが推奨されたやり方

$(function(){
$('.aa').each(function () {
$(this).prepend('bb');
});
});

eachで回してthisとか意味ない。

$(function(){
　$('.aa').prepend('bb');
});

いろいろ勘違いしていたので>236は忘れてくれ

質問の内容は実は
wordpressのFAQManagerというプラグインでの話になります。

動的変化した後のページにパラメーターがないというのは厳密には間違いでした。
2頁目に行ってもブラウザのアドレス欄のURLは変更なし（パラメーターも付いていない）
のですが、2ページ目のリンクをクリックするときのURLを見たら
パラメーターが付いてました。
http://ドメイン/?p=183/?faq_page=2　のようなカタチです。

だいぶ強引ですが、リンクをクリックした際にクリックイベントで.prepend()を
してみたのですが効きませんでした（クリックした瞬間だけ一瞬効きます）

>>239
動的変化が非同期なんじゃない？
非同期処理後に prepend しないといけない

>>240
そうなのかもしれません。
処理後に prependをどうやったらかけれるのかがわからなくて・・。

試しにページャーの数字をクリックしたらページリロードするようにしたら
何頁目が表示されていようが1頁目が表示されるようになるだけでしたｗ

>>239
> 2ページ目のリンクをクリックするときのURLを見たらパラメーターが付いてました。
リンク先URLと動的変化後のURLが一致しないのは好ましくない
動的変化後もURLが変化すべき。

>>241
ならば、FAQManagerの説明書を読んで処理後のコールバック関数を否定できないか読む。
なければ、コードを読んで該当コードを改変する。
そして、作者にフィードバックしておく。そうすれば、次回バージョンアップ後も自前で改変しなくて済む。

>>242
どんなソースかもわからない状態で
わかる範囲でのベストなお答えいただき有難うございました。

phpのコールバックをｊＱｕｅｒｙで受け取るなど自分には敷居が高いので
別の方法を模索してみます

ありがとうございました

<script type="text/javascript">
var area = "";
function eachFunc(index, elem) {
if($(elem).find("input").attr("checked")){
var text = $(elem).find("span").html();
area = area + text;
}
}

$(function() {
$("button").click(function(){
$(".test").each(eachFunc);
$("textarea").val(area);
})
});
</script>

<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト１<br /><br /></span>
</div>

<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト２</span>
</div>

チェックボックスがONのspanからHTMLを取り出し、テキストエリアに入れたいのですが、ON・OFF関係なくすべてテキストエリアに入ってしまいます。
たぶんif文が悪いんだと思うんですけど、どうすればいいですか？

自己解決しました

<style>
.on{background:#00ff00;}
.off{background:#ff0000;}
</style>
<a class="on">クリックするたびに背景色変更</a>


$('.on').click(
function(){
$(".on").removeClass("on").addClass("off");
}
);
$('.off').click(
function(){
$(".off").removeClass("off").addClass("on");
}
);


こうすれば、<a>タグをクリックするたびに背景が緑から赤へ、赤から緑へ変わる動作を繰り返すと思ったのですが
最初の１回(緑→赤)しか動作せず、赤くなった<a>タグを押してもスクリプトが動いている様子がありません・・・
なぜこうなってしまうのでしょうか？

>>246
$('.on').click()は、実行した時点でclassがonの要素にハンドラを仕掛けるだけで、
その後classを変更してもハンドラが差し替わるわけじゃない

なるほど、この場合「off」というクラス名が最初に存在しないので$('.off').click()が処理できないということですね
これを踏まえて構成を考え直したら、やりたいことが実現できました。ありがとうございました

>>244
<script>
$(function() {
　　$("button").click(function(){
　　　　$("textarea").val(function() {
　　　　　　return $('.test input:checked + span').last().html();
　　　　});
　　});
});
</script>

>>246
$(function() {
　　$('a.target').click(function() { // 'a.on, a.off' 等でも良い
　　　　$(this).toggleClass("on off");
　　});
});

<a class="target on">クリックするたびに背景色変更</a>

>>244
ごめん。間違えてた。

訂正
<script>
$(function() {
　　$("button").click(function(){
　　　　$("textarea").val(function() {
　　　　　　return $('.test input:checked + span').map(function() {
　　　　　　　　return $(this).html();
　　　　　　}).get().join('');
　　　　});
　　})
});
</script>

>>249-251
解決済みの質問に回答しなくてもいいのでは

>>252
解決したと書いてあるだけで、そのコードが載っていない

それは、質問をするだけして自己解決しました。といって
去っていくやからと同じで、他の人の参考にならない。

またプロ品質の仕事としては、かろうじて動いていたとしても
無駄があるコードは、品質が低くコードレビューで弾かれる。
つまり未完成のコードと同じで、完成してない（解決済みではない）ということ。

こっちの方が一行少なくてわかりやすいか。

$(function() {
　　$("button").click(function(){
　　　　var text = $('.test input:checked + span').map(function() {
　　　　　　return $(this).html();
　　　　}).get().join('');
　　　　$("textarea").val(text);
　　})
});

通常、valでfuncitonを引数にした時、thisを参照するんだけど
でも今回はthisを参照しないから、分けて書いたほうが良さそう。

> 　　　　var text = $('.test input:checked + span').map(function() {
> 　　　　　　return $(this).html();
> 　　　　}).get().join('');

これを一行で書く方法ないかな？ 時々こういうコード書くんだよね。

.get().join('')は次の行に移動できるから無視するとして。

仮にjQuery プラグインを作ったとしたら、こんな感じでjQueryオブジェクトの
配列から、htmlメソッドを呼び出した結果を配列で返すみたいな。

var texts = $('.test input:checked + span').retrieve('html');

ないよなぁ。

>>253
プロを名乗るならまず、設計上の問題点を指摘すべきだと思うが

>>244
レイアウトの為にbr要素を使うべきではない
input要素のname属性は同じformコントロール下であればユニークであるべきだ
span要素はlabel要素に置き換わるべきだ(そうすればinput要素との対応関係も明確になる)
$("button").click() は全てのbutton要素にイベントを定義してしまう
$("textarea").val() は全てのtextarea要素を書き換えてしまう
そもそも、同じフォームコントロール下におけばclass="test" は不要だ(form内の全 input[type=checkbox] を対象にすればよい)

>>246,250
on, offの2パターンしかないのに on, off を付け替えるのは明らかに無駄だ
onの有無で十分に判定できるはずだ
2つのclass名を使い分けるのは4パターンのUIが必要な時に限定される

また、そもそも論としてa要素でこれをマークアップするのもおかしい
UIとしてはcheckboxに相当するのだから <input type="checkbox"> でマークアップしてCSSで装飾するのが妥当だろう
<input type="checkbox"> のデフォルトUIが嫌なら WAI-ARIA を使えば良い
ようするにclass属性を使う必要は全くない
http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/wd_20090224/index.html#button
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role

解決済みの質問に回答するやつ同士勝手にしてくれ

JavaScriptのスレで指摘点が
HTMLとはね（苦笑）

>>256
> input要素のname属性は同じformコントロール下であればユニークであるべきだ
違うだろ。radioは同じnameを作らないといけない。
ユニークであるべきなどとは仕様のどこにも書いてない。

getElementById が単数形で
getElementsByName が複数形なのには
理由があるんだよ。

>>259
radioではなく、checkboxだぞ

>>260
同じname属性値を持つことは文法上制限されてない
が、checkboxでそれをやる意義があるのか？

はぁ？

複数チェックしたら、name=1&name=2となって
サーバー側では、name = [1,2] として配列で取得できるじゃん。

これはmultipleなselectで複数選んだのと同じ。

個人的に使うためにchrome(chromium)の拡張機能を作ってます。
最終的にはchromeの安定版で使いたいですが、今はchromiumの最新版でテストしてます。

https://chrome.google.com/webstore/detail/note-anywhere/bohahkiiknkelflnjjlipnaeapefmjbh
作ってるのは簡単なメモ帳で、機能的にはこれとほぼ同じ（というか劣化版）です。

今見ているページに、htmlのテキストエリア（<textarea>）（+アルファ）とそれを装飾するcssとjQueryを差し込む形です。

content scriptモードでは（一部のサイトで）うまく動作したのですが、ブラウザアクションモードでは何の変化もありません。
ボタンをクリックした時だけ表示してほしいので何とかブラウザアクションモードで使いたいです。

・backgroundページ（ここで使うファイルを全部読み込んどかなきゃいけないのか？と詰め込んでみた結果、無駄にここでメモを描画する仕様になってます。関係なさそうだけど致命的な害もなさそうなのでとりあえずそのままにしてます。）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="memo.css"> // メモ帳用の自作cssの読み込み
<script type="text/javascript" src="jquery.js"></script> // jqueryの読み込み
<script type="text/javascript" src="jqueryui.js"></script> //jquery uiの読み込み
<script type="text/javascript" src="inject.js"></script> // 今見ているページにcssやjsを差し込むための自作javascript。このページで実際に必要なのはたぶんこれだけ。
<script type="text/javascript" src="content.js"></script> // テキストエリアをhtmlに書き加えさせるための自作js
</head>
<body></body>
</html>

・inject.js
chrome.browserAction.onClicked.addListener(function(tab) { // ボタンが押されると以下の動作をさせる。これはちゃんと動作してるはず
chrome.tabs.insertCSS(tab.id, { file : "memo.css" }); // メモ帳用の自作cssの読み込み
chrome.tabs.executeScript(tab.id, { file : "jquery.js" }); // jqueryの読み込み
chrome.tabs.executeScript(tab.id, { file : "jqueryui.js" }); // jquery uiの読み込み
chrome.tabs.executeScript(tab.id, { file : "content.js" }); // テキストエリアをhtmlに書き加えさせるための自作js
chrome.tabs.executeScript(tab.id, { code : "console.log('a');" }); //デバッグ用。これはちゃんと表示される。
});

・content.js
$(document).ready( //これも要らないと思いますが害もなさそうなので放置
function() {
$('body').attr('class', 'memolet');
$(".memolet").append('＜前略＞<textarea class="memopadtextarea"></textarea>＜後略＞'); //これも単にbodyでいい気がしますが放置
後略

長々と書きましたが、contentscriptモードで機能する以上問題があるのは「inject.js」か「content.js」だと思います。
manifest.jsonもブラウザアクションモード用に書いてるので問題無いと思います。
よろしくおねがいします。

間違えた、問題があると思うのは「inject.js」か「background.html」です。
よろしくおねがいします。

エラーはでてないん?

chrome.tabs.executeScript() のcallbackで次のchrome.tabs.executeScript()
を実行してみてはどうだろう

>>267
できました！ありがとうございます。
ここに書いたコードでもエラーは出てなくて、もしコールバックしてないから動かないなら「$が定義されていません」みたいなエラーが出るはずだと思ってスルーしてました。

http://jobinjapan.jp/job-listing/keyword-javascript.html

$(document).ready(function(){
　　setInterval(function(){
　　　　$('#blink').fadeIn(80);
　　　　setTimeout(function(){$('#blink').fadeOut(80);},560);
　　},880);
});

#blinkを点滅表示させているんですが、別のタブを開いてからしばらくして元のタブに戻ると
その間に溜まった？点滅のアニメーションがすごい勢いで動き出してしまいます

該当のタブが非アクティブの間はこの点滅アニメーションを止めておきたいのですがどうすればいいのでしょうか？

jqueryで式の頭に!!をつけるのはどういう意図があるのですか？
手っ取り早くbooleanに変換するためでしょうか？

jqueryのソースです

( ﾟДﾟ)y─┛~~

>>270
> 該当のタブが非アクティブの間はこの点滅アニメーションを止めておきたいのですがどうすればいいのでしょうか？

その発想が間違ってるね。

setIntervalとsetTimeoutを併用しているからそういう問題が起きるんだよ。
どっちか一つを使うようにすれば自然に問題は解決する。

あとこれは冗長
$(document).ready(function(){

jQueyrで推奨されているやり方はこっち
$(function(){

誰かdhtmlxscheduler使った事ある人いませんかね

jQueryでスマホサイト等に
クリックで開閉するよくあるヤツ。
「＋」「-」マークを切り替える場合、簡潔なソースはどんな感じになるでしょうか？

知らんがな。

タブ切り替えについて質問。

ページ表示の際に開くタブを指定は可能でしょうか？

例えば飛び元ページからURLにパラメーターを付けてリンクさせ、
それを取得して開くタブを切り替えるなど・・。

どうやっていいか全くわかんないけど

>>276
完結なコードはjQueryどころか
JavaScriptコード一切ないよ。

+-マークを切り替えるというのは、
抽象化して考えると、チェックのON・OFFで表せる。
つまりチェックボックスだ。

あとはCSSで、checkされたボックスの配下や次にある
要素を表示したりしなかったりするだけ。

まあ、レイアウトや対応ブラウザのCSS対応の制限で
実装しにくい時もあるが、そういう時は

$('input[type=checkbox]').on('click', function() {
　$(チェックボックスに対応するブロックのセレクタ).toggleClass(クラス名, this.checked);
});

まあ、これだけだろうね。

+-マークについてはCSSで実装できないブラウザはないから不要だろうな。

<div class="test">
<button>button</button>
<div class="text">
text
</div>
</div>

<div class="test">
<button>button</button>
<div class="text">
text
</div>
</div>

ボタンをクリックしたらtext部分ににタグを挿入したいのですが、やり方がさっぱりわかりません
thisを使った場合どうやってdivタグを特定すればいいのでしょうか？

>>281
buttonからdivタグを特定するにもいろいろ道があるよね
たとえば親の要素以下のdivなら $(this).parent().find('div') だけど
divのようなタグ名ではなくclassで指定したいとか、buttonの隣にあるdivがいいとか
違った道もある(HTMLがもう二度と変更されることがないなら気にする必要はないけれど)
その辺を決めてから http://api.jquery.com/category/traversing/ をながめてみればいいんではないかな

>>282
ありがとうございます

>>279,>>280
ありがとう
チェックボックスの発想はなかった。。
クラスをトグルするってことは、背景画像で＋と-の画像を切り替えってことか。
スマホだと背景画像の解像度とかサイズとか面倒じゃない？

>>284
アコーディオンでcheckboxってあまり見ないような・・・？
普通に見出しとかdivとかをクリックさせて、アコーディオンさせるとこをslideToggleで開閉が多い気がするけど。
＋-は画像だとめんどいのでWEBフォント使ってCSSでbeforeなりafterなりに設定するのがラクなきが最近はしてるけどどうなんじゃろ。
■好きなアイコンでWebフォントを作るサービス「IcoMoon」が熱い！ - iLOG
http://i-i-news.com/2013/08/icon-webfont7/

>>284
Media Queries
というか、ツリー表示が有用なのはある程度大きな画面サイズを持つタブレット以上であってスマホで生きるとは思わないけどね

>>285
見るか見ないかじゃなくて、論理構造として正しいかという話をしているんだと思うけど
多数派の手法が必ずしも良いとは限らない

>>284
こんな感じ？
css:
input[type="checkbox"].toggle{
font-size: 100%;
width: 1em;
margin: 0;
padding: 0;
opacity: 0;
}
input[type="checkbox"].toggle + label:before{
cursor: pointer;
display: inline-block;
content: "+";
margin-left: -1em;
}
input[type="checkbox"].toggle:checked + label:before{
content: "-";
}
.toggle ~ .close, .toggle:checked ~ .open {
display: none;
}
.toggle ~ .open, .toggle:checked ~ .close {
display: block;
}

html:
<input class="toggle" id="toggle-one" type="checkbox" />
<label for="toggle-one"></label><div class="open">opened contents</div><div class="close">closed contents</div>

>>285
> アコーディオンでcheckboxってあまり見ないような・・・？

念の為に言っておくと、完結なコードと言われたので
最小限のコードを言ったまでで、文書構造で言えば
適切ではないなとは思ってる。

面倒くさい奴だな

>>285,287
ありがとう。
どちらも参考になった。

before疑似要素使えば済む話だった。orz

初歩的な質問で申し訳ないのですが
たとえば.buttonを押すと.boxの高さが50pxずつ増えるという動きを実装したとき、MAXが400pxまでと
したい場合(.boxの高さが400pxまで増えたら.buttonを消す)はどういう風に書けばいいですか？


$('.button').click(
function(){
$('.box').stop().animate({'height':'+=50px'},200);


ここまではともかく、このあとの
「boxの高さが400px以上に達した場合、buttonの表示を消す」という部分の書き方がわかりません・・・

>>291

とりあえずで。

$('.button').click(function (){
$('.box').stop().animate({'height':'+=50px'},200);
var bH = $('.box').height();
$('.box').after(bH);//不要

if(bH > 150){
$('.button').hide();
}
});

解決したなら礼くらい言えよな

　　　　　　　　　 _ , ，- -ｖ- - ､ _
　　　 　　　　／::::::::::::::::::::::::::::::::::::::::＼
　　　　　　 /::::::::::::::::::::::::::::::::::::::::::::::::::::ヽ
　　　　　　.(::(:::(::::／￣￣￣￣＼::::::):::)::)
　　　　　　(::(:::(:::)／・＼　　／・＼(:::):::)::)
　　　　　 .(::(:::(:::) ￣￣　　　￣￣ (:::):::)::)
　　　　　 (::(:::(:::)　　 （||||人||||）　 .(:::):::)::)　　　反省してまーす（ﾁｯ、うっせーな）
　　　　　.(::(:::(;;;)　　　 ＼　　　|　　.(;;;):::)::)　
　　　　　 (::(:::(::::＼　 　　＼＿|　／::::):::)::)
　　　　　 (::／￣|￣|＼ ||||||| ／|￣|￣＼::)
　　　　　　| 　　 .〉　|人＼_／入|　〈　　　|
　　　　　　|　 |　.|　 |　 ヽ＿/.　 |　 |　| 　|
　　　　　　|　 |　.|　 |　　.|__/.　　|　 |　| 　|
　　　　　　|　 |　ヽ　|　 ./　ヽ　　|　/　| 　|
　　　　　　|　 |　　ヽ|　 .|　　|　　|/　　| 　|
　　　　　　|　 |.　　　|　 |　　|　　|　　　| 　|
　　　　　　|＿|＿__./　 ヽ_./ 　　ヽ＿_|＿|
　　　　　 .(／:::::::::＼ __＿|＿__ ／:::::::::＼)
　　　　　　|::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::|
　　　　　　.|::::::::::::::::::::::::::::::::::::::::::::::::::::::::::|
　　　　　　 |:::::::::::::::::::::::/￣ヽ::::::::::::::::::::::|

例言えとかｗｗ

むしろ金払えｗ

$("p").prepend("<b>").append("</b>");

$("p").before("<b>").after("</b>");

この二つが反映されない理由はなんですか？
反映させる方法はありますか？

<script type="text/javascript">
function Display(no){
var name = document.getElementById("name").value;
var num=0;
if(name.length < 2){
alert("名前は2字以上でお願いしますだ。")
return false;
}else{
if(num ==0){
document.getElementById("SW1").style.display = "none";
document.getElementById("SW2").style.display = "block";
}
}
</script>
<body>
<div id="SW1">
<p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
<form onsubmit="return _submit();">
名前：<input type="text" id="name" name="name" value=""><br>
<input type="submit" value="送信" onclick="Display('no1')"><br>
</div>
<div id="SW2" style="display:none;">
<p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
<p>あなたの名前は<script type="text/javascript">+ name + </script>です。</p>
</div>
ボタンを押したら<div id=SW2>の画面に切り替わるようにしたいです。

>>297
文字列操作で構築していくのではなく、DOMというので構築していくんだ
たとえば…<b><p></p></b>は4つの要素があるんじゃなくて、bの要素の子がpの要素と考えるみたいな…わかるかな?

で、やりたいことは.wrap()/.wrapAll()/.wrapInner() あたりかな? 調べてみて

>>292
できました！ありがとうございます！
土日作業できなかったので遅くなってすみません；

>>300
ふぅ。
これでやっと成仏できる

http://oshiete.goo.ne.jp/qa/3006397.html
このサイトのベストアンサーのソースのフォーム部分
input type="radio"を type="sabmit"に変えたら変更しなくなる。
いや、変更してるっちゃしてるんだけど、一瞬で元に戻る。
これをボタンを押さないかぎり戻らないようにするにはどうしたらいいでしょうか？

ベストアンサーのコードがベストアンサーに見えないなｗ

こうやって質の低いコードを参考にして
平均的なレベルが低くなるのはどうしたらいいのか。

ちょっと質問させてください。

以下のサイトの一番の下のサンプルを使ってアコーディオン・メニューを作ってます。
http://tokidoki-web.com/2013/03/%e3%80%8ejquery%e3%81%a7%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%93%e3%83%aa%e3%83%86%e3%82%a3%e3%82%92%e8%80%83%e6%85%ae%e3%81%97%e3%81%9f%ef%bc%92%e6%ae%b5%e9%9a%8e%e5%b1%a4%e5%bc%8f%e3%82%a2%e3%82%b3/

で、質問なんですが、アコーデオンを展開して、他ページに進んだ後、
「戻る」ボタンで戻ったとき、アコーディオンがすべて閉じてしまってる。

戻ったとき、直前の状態を再現するには、どうしたらよいでしょうか？

ちなみに、javasrciptは初心者以下のスキルです。

まだアコーディオンの話が続いてるのかｗ

>>288で文書構造としては適切ではないといったが、
実はチェックボックスで作っていれば戻るで戻った時状態が
保存されている（事が多い）というメリットが有るんだよな。

”事が多い” っていうのは、戻るを押した時にフォームの値が
前の状態になっているかはブラウザによって挙動が違うので。

クッキー・セッションを使う方法もあるが余計なデータが増えるのと
戻る以外でページを表示した時も状態が保存されてるという問題がある
（これがいいか悪いかは別として）

チェックボックスを使わないとして戻るを押した時だけ戻すには
隠しinputにでも開閉状態をシリアライズしておくといいのかな？
しかし隠しinputを状態保存のためだけに文書構造的に気持ち悪い。

そもそも開閉状態をURLに入れるべきか。
方法はHistory APIもしくはhashbang

>>303
お前の意見なんてどうでもいいわ
本当になんとかしたいなら、プログラミング教室の先生にでもなれ

>>302
submitだろ

そう、間違った　submit
打ち間違えた
全然できない

>>306
プログラミング教室の先生になったら、

質の悪いQ&Aがなくなるとでも思ってるの？

そんな事はどうでもいいから、
jQueryでphpのstrip_tag()と同じことができる
方法を考えて

javascript板から誘導されて来ました。

【環境】IE10以降・Firefox・Chrome・スマートフォン
【ライブラリ】Bootstrap + jQuery
【何をしたのか】appendで追加してもbootstrapの機能が動かない
【エラーメッセージ】特になし
【期待する結果】bootstrapの機能を含むものをappendで追加しても機能するようにしたい
【サンプルコード】

bootstrapとjQueryでサイトを作っています。
画像ファイルが追加されたら自動的に追加されるようにアクションがあったら以下のコードが動くようにしています。

$("#image-box").append(url);

<div id="image-box"></div>にどんどん画像が追加されていく仕組みです。
urlには画像のアドレスとbootstrapの機能であるtooltipの属性などが記載されています。

例：<img src="sample.jpg" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

しかし画像は表示されますがtooltipが表示されません。
例で表示されているものをappendではなく最初から表示した場合はtooltipが表示されるのでコードに間違いがあるわけではないようです。
appendで追加した場合はjavascriptなどの機能は動かない場合があるのでしょうか？

>>311

本スレの方でレスしておきました。
http://peace.2ch.net/test/read.cgi/hp/1409325796/

ところでjavascript板ってどこ？ｗ
誘導元を検索したけどここしか見つからなった。

普通に実行のタイミングの問題だろ

jQスレでこちらが誘導されてまして、どなたかお願いします。

【環境】 IE9, Fox31
【ライブラリ】 jQuery 1.11.1
【何をしたのか】動的要素の読み込み後、on("ready")または記述時点実行
【エラーメッセージ】特になく、目的処理が反応しないだけ
【期待する結果】動的要素の下位要素のcss変更（addClass等）
【サンプルコード】下記参照

動的要素をイベントではなく読み込み終了後1度だけメソッドとして
実行したいのですがうまくいきません。やっていることは

(1)空divにloadで読み込ませ、ここまでは画面表示もCSSも意図通り。
<div id="box"></div> ← $("#box").load("abc.html");
（abc.htmlは単体でも開けるul/liやpなど単純な内容）

(2)これを本来このようにしたいのですがこれだと動的要素を認識しないので
$("#box_中の要素").css(やりたい処理);

(3)delegate的イベントに。それでも中の要素は反応せず。loadでも同様。
$("#box").on("ready","中の要素",function(){ （やりたい処理） });

(4)ちなみに一般的方法(?)でイベントを起こしてやると中の要素は意図通り処理されます。
またtriggerでこのイベントを起こしても処理されます。
$("#box").on("click","中の要素",function(){ （やりたい処理） });

そのページを読み込み後、jQの処理が進んで、clickなどせずにその記述の時点で
”やりたい処理”を行うにはどうしたらいいでしょうか？そもそも可能でしょうか？
最悪bodyにmouseoverで拾う手も考えましたが重くなるのは避けたいです。
よろしくお願いします。

>>314
.load() のコールバックでもダメだったのか？
$("#box").load("abc.html", function () { /* やりたい放題 */ });

>>314
それくらいの内容になるなら
ちゃんとjQueryも全ての記述をここに出した方がいいんじゃないか？
全然関係ないトコでミスってる可能性もあるし。

もしくは、単純化したコードにしてみて、それを出すとか。

>>315
レスありがとうございます。その形は試してないですがそれに書き換えるとかなり煩雑になりそうで
loadの行はなるべくその1行で済ませたいです。というのは実際はもっと複雑でして
div#boxは複数あり、abc.htmlも複数のdiｖがidで割り振ってあり、
$("#box div").each(function(){
　　//あれこれ、あれこれ、あれこれ x算出;
　　$(this).load("abc.html div#" + x);
});
という感じで更にUIがからんでたりでこの辺はあまり手をつけたくないという気持ちです。
その後またあれこれやってreadyやloadを試みてるのですがそこでできるとありがたいです。

>>316
レスありがとうございます。
ということはon("ready")などで通常はできるということでしょうか？

全て記述は荒らしに間違えられそうなので遠慮しておきます。
単純化は大変ですが検討してみます。

>>311
お礼は？

>>314

ここは技術力が低いから参考にならないよ

こっちが本筋。

+ JavaScript の質問用スレッド vol.119 +
http://peace.2ch.net/test/read.cgi/hp/1409325796/

そっちは日記の代わりにしてるバカが居座ってるからなあ

>>320
仕様書を読めない思い込みの激しい人が粘着してくるからお勧めしない

>>317
load() は非同期だから普通は callback で受ける
callback が嫌なら Deferred や Promise を使うしかない
http://api.jquery.com/category/deferred-object/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

.ajaxComplete() 使って何とかならんかな

何を使っても結局は function で受けるんだから callback 内に別の場所にある function を call して変わらないんじゃないか、とよく思う
書き方の問題だよな

>>317
> その後またあれこれやってreadyやloadを試みてるのですがそこでできるとありがたいです。

その考えが間違いだな。

正しい方法でやらないから、あれこれやる羽目になってるんだよ。

正しい方法といえば、そもそもcssメソッドを使うことは
多くの場合、間違った方法なんだが、早いうちに正しい方法を学ばないと
どんどんこんがらがるぞ。もう手遅れみたいだけど。

あなたが何故手遅れになった（他の方法をやりたくないと思っているか）というと
正しい方法を知らないで間違ったことをしているからだよ。

もしソース全部出せるなら、
そのコードを半分にしてみせよう。

auのページで見かけたんですが
var pl = pl || {};
は多用されますか？
これはどういう風に解釈すればいいんでしょうか。

head内のscriptは以下でした

<script type="text/javascript">

var pl = pl || {};
pl.jq = pl.jq || jQuery.noConflict(true);
pl.jq("#btn_close").on("click", function ()
{
pl.jq("#hdn_btn_close").click();
return false;
});

</script>

>>314の形は某有名サイトの解説を元にそう書いたのですが・・・
通常コールバックなのですね、了解しました。
みなさん、特に>>315,323さんご指摘ありがとうございます。

>>326
あれこれは別の処理ということです。>>317
説明を簡潔にするためたまたまcss()で書きましたが実際は使用しておらずaddClass()などです。
でもレスありがとうございます。

>>320
その271別人です。そのタイムスタンプ勤務中で2chどころではないし。
なんなんすかね・・・。

>>330
本物を自称するならID出すなりトリップつけたほうが良いですよ
あと、このスレで回答もらったようだし、レスぐらいはしては？

＞レスぐらいはしては？

は？

トリップつけました。よろしくお願いします。

早く答え書いてくれませんかね？

もう答えは出てるように見えるけど？

>>328
||演算子の短絡評価を応用した省略記法です。
左がtrueだったら左を採用、そうでなければ右を採用ということです。
ワンライナーでも使われる言語では多用されていますが
jsではそれほどでもないと思います。

>>336
おめぇ、センスねぇなぁｗ

>>333
>>334
は偽者、キモすぎ。何が楽しいのでしょう？もう１つのスレの人？

このスレ初めて利用させていただきましたがまさかこんな人がいるとは。
スレ自体デフォでID出したほうがいいと思いますが
次（あるかどうかですが）からIDやトリップも検討します。

問題の件はoｎ("ready")で別の方法またはご指摘の方法で解決しました。
どちらがいいかは吟味してみます。


（またこれにも偽が出てくるのでしょうかね。
ということでこれで最後にします。出てきたら間違いなく偽者です。）
回答者さんには感謝です。

>>338はわかりやすい偽物だなｗ

>>338
だから本スレに行けって言ったのに・・・。

>>340
本スレも偽者が出ているから変わらん

>>339
キモイよ

>>341
本スレはそのままコピペしてるアホがいるしな

>>342
図星だったかｗ

jQueryのテンプレートプラグイン、「jquery-tmpl」って使ってるサイトあまりみないね。
SEO考えなくて良いのであればとても便利そうなんだが

>>344
JS強制する時点でSEOは全く考慮されてないじゃない(Node,js を使うなら別だけど)

>>339
↑こういうやつってひねくれた記述すんだろな

>>345
楽天とかヤフーショッピングみたいなphp使えないサーバーがあって。。

>>347
だからJS醸成するからSEO対策になってないんじゃない
作業を効率化するなら制作環境でテンプレートエンジンを使うぐらいしかないでしょ

×　JS醸成
○　JS強制

>>348
うん。質問の意図としては
jquery-tmplって便利？問題は特にない？ってことを聞きたかったんだが。

テンプレートとか使うレベルならMVCにするんじゃね？

グローバル変数を変える方法ってないのかな
var n=5;
を
何かイベント起こったら
n=4
またなんかおこったら
n=3
になるようにしたい。

>>352
すればいい。だがグローバル変数は使うな。
ローカル変数を変えればいいだろ。

変数の意味分かってるのかねｗ

なんとなくずっと prototype.js 使ってたんですが、
早めに jquery に移行したほうがいいですかね？
けっこう膨大な数なんで全部移行しようとすると数ヶ月はかかりそうですが

>>355
早めというか、もう遅いがｗ

jQueryはprototype.jsと同居できる機能を持っているから
新しい部分はjQueryに置き換えていけばいい。

俺が推奨する書き方はこう。

jQuery(function($) {
・・・jQuery用のコードを書く

});

こうすれば関数内は普通に$を使ってコードを書くことが出来る。　

noConflictは、jQueryをprototype.jsよりも後に読み込む時に必要。
prptoype.jsよりも先にjQueryを読み込んでいるならなくても良い。

とある画面に戻るたんびに、とある変数が−１される。または＋１される関数を作りたい
みんなならどうやる？

if (とある画面) {
　とある変数--;
}

変数n=5;

Ａ画面　→Ｂ画面→Ａ画面→Ｂ画面
n=5 n=4　　　　n=4　　 n=3

こんな感じにしたい。

そのまま組めよｗ

そのまま組む方法がわからんぜ。っフ

例えばB画面の時に<script language=javascript> n=n-1</script>
ってやってもＡ画面に戻ったらn=5のまんまなんだよ。

>>353の書き込みを見て
function tan(a) {
var a=5;
sessionStorage.setItem("formdata",a);
var n = sessionStorage.getItem("formdata");
n=n-1;
return n;
}
って関数作って、<p><script language=javascript>document.write(tan())</script></p>
ってやってもだめだった。

そりゃ画面遷移するならクッキー食わせなきゃだめだろｗ

>>363
それどうやるの？

ぐぐれよ

画面遷移　クッキー　で探してみるわ
色々ありがとう

<script language="JavaScript">
$(function() {
$(".ck").click(function(){

var test = $(".ck").prop("checked");

if(test === true){

$(this).parent(".but").css("background-color","rgb(255, 153, 204)");

}else{

$(this).parent(".but").css("background-color","rgb(238, 238, 238)");

}
});
});
</script>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

一番上のdivの背景色しか変わらないのですが、どうすれば修正できますか？

>>367
languageはHTML 4.01の時代から
とっくに非推奨になってる古い属性であり、
今はtypeだがhtmlでは省略できるのだから不要。

css()の行がムダに長い。少なくともこう書くべき。
var color = test ? "rgb(255, 153, 204)" : "rgb(238, 238, 238)";
$(this).parent(".but").css("background-color", color);

testは意味がわかりにくいのでcheckedにしよう。$(".ck")は$(this)とか書くべき。
でないと。.ckの一番最初のcheckedの判定になる。
これじゃねーのバグは？ｗ 俺がやると変なコードを直してるだけでバグも直せてしまうｗ

あと適度にスペースを入れよう。

<script>
$(function() {
　　$(".ck").click(function() {
　　　　var checked = $(this).prop("checked");
　　　　var color = checked ? "rgb(255, 153, 204)" : "rgb(238, 238, 238)";
　　　　$(this).parent(".but").css("background-color", color);
　　});
});
</script>

更に言うのなら、css()メソッドは使うべきではない。
"色" は cssファイルもしくはstyle要素で決めて、
JavaScriptからはclassを指定するべきだ。

<style>
　.but { background-color: rgb(255, 153, 204) }
　.but.checked { background-color: rgb(238, 238, 238) }
</style>

そうすると、コードはここまで減る。
<script>
$(function() {
　　$(".ck").click(function() {
　　　　$(this).parent(".but").toggleClass('checked', $(this).prop("checked"));
　　});
});
</script>

これでいけるのか。文字数としては増えてしまったが、
親を探すという気持ち悪い処理をしなくて済む。

$(function() {
　　$(".but").on('click', '.ck', function(event) {
　　　　$(event.delegateTarget).toggleClass('checked', $(this).prop("checked"));
　　});
});

>>368-370

ありがとうございます。
ここまで短くなるんですね

>>370
>>310もお願いします

>>372

jQueryなしでできるから、こっちにいけ

+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.net/test/read.cgi/hp/1410603104/

だめだ、cookieわかんね

■質問です
下記みたいなケースで、<p　class="p1">、<p　class="p2">内にあるaタグのhref属性を
それぞれの<h2>内のaタグのhref属性と同じにしたい場合、どのように書けばよいでしょうか。

<div id="hoge">
<h2><a href="http:aaa.com/">1</a></h2>
〜イレギュラーなタグ〜
<p　class="p1"><a href="">aaa</a></p>
<span　class="p2"><a href="">aaa</a></span>

<h2><a href="http:bbb.com/">2</a></h2>
〜イレギュラーなタグ〜
<p　class="p1"><a href="">bbb</a></p>
<span　class="p2"><a href="">bbb</a></span>

<h2><a href="http:ccc.com/">3</a></h2>
〜イレギュラーなタグ〜
<p　class="p1"><a href="">ccc</a></p>
<span　class="p2"><a href="">ccc</a></span>
</div>

それぞれのhref属性を変数のようにしたいのと、もし可能であればタグの並びや順番に依存したセレクタではなく、
classで指定できるとベストです

宜しくお願いいたします。

タグの並びや順番に依存したセレクタがいやというなら、
順番以外でp1、p2と h2がどうつながるのかわからんのだが。

これだけの情報なら、p1、p2の前のh2としか言いようがないと思うが
イレギュラーなタグにh2が入ってるとまずいし、
”前のh2” ってことは順番に依存してるし答えようがないな。

>>377
すいませんでした。
では、順番も固定で、h2も1度だけという認識で大丈夫です。

聞きたい部分としては
例えば
$(function() {
var rUrl = $('#hoge').find('h2 a').map(function() {
return $(this).attr('href');
}).get();
のようにそれぞれのh2内のaタグのhref属性値を配列等で取得した場合、
それをそれぞれに続く.p1と.p2のaタグに割り当てる方法が知りたいです。

※もちろんこの方法以外でも大丈夫です。

宜しくお願いいたします。

これでいいのか？ 久々にeach使ったほうがわかりやすい課題だな。
でもタグをもう少し構造化したほうがいいと思うが。
仕様が奇妙

$('h2').each(function() {
　　var url = $(this).find('a').attr('href');
　　$(this).nextUntil(this.tagName).filter('.p1, .p2').find('a').attr('href', url);
});

やっぱりthis.tagNameよりもセレクタを指定した方がマシか
あとちょっとnextUntilの第二引数が使えた。

$('h2').each(function() {
　　var url = $(this).find('a').attr('href');
　　$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});

>>375
<p　class="p1"><a href="">aaa</a></p>
<span　class="p2"><a href="">aaa</a></span>

は後から挿入したほうがマシな気がするな。
各セクションをsection要素で括れば、appendChildしやすいだろう。

>>380
できないようです・・。
下記であっておりますでしょうか？？
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});
});
</script>

<div id="hoge">
<h2><a href="http:aaa.com/">1</a></h2>
<p　class="p1"><a href="">aaa</a></p>
<span　class="p2"><a href="">aaa</a></span>

<h2><a href="http:bbb.com/">2</a></h2>
<p　class="p1"><a href="">bbb</a></p>
<span　class="p2"><a href="">bbb</a></span>

<h2><a href="http:ccc.com/">3</a></h2>
<p　class="p1"><a href="">ccc</a></p>
<span　class="p2"><a href="">ccc</a></span>
</div>

>>382
あー、根本的な所を間違ってるよ。

君、URL間違ってるから。

全角空白だな

>>384
それもあったなｗ

明らかにわかる所は、無意識に修正しちゃったからなｗ

なんかワロタｗｗｗ

ぐはっ
なんで全角だ？？

できました。有難うございました！

Backbone.View のid/className/tag/elの違いがよくわかりません
el --> 操作対象のオブジェクト(DOM)がセットされていることはわかりましたが、id/className/tagは何のために使うんでしょうか？

それと、Backbone.Viewをインスタンス化した時に、インスタンスはDOMと必ず結び付けられていますか？

IE8のみmediaqueryを読み込んでくれない
ぐぐって出る解決策は全部見たが原因わからない…誰かわかる人いたら教えてください…

>>389
qｕｅｒｙ違い。

まあｊＱｕｅｒｙでも解決できるだろうけど

>>389
IE8はmediaquery(CSSの機能) をサポートしない

すみません言葉不足でした
ｊＱｕｅｒｙのcss-mediaqueryを使ってるんですがなぜかIE8で読んでくれなくなって…ということでした

そもそもmediaqueryやレスポンシブ用のCSS/JSは
PC以外に読み込まれれば良いものだから
IE8で読み込まれる想定がおかしいのでは？

PCのIE8でウインドウサイズを小さくされたときに最適化したいという事だろうか

>>392
例えばこれとか
http://d.hatena.ne.jp/kzhrk/touch/20121022/1350920894

>>393
mediaquery は環境に応じたデザイン/レイアウトを提供するための機能であってデバイス依存は存在しない
第一、あなたの考え方に沿うなら、PCとPC以外で出力するCSSを変化させなければならない
どのデバイスにも同じCSSを提供するのが目的だから、その考え方は根底からずれているように思う

>>395
もとのCSSをPCレイアウト基準で作って、モバイル、タブレット最適化にメディアクエリ使うってなら間違いでもないでしょ。
モバイルファーストなら君の言う通りだが。
そもそもどちらの方法で作ったのか？
どのCSSプロパティが効かないのか？で、
CSSのブラウザ依存問題か、jquery側の問題なのか分かれてくる。

>>396
PCファーストとかモバイルファーストと言ってる時点でずれてると思うけどね
PCのモニタ解像度だって多種多様なわけだし、解像度別に分けるのがmediaqueryの意義

>>397
いや、みんなそんな事知ってるよ。

レスポンシブさせるために、
pc中解像度は960px
タブレット向きで768pxまで
スマホで480以下だろ？
で、WinPCでIE8使ってる奴の解像度が今時768以下とかあるか？
逆に今時IE8使ってるような無頓着な奴が1280以上の高解像度使ってるかも怪しいし。
ならPC中解像度を基準にレスポンシブ作って、
この段階でIE8対策バッチリしといて
それ以下のレイアウトはjquery使わずとも普通にメディアクエリ使えばいいんじゃないか？

>>398
君の想定する以上に解像度の区分けがあるかもしれないだろ
IE8 で mediaquery が不要とは限らない

>>399
デカいサイズなんてフルードレイアウトなり全部リキッドで作りゃすむじゃん。

で、どんなプロパティ適応させたいんだよ？
メディアクエリで使うようなプロパティなんて、
固定とリキッドの切替えか、displayのon-off、floatの切り替えくらいだろう。
それでまかなえないようなレイアウト作ってる段階で設計ミスだろ。

俺は一般論言ってるだけ。

IE8でメディアクエリきかない
こんな情報だけでズレてるなど想定がどうのなど俺はエスパーじゃないからわからんわ。後は任せた。

実際の所、mediaqueryの機能見ると、どう考えてもクロスデバイスに向けた内容じゃん。
スマホやタブレットが出始めてから各社ベンダーやW3Cがせっせと対応しているようにしか思えない。

解像度だってどう考えてもスマホ対応を考えた内容であって
IE8やPCサイトの解像度なんてそもそもの目的じゃないよ。

スマホサイトをPCの、しかもIEで見て、表示がおかしいですって言ってるようなもんだ。

なかなか思い込みの激しい人だな

後は任せたと言いながら、加えて言う内容じゃないのは確かだね

スマホ対応するためにレスポンシブでサイト作りました。
IE FF ch sa iphone Androidで確認してクラに提出すると
「IE8で見たときになぜかウィンドウ小さくしてもレイアウトが変化しない！他のブラウザは出来てるのに！IE8でもちゃんと見えるようにしてください！」
と、クレームが入る。

わかりました！ではまずスマホで動くIE8をご用意ください。

一休さんか

>>403
俺はスマホからだからメディアクエリを英語では書いてないだろよ。
もういい加減スレ違いだしやめようぜ。

質問者なんですが、なんかすみませんでした…
@media screen and (max-width: XXpx)
これ自体がIE８ではきかなくなっていました
IE8でスマホとか意味わからないとは自分も思うのですが、対応してね！といわれてしまうと従うほかなくて…

>>394
＞IE7,IE8だとローカル環境で機能しない
この箇所を見落としていました…ローカルでしか見ていませんでした。これが原因な気がしますそうであってほしい
一度テストサーバーにあげてみます、ありがとうございました

>>407
付け加えるとローカルでもサーバを立てれば動くはず
ローカルテストはローカルサーバを立ち上げてやるのが基本だよ

ほれ見ろ
やはりIE8でスマホじゃないか。

誰だよPCの解像度がどーのとか言ってた勘の悪いやつ。

>>393　で正解じゃないか。

しかももっと前に>>390で結論だしてたのにな。

さらに付け加えると
>>407のクライアント？が言っているのは
「IE8で可変に対応してね」と言っているのではなく、
IE8に対応してね（普通にPCで見た時）
という事。

苦手意識が強かったり、逆に覚えたてでいい気になってると
すぐそれに結びつけて考えてしまいがちだよな。

>>409-410
恥の上塗りという言葉を知ってるかね
IE8で機能させたいのだから>>893は見当外れ

>>411
いや、質問者が先方の依頼を勘違いしている可能性に100ガバスかけるよ。

無駄な作業を助長してどうすんの？

そもそもそんなマイナーな事するならIE8はJSでやった方がよっぽど早い。
しかもここはJavaScriptのスレ。

スレチで続けてすみません、これで最後にしときます
IE8でスマホ対応（PCにおけるウィンドウ可変）でした。
一度見せて、不具合として修正を申し付けられているので勘違いではないと思う

でも確かにJSで切り替えしたほうが早かったですね

>>412
> いや、質問者が先方の依頼を勘違いしている可能性に100ガバスかけるよ。
憶測も程々にしたら

> しかもここはJavaScriptのスレ。
君は>>392で css3-mediaqueries-js の質問だと宣言されている事を分かってないよね
JavaScript の質問だからこのスレで質問するのは間違ってない
http://code.google.com/p/css3-mediaqueries-js/
>>389時点では質問の仕方が悪いと思うけどね

>>414
>>413だってよｗ

>>415
勘違いしてないと書いてあるだろ
日本語読めないのか

スマホ対応=リキッドレイアウトと思ってる奴の言葉なんて何も信用ならんってことじゃないの？
ひとりですごく盛り上がっちゃってるみたいだけど、冷静に文脈読めるようになれば幸せになれると思うよ

スマホで動くIE8なんてあるの？

なんで存在しないスマホ版IE8に
対応しようとしてるの？

馬鹿じゃないかな。

そう、バカなんだと思うよ

>>417
一人だと思ってる時点ですでに憶測が外れてるし、冷静じゃないし馬鹿まる出しだ。
ちなみに俺は質問者と憶測野郎は同一だと勘違いして馬鹿だわ。反省する。

この人は誰と戦っているのでしょうね

俺だよ、オレオレ

ウィアーザチャンプ

>>414
どうもすいませんでした！

つ100ガバス

受け取ってくれ

jQueryのクリック動作について質問です。

$('.test').click(function () {
〜ページの内容が変わる〜
});

こういうクリック動作があるとして、ボタンなどをクリックして実行するのではなく、
ページが読み込まれた段階で「クリックしたことにする」
ような方法ってありますでしょうか？

「〜ページの内容が変わる〜」のコード箇所を
外部関数にする方法以外であれば教えて下さい。

$('.test').trigger("click");

triggerだと本当にクリックしたのと近くなる。
それがいい時もあるが、関数を実行したいだけなら
triggerHandlerの方が軽い。

なお、「〜ページの内容が変わる〜」のコード箇所を
外部関数にする方法が一番良い。

>>426-427
ありがとうございます。ぜひ参考にさせていただきます。

【環境】Chrome
【ライブラリ】jQuery 2.1.1
【何をしたのか】ajaxでpost送信する
【エラーメッセージ】403 forbiddenエラーがコンソールに表示される
【期待する結果】POSTしたい
【サンプルコード】
var sample = '&lt;script&gt;alert(&apos;sample&apos;)&lt;/script&gt;';
$.ajax({
url: 'test',
type:'post',
timeout:1000,
data: {'sample': sample},
success: function(data, status, jqXHR)
{
alert("OK");
},
error: function(data, status, jqXHR)
{
console.log(data);
console.log(status);
console.log(jqXHR);
},
});

ログを確認してもtestそのものへのアクセスは無く403 forbiddenエラーとなっています。
var sampleに普通の文章を入れた場合は送信できています。
HTMLエンティティー化しているので大丈夫かとは思っていたのですが原因がわかりません。
問題点などあればご教示いただければと思います。

>>429
サーバサイドの問題である可能性があるのでHTMLのformで同じ値を送信して検証するといいと思う

>>430
サーバー側のセキュリティによって怪しい文字列がカットされておりました。
助かりました。ありがとうございます。

一意に求まる質問じゃないのですが…
jQueryのParticleground(ttp://jnicol.github.io/particleground/)みたいな動きが好きです。
この他に似たような動きのある背景が作れるライブラリは無いでしょうか？

jQueryのバリデーションのライブラリ探してるんだけど、今は何が良いの？
exValidationっての見たけど開発が止まっているようだ
最後の更新が3年前
validation-Engineってのは最終は2ヶ月前らしいけど
日本語対応してるのであればやっぱこの2つのうちどっちかなのかな？

>>433
validation なんて大したコード量ではありませんし、自分で見て必要な機能が揃っていればいいのでは？

最も、HTML5 で validation用の属性(pattern 属性など)が出来てきてライブラリの必要性は減っているでしょうし、polyfillコードを書けば十分という気はしますね。
https://html.spec.whatwg.org/multipage/forms.html#attr-input-pattern

そのpolyfillが大変なんじゃねーか。

pattern属性、require、各種typeのデフォルトの処理
そしてエラーの時に勝手に出てくるメッセージ

それらをコントロールするための
JavaScriptインターフェース

きりがないぞ。

>>435
一つ一つは大したことないと思いますけどね
大変と思うなら既存のPolyfillを使えばいいのでは？

全部合わせれば大変だろ。
入力チェックメソッドだけじゃなくて、
入力チェックに引っかかったら
画面にポップアップが表示されて
POSTできないなどといった処理まであるんだから。

どうもHTML5のValidationの機能がどれだけあるかわかってないみたいだからリンク出しておくわ
http://girliemac.com/blog/2012/12/01/html5-form-validation-jp/

俺HTML5使ってないんだけど、上のスレ読んだがvalidation設定のために正規表現使わんといかんのか？

>>437-438
その時、必要な機能だけ実装すればいいでしょう
全ての機能を必要とするけーすなんて稀です

何度も言いますが、面倒なら既存のライブラリを使えばいいでしょう
なぜそんなに大変ということに拘るんです？

>>438
もっとたくさんあると思ったら、required属性、pattern属性だけなのか
CSSの構文解析を省けば難易度はそれ程高くないな

調べてみたけど、h5validate.js のコードは307行しかない(互換性は知らんけど)
https://github.com/ericelliott/h5Validate

ttp://pastebin.com/Lm4Wht2x
AngularJSで上記のように配列を表示して、配列を追加しても表示が更新されません。
listはngRepatで参照してるだけでバインドされてないからなのかと思いましたが、
それが正しい場合どうすればいいかが判りません…

>>443
1つのng-controller="bindingCtrl"の中に両方入れないと
ttp://pastebin.com/CfcSgNM7

データを表示する表（グリッド）で、
グリッドのサイズが可変、テーブル全体のサイズも可変の物を作りたいと思ってます。

【ライブラリ】
jquery-1.11.1.min.js
テーブル全体のサイズ変更(resizeable)　jquery-ui.min.js
ttp://jqueryui.com/resizable/
グリッドのサイズ可変　jquery.jqGrid.min.js
ttp://trirand.com/blog/jqgrid/jqgrid.html

それぞれ片方ずつはうまくいくんですが、両方やると動いてくれず悩んでいます。

【サンプルコード】
◆html
<table id="tbl_comment"><tr><td bgcolor="#eeeeee">sample</td></tr></table>

◆js
$(document).ready(function() {
　$('#tbl_comment').resizable({});

　$("#tbl_comment").jqGrid({
　　colModel: [{name:'test'}]
　});
　var mydata = [
　　{test:"aaaa"}
　];
　for(var i=0;i<=mydata.length;i++) jQuery("#tbl_comment").jqGrid('addRowData',i+1,mydata[i]);
}

この解決策、または他に実現可能なライブラリをご存じの方がいましたら、
ご教示お願いしますm(_ _)m

>>445
自己解決。
http://d.hatena.ne.jp/renmen/20110204/1296821522

要素一つ被せて、onresizeで連動するようにしてうまくいきました。

jQueryって学ぶほど
ほんとスゲーなって思う

■質問です
.ajax()で

1.htmlというファイルを#hoge1に読み込み、
2.htmlというファイルを#hoge2に読み込みたい場合
どのように記述したらよろしいでしょうか？
（ajaxメソッドの引数「url」に複数のURL指定する事は可能でしょうか？）

$.ajax({
type: 'GET',
url: '1.html',
dataType: 'html',
success: function(data) {
$('#hoge1').append(data);
},
error:function() {
alert('LoadError');
},
});

>>448

$('#hoge1').load('1.html');
$('#hoge2').load('2.html');

>>449
ありがとうございます。

ただ、.load()でなく、.ajax()で簡潔に書く方法が知りたいです。
ユーザー定義関数か配列を使った方法でもよいです。
宜しくお願いします。

すいません自己解決しました
関数の話でしたすいません

　
お世話になります。
私、責任者の加茂と申します。以後、宜しくお願い致します。
http://www.apamanshop.com/membersite/27009206/images/kamo.jpg
浪速建設様の見解と致しましては、メールによる対応に関しましては
受付しないということで、当初より返信を行っていないようで、今後につい
てもメールや書面での対応は致しかねるというお答えでした。
　
このように現在まで６通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
　
私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に１１通のメールを頂戴しているか不明なところであります。
　
　http://s-at-e.net/scurl/BRS.html
　http://s-at-e.net/scurl/BAYONETTA.html
　http://s-at-e.net/scurl/JOURNEY.html
　
http://s-at-e.net/scurl/kabetokyojinto.html
　
　http://s-at-e.net/scurl/2012.html
　http://s-at-e.net/scurl/Prometheus.html
　http://s-at-e.net/scurl/Avatar.html
　
大阪府八尾市上之島町南 ４-１１ クリスタル通り２番館203
に入居の引きこもりニートから長期にわたる執拗な嫌がらせを受けています。
この入居者かその家族、親類などについてご存知の方はお知らせ下さい。
[email protected]

【環境】OSはWindows 8.1、ブラウザはchrome 38
【ライブラリ】jQuery
【何をしたのか】下のソースを書いてid="test"をクリックしたらPOST通信したいです
【エラーメッセージ】すみません、出ないです
【期待する結果】id="test"をクリックしたらPOST通信をして、
client.jspで受け取りnを表示したいです
【サンプルコード】
・test.html
----------
$(function(){
$('#test').click(
function(){
$.ajax({
type: 'post',
url: 'client.jsp',
data: {
'n': 'Hello'
},
success: function(data){
alert(data);
}
});
}
);
});
-----------

・client.jsp
----------
<% String n = request.getParameter("n"); %>
<%=n%>
----------

>>453
・開発者ツールでPOST送信した値、client.jspの出力結果を確認
・alert() の結果を確認
この情報から切り分けする

$.eachで第一引数には何も指定したくなくて、第二引数のみ指定したい場合
どのように書くのが一般的でしょうか？

$.each( array1, function(指定したくない,value){
$('#disp').append(value);
});

>>455
適当な引数名を付与して使わない
http://api.jquery.com/jQuery.each/

>>455
ありがとうございます。
jQueryサイトはいつも翻訳ナシで読んでるんですか？

>>457
簡単な英文ならそのまま読むし、読めなければ機械翻訳や辞書を使う
信頼性の観点から基本的に公式サイトと公式の翻訳サイトしか信用しない
後で気が付いたが、仮引数を完全になくして arguments[1] で参照する方法もあるな(個人的に each() でそこまでしようとは思わないが)

thisでいいんじゃね

>>458
公式であっても信頼が置けるとは限らないと思うが

そもそも英文の読解力、というか日本語の読解力ですら
信頼が置けないことが多いがな

>>460
公式以上に信頼性が高いサイトがあるなら教えてほしい
個人的には一次情報をあたるのは基本だと思うんだが

海外のライブラリを使うなら英語は読めてしかるべき
読めないなら信頼性以前の問題だと思う

jquery.xdomainajax.jsというかYQLが死んでるっぽいんですけど、
ajaxのクロスドメイン対策の代案として何か良いのってありますか？

jQuery（javascript）部分の処理スピード計測を
console.time()とかDateオブジェクトとかで自分でやるのではなくて
簡単に計測できるサイトとかないですかね？

>>463
http://jsperf.com/

【環境】Windows7 32bit, Firefox 33.0.1, Internet Explorer11.0.9600.17358
【ライブラリ】jQuery 2.1.1
【何をしたのか】画面上部にulタグ・liタグ・aタグとjQueryでプルダウンメニューを付けています。
そのメニューの下にiframe(1)を設置しています。
展開したプルダウンメニューホバーで(1)と同じサイズ・位置のiframe(2)を表示させようとしています。
なぜこういうことをしたいかと言うと、クリックする前にページの中身が見れてそれによってクリックしたくなってくれたらいいなと言うのと、
クリックしていないのに(1)を書き換えるとやっぱり書き換える前の(1)のページを見たいと思った時にはもう一度選ばなくてはならなくなるので、
(2)を作ってそこに仮表示な感じで出そうと思っています。
でも展開されたメニューの上に(2)が表示されてしまっているのか、メニューが消えてしまって(2)も消えてしまっているようです。
cssでx-indexを設定してみたりもしたのですが、それでも同じでした。
IEで見てみるとまったく反応していないようでした。
【エラーメッセージ】エラーメッセージは特にありません。
【期待する結果】展開したプルダウンメニューホバーで(1)と同じサイズ・位置のiframe(2)をメニューの下に表示される。
【サンプルコード】html・js・cssファイルをまとめたzip下記にアップしました。
http://fast-uploader.com/file/6971222174298/

↓この「Focused」っていうｊQueryプラグインを使いたいのですが
Focused：http://jtwalters.github.io/jquery-focused/
デモ：https://rawgit.com/jtwalters/jquery-focused/master/demo/index.html
期待通りに動いてくれたと思ったけどIE8だとうまく表示されません
<!--[if lt IE 9]>でjQuery1.9も読み込ませてるんだけどだめみたいで
なんか方法ないですかね

参考書を読んでゲームを作っているのですが、仕様通りに動きません。
緑色の画像があって、その画像は何もしないと落下するのですが、
下キーを押すと緑色の画像が上昇し、壁にあたったら、ピンク色の画像に変わって、ゲームオーバーって感じのゲームなんですが、
参考書通り打ってるのに落下しないし、なんのキーを押しても上にあがりません。
これを何もしなかったら落下し、↓キーで上昇する感じにしたいです。
どなたか教えてください。

こちらがソースです。
#main{
width:800px;
height:600px;
background-color:##00cc00;
position:absolute;
overflow:hidden;
}
#ship{
top:250px;
left:0px;
width:150px;
height:97px;
position:absolute;
z-index:100;
}
#bang{
width:200px;
height:200px;
position:absolute;
z-index:101;
visibility:hidden;
}

</style>
<script type="text/javascript">
var y=250,v=0,keyDown =false,WALLS =80,score=0;
var walls=[],slope=0,timer,ship,main;
function init(){
main =document.getElementById('main');
ship =document.getElementById('ship');
for(var i=0;i<WALLS;i++){
walls[i]=document.createElement("div");
walls[i].style.position ="absolute";
walls[i].style.top ="100px";
walls[i].style.left =i*10+"px";
walls[i].style.width ="10px";
walls[i].style.height = "400px";
walls[i].style.backgroundColor ="#333333";
main.appendChild(walls[i]);
}
slope =Math.floor(Math.random()*5)+1;
timer =setInterval(mainloop,50);
window.addEventListener('keydown',function(){keyDown =true;});
window.addEventListener('keyup',function(){keyDown = false;});
}

あ、解決しました。

できれば今週の金曜までに完成させたいとも思っているので、
もっと具体的に書いてみます。

今作成しているページは、
私が所属している研究室主催のホームページコンテストに応募されたホームページを一般の人が閲覧するためのページです。
一応もともと先生が作ったページがあるのですが、そのページには不便だと感じる部分がいろいろあったので、
それを自分なりに改良したページを作ってみようと思っています。
先生のページだと作品を見ていてメニューに戻りにくくなってしまうこともあるので、
jQueryなどを使ったプルダウンメニュー＋iframeで必ずメニューが消えてしまわないようにしたいと考えています。
また、先生のページだと応募作品へのリンクは連番数字だけだったりもするので、
私が作っているメニューにマウスカーソルを当てるとそのページを見えるようにして、
さらにクリックして作品を見てみたくなるといいなと思っています。
(本当に見たくなるかどうかは作品次第でしょうけども。)
iframeにした理由は、まず私たちが応募された作品に手を出すことはできないという理由もありますが、
一番の理由はiframeにした方が楽に作ってしまえると思ったからです。
仮表示と称している部分は画像でもよかったんですけど、
作品の数が80を超えるので用意するのが面倒だと思ったのと、
公開する2日間のためだけに作るのはもったいないとか
同じようにiframeにしてしまった方が楽だと思ったからです。
元のiframeを書き換えないようにしているのは、
まだクリックしていないので書き換えるべきではないだろうと思ったからです。

「宿題出されたけどオレにはデキないからお前らやれや
　期限は金曜日までな。よろしく」

まで読んだ。

宿題ではないです。
自分で勝手にやってることです。
今度のゼミのときに見せられたらいいなと思って勝手に締め切りを書いてしまいました。
丸投げをと言う気持ちではないです。
締め切りの話しはしないべきでしたかね。
(言うことでもないかもしれませんが、私は女子なのでオレじゃないです。)

とりあえずメニューは作れています。
(あとはリンクをすべて入れるだけ。)
jQueryでiframeのsrcを変えたりとかもできました。
問題はjQueryで非表示にしていたiframeを表示させた時に、
メニューの上に出てしまっているのかメニューが消えてしまったりしていることです。
表示順をどうにかすればいいんだと思って、cssでx-indexを設定してみました。
ですが、設定方法が違うのか状況に変化は見られませんでした。
x-indexって数字が上の方が前面ですよね？

私は今回初めてjQueryを使ってたもので、
メニューは下記サイトのもののリンクやデザインを変えているだけです。

jQueryでプルダウンメニュー（たった5行で！）
http://www.finefinefine.jp/web/kiji1581/

iframeの表示/非表示・src変更などは上記などを参考に自分なりに作ったものです。
jQueryのshowって必ず最前面に来るようになってたりするんですかね？

iframe・frameが多重に入れ子になっていて、その中の全てのbodyタグが
<body style="zoom:0.01">
となっています。
このzoomを全て取り除く方法はありますか？

>>474
contentWindowから各bodyを参照すればいい
クロスドメインなら相手サーバ側でクロスドメインを許可する必要があるが

cssを使わずに、一つ目のbody要素にstyle="display: none"を指定したいと思っています。
<body　style="display">
を実現したいと思っています。

document.getElementsByTagName('body')[0].setAttribute( 'style', 'display:none' );
は希望どおりの動作が返ってきたのですが、
jQuery("body")[0].attr({"style": "display: none"});
はエラーが返ってきてしまいました。

エラー内容：
Uncaught TypeError: undefined is not a function

jQuery("body")だとbody要素が返ってきましたので、jQueryは入っていると思います。
なぜエラーになるのでしょうか。

以下3つなど、色々試したのですが、よくわかりませんでした。（以下3つは正常に動きました）
jQuery("body");
jQuery("body")[0];
jQuery("body").attr({"style": "display:none"});

document.getElementsByTagName〜
はあまり書きたくないです・・・。
分かる方、ご回答の方よろしくお願いします。

jQuery使ってるのに、なんでstyle属性なんか使うのか？

$("body").css('display', 'none');

でいいじゃん。

もし、<head>の中に書くのなら

$(function() {
$("body").css('display', 'none');
});

このように書く必要がある。

$("span") これは複数のspan要素をラップしたjQueryオブジェクト

$("span").css("color", "red") とするだけで"全ての"
span要素の色が赤くなる。

全てっていうのが重要。jQueryオブジェクトというのは0個以上の
要素の集まり。（注意 0個もあり得る）

その要素の集まりに一括して処理を適用できる。
jQueryを使うなら一個ずつ処理しようと考えてはいけない。
0個以上を処理するとかんがえる。

で$("span")[0]をやるとせっかく便利になったjQueryオブジェクトから
一個の要素を取り出す。jQueryではない、通常の不便なDOM要素

>>476
jQuery('body:first-of-type')ってこと？

>>476
回りくどいことをやってるな。頑張れ。
知ってると思うが
jQeury()は$()で代用できる、というか普通は$()で書く。
jQuery("body");
は
$("body");

ただ俺も
jQuery("body")[0].attr({"style": "display: none"});
でエラーが返ってくる理由が分からなかった。
一個目のbodyにstyle設定してるんじゃないのか。なんだこれ

body要素にはsetAttributeはあってもattrメソッドなどない。

>>479
body要素は一個しかないんだから、わざわざ一つ目ってやらなくていいよ。

getElementsByTagNameは一つ目を取ってくるしかないが、
jQueryは複数の要素に一括して処理を適用できる設計だから
body要素全部（実際は1個だけ）処理していまえばいい

document.body ではいけないかな？

jQueryのwidth()がIE9だと取得できないのですがなぜでしょうか？

>>484
使い方が間違ってるんじゃないですか？

width()でとった値をwidth()でセットしたものをまたwidth()で
取るとIE9だけ違う値になってる

>>476
HTMLはbody要素が2つ存在することを許さない
body要素は一つしか存在しないことが前提なので一つ目を指定する意味はない
jQueryやgetElementsByTagNameの配列Likeな処理を嫌うのなら、
document.body.style.display = 'none';
で十分だろう

> jQuery("body")[0];
body要素ノードを取得するので DOM API のみ使える
jQuery API を使用したいなら jQuery オブジェクトの状態にしなければならない
>>479が指摘するように jQuery('body:first-of-type') とすれば一つ目のbody要素ノードをjQueryオブジェクトの形式で取得できるので
jQuery('body:first-of-type').hide();
とすれば、あなたの目的は達成できる
が、わざわざ重いjQuery処理をさせてまで一つ目のbody要素ノードを取得する必要性はないと思う

>>484
ちゃんとDOCTYPE書いてる？
標準準拠モードじゃないとおかしくなるよ。

これのどちらかだろうね。

(1) document.body.style.display = 'none';
(2) $(document.body).css('display', 'none');

一つだけなら(1)で十分。(2)は少し長いけど
複数設定したいときは有利になる。

$(document.body).css({display': 'none', position: 'relative'});

すいません。
z-indexを指定してるつもりがx-indexになってました。
z-indexに直したらうまく行きました。
しょうもないことですいませんでした。

$(selector).eq(index)はjQueryオブジェクト
$(selector).get(index)はDOMオブジェクト。$(selector)[index]と同じ
これはとにかく覚えておいた方が便利

どれが一番速い？

そりゃあ、$(selector)[index]じゃない？
ただ後々jQueryオブジェクトを使うならもちろん$(selector).eq(index)がいいだろうけど

$(selector)[index] が最速だろうけど、そこまでやるなら document.querySelector(selector)

すまん、見切れた
そこまでやるなら document.querySelector(selector) にした方が速い
DOM API使うのにjQueryを使う意味はなかろう

ありがとう

速さが問題になってない時に速さを聞くのは、
速さしか良い悪いの比較方法を知らないからなんだろうな。

速さが問題になってないのなら、比較するときに茎べき言葉は
どちらがメンテナンス性高い？ やどちらが短くかける？ だ
メンテナンス性が高くて短い方が、バグも減るし。

http://www.city.miyazaki.miyazaki.jp/
AP層との通信に失敗しました。:[[-] com.fujitsu.mc.a1.scm.MCPiException@- 復帰コード = -
メッセージ = "予期せぬ例外"java.net.NoRouteToHostException"を 検出しました。[java.net.NoRo
uteToHostException: ホストへの経路がありません]" ログ出力済フラグ = true ]

>>497
それは当事者が考えるべきことであなたが心配することじゃない

>>499
当事者に考えさせるために言ってる。
いわば教育。

いちいちあんたが反論することじゃない。

>>500
ケースバイケースなのに速度に問題がないと決めつける必要はない
あなたの視野が狭いだけ

だからどんなケースって聞くわけさ。

そしたら経験上、速度が問題にならないケースが99%

>>492だけどすまんかった。
速度に問題があってパフォチューしてた。
.eq(i)にしてたんだけど、もっと速くなるならと思って聞いてみた。
$(selector)[index]にしてみたけどouterWidth()が
jqueryみたいで残念ながらダメだった。

パフォーマンスチューニングとは
どこが遅いか？って聞くことではなく、

どこにどれだけの時間がかかっているかを
調べることだ。

>>503
jQueryをなくしてみたら？
あるいはアルゴリズムに問題があるのかもしれない

jQueryを隠すと、開発効率が大幅に下がるからなぁ。
それじゃ本末転倒だし。

>>503
outerWidth()でふと思ったんだけど、ひょっとしてブラウザに何度もレンダリングさせて
描画サイズを取得してどうこうって処理でもしてる？

JavaScriptでバナーを貼ると空間ができるのですが
バナー同士くっつけるんには、どうしたらいいのでしょうか？

そりゃcssのお話や
一応jsでもこんな感じでいけるけどな
$(".banner").css("margin","0")

ありがとうございます。

<div id="wrapper">
<div id="slider">
<p class="left">←</p>
<div class="box">あ</div>
<div class="box">い</div>
<div class="box">う</div>
<div class="box">え</div>
　　　　　　　　　　　　：
　　　　　　　　　　　　：
<p class="right">←</p>
</div>

すみません；間違えて途中送信してしまいました

#wrapper{position:relative; width:100%; overflow:hidden;}
#slider{position:absolute left:0; width:9999px;}
.box{width:200px;}


<div id="wrapper">
<p class="left">←</p>
　　<div id="slider">
　　<div class="box">あ</div>
　　<div class="box">い</div>
　　<div class="box">う</div>
　　<div class="box">え</div>
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
　　</div>
<p class="right">←</p>
</div>


$('#wrapper .right').click(function(){
$('#slider').stop().animate({'left':'+=800px'},400);
});


こんな感じのスライダーを作ったのですが、←や→のボタンを速めに連クリックすると
#sliderの位置が中途半端なところで止まってしまったりしてカッコ悪いのですが
こういう場合ってどう対処するのが適切なんでしょうか？

.right(.left)を一度クリックしたら、キッチリ800px分のanimateが終わるまでは
押せないようにすることとかってできますか？

あ・・・　+=800pxではなく-=800pxでした

クリックしたときの処理の最初に追加
if($("#slider").is(":animated")) return;

お早い返答ありがとうございます！解決しました！

>>511-514
何も反応しないけど、何をやりたいの？
サンプルを出すなら動く事を確認してから出して
>>1にサンプルコードを載せるサイトが載ってるでしょ
http://jsfiddle.net/j8fdg81b/

解決したのね

jQuery.ajax でhtmlを取得するときimgタグがあれば画像もロードされますが、これを抑止するオプションはありますか？
Ajax options で、
dataFilter: function (data) {
data = data.replace('img', 'noimg');
return data;
}
のようにすると抑止されるのは確認できましたが、
根本的にimgタグがそのままでもロードさせないオプションがないかと調べていますが見つけられません
よろしくお願いします

>>519
そういったオプションはないと思う
HTMLがそのままでも読み込まないようにしたいならDOMParserしかないだろう
https://developer.mozilla.org/ja/docs/Web/API/DOMParser

>>520
ありがとうございます。調べてみます。

DOMParserは大半のブラウザに対応してないみたいだから使えないだろうね。

imgタグがあってもdocumentに追加していなければ
画像はロードされないはずだから、

var $elements = $(data);

// ここでimgタグを探してsrcからdata-srcに移動
$elements.find('img').each(function() {
　　$(this).data('src') = $(this).attr('src');
　　$(this).removeAttr('src');
});

$(document.body).append(elements);

とかでもいいかも。まあやってることは>>519とはそう変わらないけど
DOMとして解釈している所が違うかな。

>>522
> DOMParserは大半のブラウザに対応してないみたいだから
そんなことはない

> imgタグがあってもdocumentに追加していなければ画像はロードされないはずだから、
new Image でもロードされる

>>523
デスクトップ モバイル
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
XML のサポート (有) (有) (有) (有) (有)
SVG のサポート ? 10.0 (10.0) ? ? ?
HTML のサポート ? 12.0 (12.0) ? ? ?

>>524
出典ぐらい示せ
古いMDNを見てるんじゃあないのか？
実際に使ったことがある人なら情報が古い事にすぐ気がつくはずだが
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

>>519 ですが、画像がロードされるタイミングを理解していなかったことに気がつきました
自分のコードでは$.parsHTML(data)や$(data)を実行したときにロードされていました
一方、DOMPaserを使うとロードされないのですね

そうそう。普通にimg要素を作っちゃうと、documentに追加しなくても勝手にロードしちゃう
逆にこれを利用すると画像のプリロードをすることができる

>>525
Safariはnot supportじゃねーかｗ

>>528
それのどこが「大半のブラウザに対応してない」なんだ？
>>524のような古い情報を持ち出しておいて今更体裁を取り繕っても無駄

じゃあ、言い換えるよ？

DOMParserはSafariに対応していないからだめだろう。

SafariとかIE8とか切り捨てればいいじゃん。
最新のブラウザを使ってるユーザーしかサポートしません。
古い端末を買い換えない奴なんて見捨てればいいんだよ。

>>530
Safari には createHTMLDocument ガあるから問題ない
クロスブラウザを指摘するなら駄目出しだけせずに代替機能を把握しておけ
https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation.createHTMLDocument

一番いいのは、各ブラウザごとの仕様の差を吸収する
ライブラリを使うことなんだよな。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
> DOM Parsing and Serialization
>
> insertAdjacentHTML.js by Eli Grey, implements insertAdjacentHTML
> outerHTML.js by Eli Grey, implements outerHTML
> DOMParser HTML extension by Eli Grey, implements DOMParser text/html support

ここに書いてある、DOMParser HTML extension
https://gist.github.com/eligrey/1129031
ってのを使えばいいのでは？

クロスブラウザ対応のためにはブラウザの機能を直接使うのではなく、
こういうライブラリを使うのが一般的だよ。

この程度の Polyfill なら自前で書けるし、ライブラリを使うまでもないと思うがな
自分のコードに自信を持てない人はライブラリを使う
それだけの話

>>533
> https://gist.github.com/eligrey/1129031
これは酷いな
- DOMParser を使えない実装で ReferenceError
- text/html の決め打ち
- DOCTYPE宣言、head要素を無視

とてもじゃないが、DOMParser の Polyfill とは思えない
まともにコードを読めない人が質の悪いライブラリを使うのなら迷惑この上ない
https://dvcs.w3.org/hg/innerhtml/raw-file/tip/index.html#the-domparser-interface

DOMParserにHTMLも対応させるやつだからDOMParserが無いことは想定してないんでしょ

DOMParser がない実装向けのクロスブラウザが問題だったはずなのになぜこんなコードを紹介したんだろうな

Mozillaが紹介しているからだけど？
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
> DOMParser HTML extension for other browsers
> /* inspired by https://gist.github.com/1129031 */

このスレで名前の上がってたSafariでさえもXMLはサポートしてるんだからDOMParser自体はあるでしょうよ
確かめてないけど

・DOCTYPE宣言がなくてhead要素があるとおかしくなる
・html要素があるとおかしくなる
・IE8以下でReferenceError

クロスブラウザを問うならこのぐらいは見ないと

「MDNにあったら無条件に信じる」は技術者として駄目だろ
DOMParser と createHTMLDocument はそれなりに仕様が異なるのでライブラリで吸収するならもっとコードが長くなる
実際にはその時々で分岐コードを書いてもたいして手間にならないし、間違いがない

いや、手間になるからコード長くなってるんだろｗ

この程度で長いと感じる人もいるんだな

いつも関数一つで数百行を相手にしている人にはそう感じるんですね。

俺なら一行が二行になったら、倍。と感じるわｗ

>>544
> いつも関数一つで数百行を相手にしている人にはそう感じるんですね。
それはおまえの思い込みによる決め付けだ

> 俺なら一行が二行になったら、倍。と感じるわw
必要以上のコード量があるのは無駄だが、「必要な処理が抜けている」との指摘にその反論は的外れだろう
反論したいならMDNのコードが必要十分だという具体的な根拠を出せ
おまえの勝手な思い込みや抽象論はどうでもいい

MDNのコードは足りない。
実際にはもっと多くのコードが必要。

それを自分で作るのが面倒だから
既存のライブラリを使うって話になる。

>>546
ではそのライブラリを掲示してからものをいえ
おまえが手間だと思うのは勝手だが、ライブラリをお勧めされる方の身になって考えろ

> それを自分で作るのが面倒だから既存のライブラリを使うって話になる。
「自分で調べるのが面倒だから」という理由が含まれている気もするが、そんなことはないんだろうな？

なんかエライ面倒くせえ奴がいるなｗ

ろくに調べずに駄目出しして指摘されるたびに主張を二転三転される奴が信用される理由はないな

まあ、自分で作るのが面倒な人は自分で調べる時間を惜しむだろうな(少なくとも>>533は調べてなかった)
そういう人は質の悪いライブラリにあたっても気が付かずにはまることになる

■質問です

#hogeの<h2>内のテキストだけを取得し、
それらを#hoge2内にそれぞれ<li>タグで括って入れていく（<h2>の元のテキストはそのまま残す）には
どう書いたらよいでしょうか？

<div id="hoge">
<h2>見出しテキスト1<span id="time1"></span></h2>
<h2>見出しテキスト2<span id="time2"></span></h2>
<h2>見出しテキスト3<span id="time3"></span></h2>
</div>

<ul id="hoge2">
</ul>

ごめんなさい >>551の内容、少し修正です
#hogeの<h2>内のテキストだけを取得し、
それらを#hoge2内にそれぞれ<li><a href="#">見出しテキストi</a></li>のかたちで
タグで括って入れていく（<h2>の元のテキストはそのまま残す）には
どう書いたらよいでしょうか？

<div id="hoge">
<h2>見出しテキスト1<span id="time1"></span></h2>
<h2>見出しテキスト2<span id="time2"></span></h2>
<h2>見出しテキスト3<span id="time3"></span></h2>
</div>

<ul id="hoge2">
</ul>

>>552
href属性値はどこから引っ張ってくる？
<a href='#'> のままならそれはリンクではないので、a要素以外でマークアップする事を検討すべきだと思うが

>>553
すいません、そこは放置でもよいです。
ただ、一応書いておきますと、h2に連番でidを振って、そのidへのページ内リンクを生成するつもりです。

>>552
jQueryでは、$('#hoge > h2')で、
'#'はid、'>'はある要素の直下のみを表す
('>'の代わりに、' 'スペースを使えば、
ある要素のすべての子孫を含む)

html()は、タグの部分を含む文字列を、
text()は、タグの部分を含まない文字列だけを、取得・設定する

var sFront = '<li><a href="#">';
var sTail = '</a></li>';

var str = $('#hoge > h2').text(); // 取得
$('#hoge2').html(sFront + str + sTail); // 設定

text()は、取得したすべての文字列を連結してしまうらしい
それに本当は、for文などでループさせるのだろうが、よくわからない

>>552
$("#hoge > h2").each(function(){
$("#hoge2").append($('<li>').append($('<a href="#">').text($(this).contents().first().text())));
});

ホバーされるたびに文字の色を変える方法を紹介しているサイトがあるのですが、
後から生成される要素にはうまく反映されません

最初から記述されているものには効くのですが、
JavaScriptで後から生成された（<div>や<p>など）ものは正しく認識されないのでしょうか？

>>557
書き方による
http://tacamy.hatenablog.com/entry/2013/03/03/213113が分かりやすいから見てみるといい

>>558
あざす

>>556
有難うございます！
.appendにそんな入れ子の書き方ができたとは。。
シンプルに書いていただいてますが、なにげに奥深いですね・・

>>556は全然シンプルじゃないけどな。
あれは無理やりという。

>>556 の.text(〜)以外の部分は入れ子にしないようにはできるけど
まあ、わかりにくくなってるなと思えば一旦変数に入れればいいんじゃね

jqueryで質問です
<div id="d1">と<div id="d2">を同時に指定するセレクタはありますか？
$("#d1").empty()
$("#d2").empty()
を
$("#d1" or "#d2").empty()
みたいに書きたいのですが、無理でしょうか。

$("#d1, #d2")
普通にカンマで区切って並べて書くだけ

CSSと同じ書き方なんだけどな。

>>564,565
ありがとうございます！

require.jsのdefine/requireって何が違うんですか？

defineはモジュールを作るだけ。
requireは作ったモジュールを使う時に使う。

一般的にはrequireは1回だけ、mainで読み込まれるモジュールが使う
（複数回使ってもいいけどね）

それ以外はdefine。

jQueryってすげーわ

jQueryでスクロール時に画像読み込んで
更に三枚先くらいの画像まで読み込んでおく方法教えて

プリロードでググれ

>>570
$('ある要素').offset().top で画像がどこにあるかわかる
$(window).scrollTop() で今どれくらいスクロールしてるかわかる
$(window).heght() で画面の高さがわかる

この3つを組み合わせると、ある要素が画面に表示されてるかどうかがわかるので
ある要素を<img>に差し替えてanimateでじわっと表示させればいい

1.html
2.html
3.html
みたいに複数のhtml間行き来するんじゃなく
一つのhtmlだけで複数のページみたいにするのどうやんの

普通にajaxすりゃいんじゃねｗ？

↑うわ間違えた。スルーで。

CSSの:targetとdisplayを組み合わせれば作れそうな気がする

>>573
iframeのこと？

ページネーションみたいに
一つのhtmlだけで複数のページみたいに遷移させるって意味だろうか？

jQueryのページネーションは遷移はしないよね。
やるならphpじゃないか

横道それるかもしれないが
jQueryでデータベース（JSON可）繋いでURLパラメーターで
表示分けるってできるっけ？

>>578
複数のページ間で、ある状態（例えばユーザが設定したフォントサイズ）を保たせたい時とか

単純にmhtみたいに一つのファイルでページの移動させたいってことでしょ

>>578
jQueryのページネーションってなんだ？
そんなものなかったはずだが。

AngularJSのngRouteみたいなことを言ってるの？

ajaxじゃねえの？

>>580
何に対しての質問なのかレスなのかわからんが
それはcookieの話だと思うけど
今回は表示の話だから関係ないのでは？

>>582
例えばこういうの
https://codeiq.jp/magazine/2014/02/6155/

↓やりたい事はこういう事かなと
ページネーションは、長い文章を複数のページに分割して各ページへのリンクを並べアクセスしやすくするもしくは、
一枚のページの内部で長い文章を分割し切り替えて表示する機能のことです。

>>586
こういうのってページ移動するときは
例えばそれぞれのページに画像組み込んでた場合
ページ移動したときに画像読み込むのか
全てのページの画像一括で読み込んで結局全体を一つのページとして扱ってるのか
どっちなの

> もし確実にやりたい場合は、ライブラリを使うよ。
> http://peace.2ch.net/test/read.cgi/hp/1415213701/739
ライブラリを使ってクラスにメソッドがあるかチェックする時に確実性の高いコードにはどんなものがありますか？

>>587は>>573か？
jQueryでやるページネーションは
そもそもが別ページなのではなく
1ページに全てのソースが書いてあってそれを
見た目上で分けているだけ。　なのでその質問は後者。
もちろんajax使えば話は別だろうけど。

phpで行うページネーションも1ファイルだが
DBの必要データを都度リクエスト毎に読み込むので全体データ量が多くても
重くならない

てか、>>573の質問の意図がまだ不明のままな件

いや、だからjQueryのページネーションってんなんだよ？
jQueryにページネーションの機能無いだろ。

ページ毎に遅延読み込みさせれば可能でしょ

jqueryで$$って何でしょうか？

そんなものはない
おそらくコンソールの$$と間違えている

>>500
jQueryのメソッドとしては無いだろ？って事をいいたいのだろうけど
jQueryとjavascriptで実装したページネーション風プラグインと言えばいいのかね？

jQueryとjavascriptで実装したページネーション風プラグイン
ということは、それはそのプラグインの仕様によって
話は違うので、プラグインの名前を出さないと何の意味もないってこと。

>>594
>500でも>590でもないけど、「jQueryとjavascriptで実装したページネーション風プラグイン」ではpluginによって実装法が変わってくるとしかいえないんじゃない？
全部のpluginが同じ実装をしていると思っているなら勘違いしてる

さっきから俺に絡んでくるやつはなんなんだよｗ
>>595
だから参考URLを586で出しただろうがｗ

>>596
そんな事は100も承知だｗ
その上で>>589でajax使えば話は別と書いてんだろうがああああああああああああ

逆に動的に実装しているjQuery”ページネーションの”プラグイン」があるなら
その名前を出してみやがれやああああああ

>>593
ありがとうございます。
うまく検索できなかったので、良ければ教えて下さいませんか。

>>598
「Command Line API」で調べるといい
例えばhttp://qiita.com/nakajmg/items/f4e40356143d6fc0038eとか

LINE APIですね！ありがとうございます。

何か別のが引っかかりそうだなｗ

require.jsのshimって何の略ですか？
シミュレートかと思ったらそれだとsimでした

そのまんまの意味じゃね？
ドキュメントにshimmedとかあるし
http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%A0

元々は調整用のくさびを意味するみたいだけど

http://ejje.weblio.jp/content/shim
のWiktionary英語版の3.が最もそれっぽい
以下google翻訳

”（コンピューティング）透過的に、通常は互換性のために、傍受し、APIへの呼び出しを変更する小さなライブラリ。”

つまりは何となくアダプタやアジャスタのシノニムっぽい

こういう英語特有の言い回しが入ってたりすると訳がややこしくなりそう

略語じゃなかったんですね
ありがとうございました

require.config({
paths: {
'jquery':'//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery'
}
});

require(['jquery'],function($){
console.log($);
});

require.jsでこうやった時、
configの中でjqueryのexportsを指定していないのに、
コールバック関数の中の$にjqueryが入っています
何故でしょうか？

どうもAMDとして呼ばれた時用の処理をjqueryやlodashは入れているようですね

ttp://www.tailtension.com/jquery/45/
ttp://www.tailtension.com/demo/jquery_pagination_plugin/jquery_pagination_plugin.html

すみません
このページネーションサンプルに、
各ページに画像表示させて、
ページ切り替えた時にだけ画像読み込むようにする遅延ロード組み込むのはどうやるのでしょうか。

>>607
jQueryはRequireJS（AMD）対応
だからexportsは不要。というのが最初に思いつく答えだけど

jQueryのAMD対応は特殊で、一般的なAMDモジュールはグローバル変数を汚さないんだけど、
jQueryの場合は、通常のjQueryの処理＋AMD対応あとづけ になっているから、
noConflictを使用しない限りjQueryも$もscriptタグでの読み込みと同じように汚染される。

？

汚れるグローバル変数って$だけですよね？
それなら気にする必要もないのでは

jqueryでinputのテキスト値が変更された時に
古い値と新しい値を比較して同一かどうか確認したいのですが
どのようにすればいいでしょうか？

>>613
古い値っていうのが、最初の値のことでいいなら、
jQueryを使うまでもなく、defaultValue で取得できるよ。

ただ俺は面倒だったので、jQueryでカスタムセレクタを作ったけどねｗ
例えば$('input:changed')って書くと変更されている要素だけを取得できる。

>>614
レスありがとうございます
ただ、今回はデフォルトではなくユーザーが入力した値を取得したいです
ユーザーが何度も入力する度に、入力前と入力後の値を確認したいです

入力するたび？ 普通は入力すると前の値とは違うものだと思うが？
まあ一文字選択してその選択した文字を入力したら
入力しても前と変わらないってことはあり得るがそういうこと？

keydownするたびにその時の値を変数に取っておいて、次にkeydownしたときに比較すればいいのでは？

>>617
ありがとうございます、やってみます

>>616
inputにmaxlengthが指定されていて、その数以上の文字を入力した場合、値は変わりません

右クリックから貼り付けた場合はどうしよう

実はこういう複雑な条件をシンプルにする力が
プログラミング力なんだよね。

keydownとかペーストとかいろんな条件があるでしょ？
それをそのまま書いていたらコードはすぐに複雑になる。

inputのchangeはフォーカスが外れた時に発生する。
外れなくても変わった時に発生するイベントがあればいいと思わない？

そうjQueryというライブラリはそういうカスタムイベントを作れるんだよ。
そうしておけばあとからコピペした時があった！なんて気づいても
新たにイベントを発生するタイミングを追加するだけで良くなる。

jQueryを使うとしても、発火タイミングは自分で考えないといけないね
ペーストとかも考慮に入れるなら、setIntervalで定期的に監視するのが一番確実かなあ

>>622
キーとマウスのアップあたりで十分だった気がするけどね。

setIntervalは負荷がかかりすぎるのであまりおすすめしない。
ゲームとか呼び出しタイミングが重要でない限り、
setTimeoutを（連続で）呼び出したほうが良い。

setTimeoutであれば処理が終わってから次のタイムアウトを
設定するから負荷が高い時はその処理の分、
呼び出し間隔が伸びてくれる。

>>623
確かに言われてみればそうだな
毎回関数の最後にsetTimeoutをしたほうがいいね
初めて気づいた、ありがとう

requestAnimationFrameってアニメーション以外に使っちゃ駄目なの？

>>625
いいんじゃね？

IE10以上しか対応していなくて、
（ブラウザが忙しくないときに）
16ms秒毎に呼び出されるのが過剰ではない場合には。

今回のようなテキストフィールドの入力監視であれば
100ms程度で十分リアルタイムと呼べると思うけどね。

まあ、アニメーションみたいに連続で変わり続けるもの以外に
requestAnimationFrameを使うのは意味が無いってことだな。

jquery.mousewheelって横スクロールプラグインで
解説だと右側にスクロールしてるのばかりだけど
左にスクロールするのってどうやんの？

ディスプレイを180度回転させる

！たしまきで！いごす

マーイーカが進化しました！

>>623
>setTimeoutであれば処理が終わってから次のタイムアウトを
>設定するから負荷が高い時はその処理の分、
同時に複数のsetTimeoutは実行不可、という意味ですか？
例えば、1つ目のsetTimeoutは1秒後、2つ目は10秒後、
3つ目は100秒後、というのを連続して実行した場合、
2つ目は11秒後、3つ目は111秒後に実行される、と
いうことなのでしょうか？

>>632
そういう問題じゃない
そもそも、この場合、同時にタイマーを発行したら setTimeout を使う意味がなくなると思うんだが

10秒かかる処理をsetIntervalで1秒毎に実行したら同時に9個のタイマー処理が働く
負荷のかかり方が均一でなければ前のタイマー処理が終わらない内に後のタイマー処理が完了してしまうかもしれない
setIntervalを使っていいのはタイマー処理の連続性が失われても良いときに限る

>>633
いや違う
JavaScriptは基本的にBlockingで動作する
setTimeoutやsetIntervalは非同期ではあるがNon-Blockingではない
だから実行しているタイマー処理が終わらない限り次の処理は行われない
WebWorkerやサーバーサイドのNodejsなら話は別だが、そんな事一切書いてない

>>634
Blocking とか関係ないんだがな
同時に複数のタイマーとはこういうこと

setTimeout(callbackfn1, 1000); // 1つめの処理
setTimeout(callbackfn2, 2000); // 2つめの処理

この状況で callbackfn1 が終らないと callbackfn2 が開始されない理屈は存在しない
普通は callbackfn1 内で処理完了後に次の setTimeout(callbackfn2, 1000) を呼び出して連続性を保証する

setTimeoutとsetIntervalの話がごちゃまぜになっている気がする

JavaScriptはシングルスレッドだから、2つの関数が同時に実行されることはないね
>>635のcallbackfn1が仮に10秒かかる処理だったら、callbackfn2の実行開始はその後（初めから11秒後）になる

1つ目と2つ目のsetTimeout設定に1秒以上の差があるなら実行順序は逆転するが、普通はそんなことありえないから
callbackfn1開始 ⇒ callbackfn1終了 ⇒ callbackfn2開始 ⇒ callbackfn2終了
が保証されてるようなものなんだよな

JavaScriptでも並行処理がしたいという要望に応えてできたのがWeb Workers

>>637
> 1つ目と2つ目のsetTimeout設定に1秒以上の差があるなら実行順序は逆転するが、普通はそんなことありえないから
その妄信が予期せぬバグへと繋がる
最悪の状況があっても回避できる方法があるならそうしたほうがいい

あ、すまんコード見間違えてた
逆転しないわ

setIntervalは逆転しない
>>635のsetTimeoutなら逆転しうる

setIntervalの問題はcallback関数内で例外が発生しても繰り返し例外を発生させることだな
setTimeoutを再帰的に呼び出すなら例外は1回で済む

>>635
されないけど？
何言ってんのこいつ

>>642
単純な四則演算も出来んのか
callbackfn1の処理時間が10秒、callbackfn2が1秒なら逆転するだろ

>>643
単純なコードで試すこともできないのか

function stop(ms,text){return function(){var d=Date.now();while(Date.now()-d<ms);alert(text+"終わり");};}
var callbackfn1 = stop(10000, "1つめの処理");
var callbackfn2 = stop( 1000, "2つめの処理");

setTimeout(callbackfn1, 1000); // 1つめの処理
setTimeout(callbackfn2, 2000); // 2つめの処理

最近、AngularJSとかMarionette.jsとかReact.jsとか
いろいろ出てるけど、たとえばシングルページアプリ的なwebを作るには
どれが学習コスト低めで決定打的な選択肢なの？

>>641
それは例外をキャッチしてclearIntervalをしない馬鹿のせいじゃね？ｗ

>>646
おまえは全てのコードで try-catch するのか？
例外を発生させたい状況は全くないのか？

つかんでも要らなかった例外は投げ捨てればいいだろｗ

例外をキャッチしたい箇所で例外処理を施すのが普通だよな？
>>647が何言ってるのか理解できん。なんで全てのコードとか言い出すんだ？

try {
　i++ ;
} catch {
　alert('エラーが発生しました')
}

意味のわからんレスするな

try {
>>647
} catch (e) {
throw e; // いらねｗ
}

例外の発生条件は全て把握するのが基本だから try-catch はほとんどのケースで必要ない
だが、人間のする事に間違いはつきもの
予想も出来なかった不具合があれば、処理が停止する仕様である事が望ましい
setIntervalは例外が発生しても後続のタイマー処理は止まらない
setTimeoutを再帰呼び出しすれば後続のタイマー処理は働かない
setTimeoutを再帰呼び出しする実装がより安全な設計といえる

なにいってんだ？ setIntervalでタイマー処理を
止めたほうががいいかどうかは場合によりけりだろ。
なんで止まる方がいい前提で語ってんだ？

>>645
JavaScriptのフレームワークの選定について
http://ja.stackoverflow.com/questions/2576/
BackboneとAngularを比較する
http://www.infoq.com/jp/articles/backbone-vs-angular


Angularがあちこちで流行ってるけど、これにドップリで巨大なフロントエンドを
構築するとAngularが廃れた際に乗り換え先が無さそう
Angular仕様ロックインで、覚えた技術の再利用ができない
Google主導だから大丈夫だろうと思いきや、過去にいくつものサービスや
APIを捨ててるし

Web Componentsが普及したらAngularの時代は終わりだろうな。

AngularがJavaScriptを意識させないでHTMLをかけるのはいいんだが、
HTMLにAngularのための属性が散らばることになる。

HTMLはシンプルでなければならない。

Web Componentsが普及すれば、Angular専用の属性はタグに変わるだろう。
AngularがWeb Componentsに対応するかも知れないけど、
Web Components+JavaScriptで事足りるので、Angularを使うまでもないだろうな。

最後に生き残るのはWeb標準技術とJavaScriptとDOM。
そしてこれらの技術を効率良く使うための軽いライブラリになるだろう。

Web ComponentsのPolymerもgoogleでしょ?
わざわざAngularが廃れる方向にはしない気がする
googleデファクトスタンダードで技術の囲い込みが嫌な方向に進む未来もあるかも

＞HTMLはシンプルでなければならない。

今時こんな事言ってるのは無能でしかない

複雑になってもおｋだと考える奴がアホだろ
プログラマーに向いてない

最近は脱jQueryって流れなのかね？
DOM操作とかならいいのかもしれないけど、凝ったエフェクト系の演出とか
jQuery以外でまとまってるフレームワークってあるの？

>>659
大事なのはユーザーエクスペリエンス
そもそも出力されるHTMLは人間が読むものではない
そんな考えだから三流なんだよ

でも、レンダリングソースがHTMLである以上、
デバッグや動作確認で読みやすい状態になっていて欲しい。

デバッグツール使えよ

みんなはもうjQueryは捨てた？
何使ってるの？

>>664
jQuery以外を捨てた。

結局はウェブ標準。

jQueryはウェブ標準・・・の書き方を少し関数型言語っぽくした
軽いライブラリという扱いで使っている。

>>661
お前Web Component知らないだろw

”出力されるHTMLは人間が読むものではない” と
言っていることから推測するに、
人間が読むGものが、HTMLとは別にあるってことだろう？
"その言語" で書いてHTMLを生成しているわけだろう？

Web Componentはまさに、"その言語" なんだが。
複雑なHTMLを隠蔽し、人間が読みやすい書き方で書くことが出来る。

人間が読む必要ないってすごい
プログラミング言語の進化を無視してるけど
一流の人間はアセンブリで開発してのけ？

>>665
たしかに良くも悪くもjQueryが標準になってるけど、最近になって
いろいろとフレームワークが乱立してるのが気になってるんだよね

仕事だとAngularJS使うプロジェクトが増えてるけど、上の方にも
あったみたいに先が見えない
Reactive Programmingってのがこれからの主流にはなりそうだけど
Vue.jsやfacebook主導のReact.js、片やReactive.jsなんてもの別にあったり

Backbone、Knockout、AngularJSなどのMVVMを信奉してる人たちはjQueryを捨てろと言う
でも、スライドショーとかパララックスなんかはjQueryプラグインに一日の長があるし

>>667
お前は根本的にわかってないから
黙っててくれないか？ｗ

>>668
> Backbone、Knockout、AngularJSなどのMVVMを信奉してる人たちはjQueryを捨てろと言う

フレームワークとライブラリの違いだよ。

フレームワークを使うとその技術に深く依存してしまいやすい。
なのでフレームワークが廃れてしまうと負債になってしまう。
その負債でアプリ全体が作られている。

ライブラリは、部分的に導入したり、導入を辞めたり出来る。
使おうと思えば、すぐに使えるし、使わないと思えば少しづつ辞められる。

JavaScriptの世界が他の言語と違うのは、ウェブ標準というフレームワークが存在していて、
それがブラウザの機能としてネイティブに搭載されていく所。ブラウザに搭載されていない機能を
JavaScriptで頑張って実装している。というのがJavaScriptフレームワークの本質。
だからいずれブラウザに機能が搭載された時JavaScriptのフレームワークは必要なくなる。

だけどjQueryは、ウェブ標準（正確に言えばDOM）をより簡潔に記述できるようにしたものにすぎない。
だから息が長い。もしjQueryが無くなる時があるとするならば、DOM APIすべてが再構成された時だろう。

>>661
minimizeの話じゃないよな？
人間が読めないHTMLを吐く具体的な開発環境を教えてよ。
出力されるHTMLのコードのサンプルもあるならみせて。

>>668
>でも、スライドショーとかパララックスなんかはjQueryプラグインに一日の長があるし
jQueryのアニメーション関連のUIはパフォーマンスや実用性に問題が出てきてる感じ。
jQuery UIとかひどい。slideとか単純な動き以外は使えない。

アニメーションライブラリのvelocity.jsも脱jQueryしたし、jQueryのanimateはわざわざ使う必要性が無くなってきてる。

angularはgoogle製なのが嫌
googleのプログラムは変なクセが強い印象

でも、もう世界的にwebブラウザはGoogle Chromeとその派生品の勝利ってことで決着が着いた模様

"Did the browser wars finally end in 2014?"
http://www.zdnet.com/article/did-the-browser-wars-finally-end-in-2014/

もう少し範囲を広げると、WebKit/Blinkベースのブラウザの勝利

そういえば、スマホ用のブラウザゲームとか作ってる業界だと
jQueryは使わず、DOM操作やイベント処理系をラップした独自の
ライブラリを社内標準的に使ってる会社と
jQueryのサブセット的な製品であるzept/App Framework(旧jqMobi)
あたりを標準的に使ってる会社とに別れる気がする

オレ的にはAngular離れが進んでる認識なんだが

同感
AngularJS採用してるプロジェクトは、いずれ地獄のコードメンテと高い移行コストを
代償として支払うことになるんだろう

【翻訳】Angularチームは、どうかしちゃった？
http://postd.cc/have-the-angular-team-lost-their-marbles/
AngularJSは今すぐ生まれ変わるか死ね
http://diary.hatenablog.jp/entry/2014/10/06/165007
Angularが嫌い
http://mizchi.hatenablog.com/entry/2014/10/06/162103

>>663
お前が可読性無しのHTMLコードで使ってるツールってなに？

>>666
コンポーネントはコンポーネントであって言語ではないだろ

>>679
> コンポーネントはコンポーネントであって言語ではないだろ

マークアップ言語。正確には新しいタグを作れる。

>>672
> アニメーションライブラリのvelocity.jsも脱jQueryしたし、jQueryのanimateはわざわざ使う必要性が無くなってきてる。

俺は、アニメーションライブラリとしてjQueryを見てないけどね。
DOM操作を簡潔に記述するためのライブラリ。

なぜアニメーションが脱jQueryをしたか？
その理由は簡単で、ブラウザにそのための機能（CSSアニメーション）が
搭載されたから。

>>670で書いたことと同じだよ。
ブラウザにネイティブに搭載されることで、フレームワーク及びライブラリは不要に
なっていくのがブラウザで動作するJavaScriptの世界。

Web ComponentsはAngularJSを置き換えるものになる。

マークアップ言語はHTML
コンポーネントは抽象化の手段、概念

＞なぜアニメーションが脱jQueryをしたか？
＞その理由は簡単で、ブラウザにそのための機能（CSSアニメーション）が
＞搭載されたから。

因果関係が真逆だ
css animation が実装されたので、それを便利に制御するjQuery animateなどのアニメーションライブラリが出てきた

css animation ができたのはCSS3からで
対応ブラウザは、IE10以上だぞ？

jQueryは何時の時代からあると思ってるんだ。
初期のjQueryはIE5.5対応だぞ。

>>682
マークアップ言語はHTML
コンポーネントは抽象化の手段、概念

そしてWeb Componentsは
コンポーネントという概念を実装したもので、
HTMLの要素に相当するものを自分で作り出せる。

言語を拡張することが出来る仕様。

>>684
だから、css animationの登場はそれを制御するライブラリの必要性を強化するのであって
「脱jQuery」に向かう理由には全くならない
それとも素のCSSでエフェクトとか全部書いてるのかい？

>>686
>>683から主張が変わってるじゃないか

>>681
＞なぜアニメーションが脱jQueryをしたか？
＞その理由は簡単で、ブラウザにそのための機能（CSSアニメーション）が
＞搭載されたから。

ちがう。単にパフォーマンスの問題。

＞>>670で書いたことと同じだよ。
＞ブラウザにネイティブに搭載されることで、フレームワーク及びライブラリは不要に
＞なっていくのがブラウザで動作するJavaScriptの世界。

ライブラリ無しでアニメーションするメリットは皆無。

>>666
人間に読めないHTMLとか言ってるのは論外だが、「複雑なHTMLの隠蔽」ってのも正しくない。
カプセル化されてるのはDOM,javascript,event,cssで構成された「コンポーネント」。

googleはプロダクトだけじゃなくデザインのガイドラインもものすごく力入れて普及してるし
影響力がますます強くなりそう。

いまだにprototype

https://twitter.com/kai_ri_no/status/548921681549340672/photo/1
htmlファイルをローカルに置いたら jQuery UI も 使えなくなるIE11

>>692
さすがにこれは @kai_ri_no の頭が固いとしか思えない
テストが面倒なだけで IE11 の不具合じゃないだろう
しかも、ローカルテストなんてローカルにサーバを立ててテストするのが基本

ブラウザ間バージョン間の違いをすべて吸収できる書き方ができれば何でもいいんだよｗ

>>681
＞Web ComponentsはAngularJSを置き換えるものになる。
ちょっと調べたけどgoogleはそう考えてないようだな。

>>695
勝手にGoolgeの気持ちを代弁するな

https://groups.google.com/forum/#!msg/polymer-dev/fAvqDo40tMk/v3dLso5b-VYJ

googleは技術の寡占化でgoogle帝国を築くのが目的なんだろう。

グーグルのように他人のサイトを勝手に収集して大儲けするようなビジネスは見習いたい

Googleもそうだし、MicrosoftもTwitterもFacebookもAmazonも
お前の言うシンプルなHTMLじゃないよな？
どっちか馬鹿なのかは火を見るより明らか

>>699
何の話してるの？ まさか「ソースを見る」でみたHTMLをみて
「シンプルじゃないよね？」といってるの？だとしたら馬鹿としか思わないな。

Web Componentsはまだ初期の段階だから使われてないし、
Google等は、内部で使われてるテンプレートの機能でも使って
シンプルなコードから、複雑なHTMLを生成してるでしょ。

そのシンプルなコードはHTMLではないが、Web Componentsによってそれが変わる
今の複雑なHTMLを、シンプルなHTMLにカプセル化出来る。

HTMLをJavaScriptで生成するのがメインのBackboneよりもHTMLを書いて、
データと同期させるAngularJSの方が優れているが、AngularJSの残念な所は
データと連携させるための独自属性ng-controllerとかng-bindとかがHTMLに露出し過ぎで、
CSSがなかった頃のHTMLと同じ問題が発生している。<font color="red">と同じで
つまりHTMLとデザイン・・・ではなくHTMLとコードが分離できていない。

Web Componentsが実用のものになると、ng-なんたらは全て必要なくなる。
AngularJSが過去のものとなる時代だ。

現実が見えてないんだね
宗教かな？キモすぎる

なんで内容に対してレスをしないのかな？
何も言い返せないからかな。

＞シンプルなコードから、複雑なHTMLを生成してるでしょ

これ、自分で自分の非を認めてるじゃん
馬鹿だろｗ

みんな疲弊してイライラしてるんだろ
とりあえず言い争いはやめようぜ
何も生み出さない

皆でラクできる手法探すとか、今後長く使えそうな
技術トレンドを紹介し合うとか、なんかいいことしようぜ

>>703
どういうこと？

コンパイルしたらアセンブラになるから
みんな複雑なアセンブラでプログラミングしているだって
話してるの？

>>704
> 今後長く使えそうな 技術トレンド

それはないよ。

なぜなら未来の技術は今使えないから。

未来を予測して、その予測についていけるように
方向転換していくしかない。

Backbone、Knockout、AngularJSも近い将来死にます。
依存しないようにしないとね。

などと言って外部ライブラリの使用を禁止するようなプロジェクトには
自分は関わりたくないです

>>697読めよ
googleの戦略的にAngularJSを潰すはずがないし、そういう環境を作るため外堀はどんどん埋めていってる

現にgoogleはブラウザを支配して自社に都合のいい実装をし始めてるし
Web Componentsもpolymerで大きな影響力をすでに持っていて、AngularJSと連携して開発すると明言してる

>>708
Google大好きなんだね。Googleが作っているものは
無くなったりしないと思ってるんだね。よくわかったよ。

所で日付入力には何を使っている？

君には、Google Closure Libraryの goog.ui.DatePicker をおすすめするよ。
http://webos-goodies.jp/archives/10_reasons_why_you_should_use_the_closure_library.html

俺はたとえGoogleが作ったライブラリであっても、ウェブ標準化によって、
使う意味がゼロ、または大幅に減少すると思っているが、
君が済んでる世界は違うようだ。

Google Closure Libraryには他にもMapやSetといった機能があるが
なあに、GoogleがGoogle Closure Libraryを潰すわけがないだろう？
使うといいと思うよ。

> AngularJSと連携して開発すると明言してる
互換性があるといいね。Angular 2.0で案の定互換性がなくて
大変そうだけど、3.0でまた互換性を打ち切れば、
Web Componentsに対応できるかもねｗ

しょうもない妄想書き込んで荒らすなよ。
Web Componentsを何だと思い込んでるか知らないけど、
各種フレームワークと排他的存在になるものじゃないって散々アナウンスされてるだろ。

「君が済んでる世界は違うようだ。」

こっちのセリフだ馬鹿。お前こそどこの世界の人間だよ。

web componentsの概要、各種フレームワークとの関係を簡潔に解説してる。
これだけ知っとけば>>706が間違ってると猿でも理解できる。

https://www.youtube.com/watch?v=8-Zq2KUN6jM

>>711の16:30からのData Bindingが重要だね。
データバインディングはWeb Componentsだけで実現可能になる。

6:30の、今までの不十分なウェブプラットフォームで
フレームワークを作るのに多くの才能が浪費された。
それを変える時だ。っていうのはいいことだね。

これからフレームワークが新しいWeb Componentsを土台としたものに
大きく変わろうとしているよ。

これもトレンドを読む参考になる

What is the difference between Polymer elements and AngularJS directives?
http://stackoverflow.com/questions/18089075/what-is-the-difference-between-polymer-elements-and-angularjs-directives

　・Web Componentsは既存のフレームワークを排除するか？
って問いはいろんなとこで否定されてるけど、その次に
　・googleは polymer と AngularJS を密に結びつけようとしてないか？
という疑いがかけられている。

もちろんpolymerの開発チームはWeb Componentsの理想と建前で「NO」というしかないけど、
polymer AngularJS　の類似性・親和性が指摘されてる。

いろんなブラウザで簡単に動作させられるライブラリができたよー
　　　　↓
あれできなくね？それできなくね？
　　　　↓
あれやそれができるようなライブラリができたよー
　　　　↓
なんか重くね？無駄な部分が多くね？
　　　　↓
いらない部分を削って動作が軽いいろんなブラウザで簡単に(略

結局これの繰り返しｗ

類似性というか置き換えだな。
AngularJSは将来必要なくなる。

>>693

サーバー不要のツールとして売りたい。
もう、ツイッターのアプリ開発でサーバーは不要でしょ。
一般人にサーバーを作らせたり、準備するのもお金かかったり。

>>693　の補足。
一時間に6000人のブロック解除とブロックが行えるツールをjavaScripだけで作っている。
ファイル読み書きが出来れば、ローカルに置いたHTMLだけで、可能になる。
ブロック解除は動いてるから、残りの機能はファイル読み書きのみ。

一応いっておくと、どのブラウザでもローカルのファイルに
書き込みはセキュリティ上できません。

AngularJSには懐疑的だけどPolymerはなんだかんだで
デファクトになっちゃいそうだな
Androidの世界では、もはやChromeが覇権を握ることを完了したし

Polymerが強いのは、「マテリアルデザイン」というガイドラインとセットで売り出した事だよな
フラットデザインの次のトレンドとして非常に説得力があり、ドキュメントの完成度も高い

だがgoogleの一極集中傾向は「クソだけど選択肢がそれしかない」というディストピアの未来を予感させる

そのディストピアを覆せるトレンドを生み出せない以上は
ディストピアに身を投じるか、業界から去るしか無いわけで
愚痴ってても始まらんさ

あー、最近はやってるな。ディストピア。
うんディストピア。キモい。

knockout覚えるのがしんどい

>>719
Brobのファイルダウンロードがある。

>>725
> >>719
> Brobのファイルダウンロードがある。

訂正
BlobをA要素に設定して、マウスクリックするとファイルがダウンロードする仕組みを使うと、ファイル書き込みが可能。

>>726
https://twitter.com/kai_ri_no/status/549934765097639937/photo/1
ユーザーIDをArrayへpushして、Arrayをファイル保存してみたら、カンマ区切りだった。 jQuery HTML5 Blob

ローカルファイルへ保存するこが可能なんだよ。サーバーにDB作って、サービスを売り物にする時代は終わったよ。

ローカルに保存するだけなら別に前から
アプリとして作ればいいだけなんで、大した話じゃないけど。
それよりも共有できないという問題が解決できてない。

>>729
ビルドとかしたくない。
動作環境は、HTMLファイルをブラウザだけ。

あの人と同じブロックしてるユーザーIDを持ちたい。というような要望があれば、
メーラーでテキストファイルを送ればいいだけ。

>>729

今後は動画のLiveも、Trrentになる。
買い物以外のお金が絡んでなければ、サーバーが要らないんぢゃないか？って思う。

>>730
誰のために作ってんの？

>>732

Vectorで600円くらいで売るために作ってる。売り上げの80％は作者に入るよ。
http://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC_%28%E4%BC%81%E6%A5%AD%29

PayPalも考えたけど、邦人会社の地元を大事にしたい。
http://ja.wikipedia.org/wiki/PayPal

>>733
そうじゃなくて、
ユーザーにとって使いやすいソフトにするんじゃなくて
開発者の都合で不便な仕組みにするなよって話。

>>731
> 今後は動画のLiveも、Trrentになる。
> 買い物以外のお金が絡んでなければ、サーバーが要らないんぢゃないか？って思う。

それはないかな。っていうかP2Pっていうのは
サーバーがないんじゃなくて、誰もがサーバーになるってことだよ。

動画を配信する時だって、一次配信者っていうのが絶対に存在する。
すなわちそれがサーバーなわけで。

>>726
>BlobをA要素に設定して、マウスクリック
実際のスクリプトの例を書いていただけませんか？
とても興味があります。

>>736
だれかのブログからコピペ。Functionを検索したら見つかるよ。
https://twitter.com/kai_ri_no/status/549633677026545666/photo/1
405行目から420行目まで処理が流れると、
493行目のa要素（jQueryUIでボタンにしてるけど）をクリックすると、
fwriteTestというfunctionのソースコードが入ったテキストファイルをダウンロード。
タイプミスしてるけど、正しくは「ここをクリックすると、ファイル保存します。」ボタンなのだが・・。

https://twitter.com/kai_ri_no/status/550066536140906496
そして、ファイル読み込みも出来た（*´∀｀）

>>737
俺はWEBアプリとか素人で詳しくないから
最初の予想では、
ファイル名をinputで指定してから、ファイルへ書こうとしていたから、 486行目に<input type="file" が残ってる。
でも、続きの処理が、どこを検索しても分からないから、
「A要素をクリックして、変数の値をファイル保存」するというBlobを使った。というわけ。

>>737 知ってるかもしれないけど、
functionの実ソースは、置いてても実行しない。
代入の右辺、または呼び出さないとfunctionは走らない。

bashの関数と一緒。

>>737

https://twitter.com/kai_ri_no/status/550066536140906496
は、
http://www.html5rocks.com/ja/tutorials/file/dndfiles/
を参考にした。

requirejsでmarionette.jsを読み込ませているのですが
underscoreの代わりにlodashを使っていると、
marionette.jsの中からunserscore決めうちで読もうとするので、エラーになります
require.configのpathsで、lodashのキー名をunderscoreに変えると、
underscoreとしてlodashを読むようになるので、エラーは出なくなりましたが
アドホックな対処で気持ち悪いです
どうするのが正しいのでしょうか？

http://www.freeshow.net.cn/ja/questions/413afe470b1ed0c0b87246a3ca3876613371bb0f9558853ff87f07e4418f2f33/
同じやり方してる情報見つけました
underscoreの代替として使うからこのやり方でいいのでしょうか？

https://twitter.com/kai_ri_no/status/550627740244639746/photo/1
ツイッターのユーザーのブロックと解除を javaScriptへ移植中:
赤矢印のサイクルは完成。

http://anago.2ch.net/test/read.cgi/streaming/1409480675/513
513 名前：（*´∀｀）発売は1月下旬予定[] 投稿日：2015/01/01(木) 21:29:24.37 ID:Tym8SEo60
>>451
> ツイッターでいくら稼いだか報告するスレ [転載禁止](c)2ch.net
> http://wc2014.2ch.net/test/read.cgi/twwatch/1416616736/5
>
> 5 名前：（*´∀｀）１１月は売り上げゼロ[] 投稿日：2014/12/03(水) 15:41:54.81 ID:c7hP5zTa

（*´∀｀）１２月３日から、一ヶ月で
（*´∀｀）HTML5やjavaScriptも使ったことのないＳＥが、ここまで作れるようになる。
（*´∀｀）我慢ができる、諦めない、しつこい、ということが成功のカギだわな。

あるクラスの要素のイベントを、delegationを使って一つのハンドラを受ける、
というよくやることを、
backboneでやるのはどうすればいいんでしょうか？
backboneはviewが所有するdom要素に対してイベントを付けていく、という感じのようなので、
dom要素をまたいだイベントハンドリングはどうするんだ？と思ってしまいます

jqueryのセレクタ指定のように
抽象化したレイヤをはさんで複数のdom要素を扱えた方がいいような気がしますが
そういうやり方をbackboneでしたらいけないんですかね〜？

jqueryを使っています。
iframe内でページ遷移後のURLを取得したいと思っています（同ドメイン）
例えば2ch.net内で
<iframe id="abc" src="http://2ch.net"></iframe>
とし、
$("#abc").src;
とすると"http://2ch.net"は取得できますが、iframeの中でページ移動（移動後も同ドメイン）した場合、
そのURLを取得することはできるのでしょうか

("#abc").document.location.href;
abc.document.location.href;
では両方とも
TypeError: Cannot read property 'location' of undefined
が返ってきます。

>>746
ページ移動後に $("#abc").src; を参照すればいい

>>747
https://live.cybozu.co.jp/
で試してみましたが、ダメでした。
iframeのsrcを書き換えれば行けたのですが、今回やりたいことはiframe内での手動でのページ遷移後のURLを取得することです。

//ボディにiframeを追加（srcはお知らせページ）
$("body").prepend('<iframe id="abc" width="500" height="500" src="https://live.cybozu.co.jp/info.html?q=4747">');
//一度取得
abc.src;
//iframe内でページ遷移（手動）。ホームに戻るなど

//再取得
abc.src;

>>748
iframe内でページ遷移してもsrcは変わらないんだな。初めて知った
同じドメインだったら、これで感じでいいんじゃない？
$("#abc").get(0).contentWindow.location.href
abc.contentWindow.location.href

>>749
おー、どっちでもうまくいきました！ありがとうございます！
iframeは大変だ＠＠；

2つのセレクトボックス間で値をやり取りする（入れ替える）ことが出来るライブラリを探しています
＿＿＿＿　　　　　 ＿＿＿＿
| Select1 |　　　　　| Select2 |
| 1.あ　　　|　　　　　|　3.う　　|
| 2.い　　　|　　→　 |　　　　　|
| 4.え　　　|　　←　 |　　　　　|
| 5.お　　　|　　　　　|　　　　　|
￣￣￣￣　　　　　　￣￣￣￣

簡単に実装できて、できればBootstrapのようにHTMLでoptionを設定できて、
両ボックスの検索機能やすべて選択機能があるものはありませんか？
ご存知でしたら教えてください

>>751
jQuery

例えば、以下の様なHTMLのとき

<select id="sel1" multiple>
<option>1</option><option>2</option><option>3</option><option>4</option>
</select>
<select id="sel2" multiple>
<option>a</option><option>b</option><option>c</option><option>d</option>
</select>
<button id="btn">btn</button>

ボタンを押したら選択項目を移動するのはこれだけでいい。

$('#btn').on('click', function() {
$('#sel2').append($('#sel1 option:selected'));
});

つまり、変数の値を+1するライブラリがないように、
たった数行で書けるコードのライブラリはないよ。

あんたしか欲しがる人がいないような機能を満たしたものがあるわけないし、
あったとしてもその程度自分で書いたほうがいい。

あ、もう自己解決したので結構です
752のようなゴミスクリプトとは違って
機能も満たしていてとても使い勝手の良いものを見つけたので。

>>753
で、今度は、それつかって○○ができないんです。
どうしたらいいですか？って書き込むんだろう？ｗ

「魚を一匹やれば１日食いつなぐが、魚の取り方を教えてやれば一生食いはぐれることはない」
ということわざ通りだな。

いいえ、もう実装も済んで完了しましたが？
役に立たない低脳はもうレスしないでくださいね＾＾

>>755
残念。レスしたよ？ｗ
お前の望みは果たされず。

あー、言葉が通じない残念なガイジか在日かな？
ゴミスクリプトしか書けないのも納得ﾜﾗ

技術者のくせにネトウヨかよ
なんというゴミ

var myView = Backbone.View.extend()

みたいなコードを見かけたのですが、
myViewはクラスなのだから、頭文字大文字のMyViewの方が適当ではないでしょうか？

delegateEventsとundelegateEventsの独特な挙動
https://github.com/honmaaax/Haraochi.js/blob/master/texts/Backbone.js/delegateEvents%E3%81%A8undelegateEvents%E3%81%AE%E7%8B%AC%E7%89%B9%E3%81%AA%E6%8C%99%E5%8B%95.md

backboneのこんな記事を見つけました
この挙動は実にイケてないと思います
なんでこんな挙動なんですか？

このクソダサ仕様はmarionette.jsでは解決してるんでしょうか？

ダサいかどうかは使う人の技術力よ。
技術力が低いと、理由もわからずダサいと思ってしまうものだよ。

は？理解して言ってるか？
これはダサい以外の何ものでもねーぞ

delegateEventsという設定用プロパティを用意して
デレゲート出来るようにするのが筋だと思います
何故そうしてないのでしょうか？アホなのでしょうか？

https://twitter.com/kai_ri_no/status/557402636253544448
こんな風に head要素の下に script要素を追加して通信してるのだけど、
サーバーの応答は、どうすれば見えるの？
head.insertBefore( script, head.firstChild );

ｊQueryとjQuery UIのtabsを使って、Googlemapsを表示させてます。
地図がグレイになる問題は、resizeをかけることで解消したのですが、中心位置が自分が意図してたところから大きくズレています。
（東南に数十km離れたところが中心になって表示される）
あとコントロールも一切表示されていません。
jQuery UIのライブラリロードをコメントアウトすると正常に地図は表示されます。
ｊQueryUIとGooglemapsは相性が悪いのでしょうか？
GMAP3とかも使ってみましたが同様でした。
FFのFirebugで見ると、ｊQueryでエラーが出ています。「TypeError: this.each is not a function」
何か関係あるのでしょうか？同様にｊQuery UIを外すとエラーは出ません。
よろしくお願いいたします。

>>765
この宣伝スレ立てたのお前？
いい加減にしろよ

シェアウェアが売れたら報告するよ [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1419667268/

>>766
中心位置が南東方向にズレるのは、日本測地系で読み取った経緯度を世界測地系に
そのまま放り込んだからだと思うけど、ずれるといっても400〜450mくらいだしなあ…

lodash 3.0 リリース間近！

https://github.com/lodash/lodash
3.0-preから-preが外れました！


スレが多すぎてどこに書けばいいかわからないので
関連スレすべてにマルチポストしています。m(__)m

https://twitter.com/kai_ri_no/status/558449951332519936/photo/1
通信はajaxなんだけど、
HTTP応答のイベントがあったら呼び出される関数は、ここに追加するの？

fquery　の　fullCalendar で、予定表を作成しているのですが、

events: [
{ id:1, title: 'イベント１-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:1, title: 'イベント１-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
]

のようなイベントを作成して、
id　別に　表示のON OFF を切り替えることは出来ますか？

例：id:1 のイベントを表示し、id:2のイベントは隠す

>>771
知らないけど、自分でそうできるように
作ればいいんじゃないですか？

lodash 3.0 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

venobox分かる方いらっしゃいますでしょうか
Lightboxみたいなものなのですが
アイフレームで読み込んだHTML側に閉じるボタンを付けたいのですが
方法が分かりません

画像をLightbox2で表示させてるのですが、aの要素にいちいちライトボックスに
渡すためのタグを追加するのがめんどくさくなってしまいました。

Divで囲んだ範囲内にある画像をまとめてLightboxに渡すことは可能なのでしょうか？
その場合はどのように記述してあげればできますか？
よろしくお願いします。

underscoreもlodashも_という記号自体に名称が由来してるって今気付いた

underscoreはまんまなんで知っていたが
lodashは、low dash だったのか。言われて気づいた。
だからLo-dashって書いていたのね。（今はlodashに改名したっぽいが）

perlとrubyとの関係みたいなもんか

あ、rubyってそういうことなんだ
気取った名前だなぁと思っていたが

lodash 3.0 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
の続報が出ていないが、

バグ修正版の3.0.1、3.0.2が来たあと
関数が追加された3.1.0が来たね。
最近のコミット見るとまた関数が追加されたみたいだし。
もうすぐ3.2もくるかな。

また以前のように早いリリースに戻ったようで嬉しい。

どなたかお願いします。

■ 目的
チェックボックスのon/offと連動して
別要素divの色をチェックon＝青、チェックoff＝赤と変えたい。

■ 記述

----- HTML ----
<input id="chk1" type="checkbox">
<div id="box1"></div>

----- CSS -----
#box1 {background-color: blue;}
.toRed {background-color: red;}

----- jQuery -----
$('#chk1').click(function(){
$('#box1').toggleClass('toRed');
});

■ 実際

一応目的通り動作しますが、IE9でチェックボックスをＷチェックすると
チェックと青赤表示が互い違いになってしまいます。
つまりチェックされてるのに青、またはその逆に。
Foxは問題なく動作します。そこで

$('#chk1').dblclick(function(){return false;});

としてみたのですが変わらずです。
IE対策か根本的間違いなのかご指摘などお願いします。

>>781
> チェックボックスのon/offと連動
・・・なんだから、
> $('#box1').toggleClass('toRed');
トグルじゃなくて「連動」させたら？

>>781
疑似クラスcheckedを使うべき
jQueryを併用するならckecked未実装向け(IE8-)に適用すべき
http://www.hcn.zaq.ne.jp/___/WEB/selectors4-ja.html#checked

最近、「まだjQuery使ってるの？」的な意識高い人達の意見があるけど、代わりに何使ってんのかな

reactはview専用ライブラリですが、
それならmodelが必要ですよね？
model専用ライブラリみたいのあるんでしょうか？

>>783
レスありがとう。
疑似クラスcheckedでもIEの件は同じです。

if文で状態をチェックしてaddClass、removeClassするしかないんでね？

>>786
> 疑似クラスcheckedでもIEの件は同じです。
:checked は IE9 でサポートされているはずだが、本当に効かないのか？
http://jsfiddle.net/heot7au7/

> 別要素divの色をチェックon＝青、チェックoff＝赤と変えたい。
挙動が逆か
http://jsfiddle.net/heot7au7/1/

これはCSS定義がおかしいだろ
デフォルト赤を期待しているのになぜCSSでは青をデフォルトにしてるんだ

>>787
一番妥当で一番確実なのがそれですね。
781は簡略化してますが実際は複数あり、関数化するにもやや複雑になり
チェックボックス+トグルだけで済ませればかなり簡素化できて楽でして。
やはり急がば回れですかね。ありがとうございます。

>>788
問題は「戻る」でして・・・

ちなみにFoxとChoromeでは問題の互い違いの症状は全く出ません。
それどころか戻ったときにチェックもdivもページ移動前の状態を維持してくれています。
さすがにIE9捨てるわけには・・・

>>789
すみません、文章が逆でした。チェックon＝赤、チェックoff＝青でした。
実際はそうではなく違うことを実行してるのですが
わかりやすく書き換えたときに間違えてしまいました。

>>790
では>>788で問題をクリアしているのではないのか？

そもそも、[戻る] でどんな動作を期待しているのかがわからん
まだ出していない「新しい要件」があるなら具体的にいってもらわんと

>>781時点ではそんな要件はなかった
情報を後出しするなら初めからまとめて出すべき

>>792
動作期待は通常のユーザの操作で互い違いにならないこと
つまりチェックの状態とjQメソッドの状態が同一になることです。

IEでチェックした状態でページ移動して戻ると互い違いになります。
戻るでなくてもＷチェックの件もクリアしてませんが。
IE9で実際にやってますか？

>>787
今さっきそれで書き直したらIE9で正常にできました。
ckeckedを取得してその状態でaddClassかremoveClassに分けるそのまんまです。
$('#chk1').dblclick(function(){return false;});の行も削除してできました。
ありがとうございました。

>>793
#box1 { background-color: blue; }
#chk1:checked ~ #box1 { background-color: red; }

IE9でチェックしたがダブルクリックしてもブラウザで戻っても問題なかったぞ？

>>794
background-color: red; を別の何かスクリプトでしかできないことに置き換えてごらん

>>794
~なしでお願いします。

>>796
>>788 の + で
条件の後出しが本当に多いな

>>795
「CSS で実装すべき機能を JavaScript に置き換える理由があるのか」を考えてから発言すべき