5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net

1 :Name_Not_Found:2016/06/10(金) 22:50:35.11 ID:???
*∧ ∧:・。゚*。 : ・ 。 ゚ *★.
(*・ω・*)       ゚ *。*
*〇 〇………………………**
 祝☆jQuery 3.0 リリース https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
**………………………………*

JavaScriptで一番有名なDOM用関数型風ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。

一部でもうjQueryは要らない等と言ってますが、あれはjQueryよりも導入が大変な
フレームワークを導入したらいらなくなるって話であって、従来通りHTMLにちょっと
動きをつけたい程度ならjQueryが最適です。

このスレはjQueryそのものの使い方やjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
JavaScriptだと面倒だけどjQueryを使えばもっと簡単に書けませんか?というのもOKです。
ですが、jQueryを使って作る側のスレであって、こんなjQueryプラグインありませんか?と聞くスレではありません。
また野良jQueryプラグインの質問スレでもありません。そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良jQueryプラグインの使用はおすすめしません。

前スレ
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1452081417/

2 :Name_Not_Found:2016/06/10(金) 22:53:10.66 ID:???
・jQueryトップページ
http://jquery.com/

・ダウンロード、CDN
http://jquery.com/download/

・ブラウザサポート
http://jquery.com/browser-support/

・jQuery UI
http://jqueryui.com/

・jQuery UI ダウンロ−ド
http://jqueryui.com/download/


・リファレンス等
http://js.studio-kingdom.com/jquery/
http://alphasis.info/jquery/ (http://alphasis.info/jquery-api/)
http://www.jquerystudy.info/

3 :Name_Not_Found:2016/06/10(金) 23:04:58.59 ID:???
Q. jQueryはどのバージョンを使えばいいのですか?
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。

補足

jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系(1.10、1.11、12)と
古いブラウザを切り捨てた2系(2.0, 2.1, 2.2)です。

1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。

しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。

そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。

4 :Name_Not_Found:2016/06/12(日) 10:47:25.16 ID:y5NQMonL
https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

Slim buildってのが追加されてるんだね。
ajaxとeffectの機能を取り除いたバージョンみたい。
サイズも20KB程度減ってる

5 :Name_Not_Found:2016/06/12(日) 10:50:37.57 ID:???
■関連スレ
+ JavaScript の質問用スレッド vol.120 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1463914293/
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1463395557/
JavaScript ライブラリ総合質問所 vol.4
http://toro.2ch.net/test/read.cgi/hp/1400809255/

6 :Name_Not_Found:2016/06/12(日) 15:57:50.99 ID:???
>>996>>997>>998
上手く行きました。
皆さん優秀ですね。
ありがとうごいざいました。

もう一つ教えて下さい。
var len = $('table tr').length;
とすると行数がわかりますが、

var tbl = $('table');
の場合にも行のlengthを求めたいのですが、

var len = tbl.filter('tr').length;
var len = tbl.select('tr').length;
            ^^^^^^^ この部分が分かりません。
みたいなことは可能ですか?

7 :Name_Not_Found:2016/06/12(日) 17:29:58.35 ID:???
var len = tbl.find('tr').length;

8 :Name_Not_Found:2016/06/12(日) 22:42:28.41 ID:???
> jQuery Compat 3.0のサポートブラウザがよくわからん

>>3に書いてあるよね?

新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。

そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。

9 :Name_Not_Found:2016/06/12(日) 23:12:36.82 ID:dD+fRBSn
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

10 :Name_Not_Found:2016/06/12(日) 23:21:24.03 ID:???
> $(function)以外のdocument-readyの非推奨
>
> document-readyを行う方法はいくつかあります。
> $(fn);
> $().ready(fn);
> $(document).ready(fn);
> $("selector").ready(fn);
> jQuery 3.0では1つ目を推奨し、他の方法は非推奨とします。
> ちなみに下でも述べますが$(document).on("ready", fn)は僅かに意味が違っており、3.0で削除されました。

これはいい変更だな。俺は以前より短いから1番目の方法を使えって
言ってきたんだが、意外とready使うやつが多くてな。
これで$(fn)を使わせる理由ができた。

11 :Name_Not_Found:2016/06/12(日) 23:28:43.91 ID:???
> 新しい$.escapeSelector()関数
>
> この関数はセレクタ文字列に含まれるCSSで特殊な意味を
> 持つ文字(ドットやセミコロン)をエスケープしてくれます。
> 例えば"abc.def"というidを持つ要素をjQueryで取得することは出来ませんでしたが、
> この関数を使って$("#" + $.escapeSelector("abc.def"))と取得することができます。

ほー、ちょうどセレクタにこれらの文字が入っていた場合
面倒だなーって思っていたところなんだ。

12 :Name_Not_Found:2016/06/13(月) 00:52:30.14 ID:???
http://qiita.com/fmy/items/345a264a1cf2e2a73f62#warning-document-ready%E3%81%8C%E5%B8%B8%E3%81%AB%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%AB
「document-readyが常に非同期に」はこういうことか
ずいぶんとトリッキーな動きだな

'use stirct';
document.addEventListener('DOMContentLoaded', function (event) {
 console.log(document.readyState);
 jQuery(function () {
  console.log(2);
 });
 console.log(1);
}, false);

DOMContentLoaded 的には何もしないのが正解なのだろうが

13 :Name_Not_Found:2016/06/13(月) 01:16:14.66 ID:???
別にトリッキーとは思わないけどな。
同期処理を非同期に変えるって、単にsetTimeoutするだけの話だし、
それは昔からやってる人は、よくバグ対策としてやってたりするw
そのsetTimeoutをjQuery関数の中に含まれてる処理に渡しているだけだろうし。

14 :Name_Not_Found:2016/06/13(月) 05:42:29.50 ID:???
>>7
ありがとうございました。

15 :Name_Not_Found:2016/06/13(月) 10:05:10.91 ID:4DysnAhC
前スレ983です
jqueryUIのdatepickerをふたつ設置し、inputタグに持たせたalt属性をつかってそれぞれ異なるaltFieldを設定しようとしているのですがaltFieldそのものが動作しません。
恐らく文法がおかしいのだと思いますが、どのように変えたら動作させられるかわかる方、教えていただけないでしょうか

$( '.jquery-ui-datepicker' ) . datepicker( {
dateFormat: 'yy年mm月dd日DD',
altField: $(this).attr('alt'),
altFormat: 'yy/mm/dd'
}
} );

日付1:<input class='jquery-ui-datepicker' alt='.alt1'>
<input type='hidden' class='alt1'>
日付2:<input class='jquery-ui-datepicker' alt='.alt2'>
<input type='hidden' class='alt2'>

16 :Name_Not_Found:2016/06/13(月) 10:27:30.94 ID:???
>>8
>>12
迷惑だからいちいち、こっちに書き込みをコピーしなくていい
質問者のためというよりはおまえさんの自己満足なんだろうがな

JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/

17 :Name_Not_Found:2016/06/13(月) 10:34:00.59 ID:???
>>12
バカ

18 :Name_Not_Found:2016/06/13(月) 11:04:50.40 ID:???
程度の低い書き込みが多いのがこのスレの特徴だな

19 :Name_Not_Found:2016/06/14(火) 00:52:13.27 ID:???
>>15
面倒だからjsfiddle用意してくれよw
$(this)はコールバック関数の中とかでしか使えません。
>>15のコードは単なるオブジェクトを設定しているだけ
その場所では$(this)は使えない。(違う場所を指している)

世間を見るとeachで回して設定しているのが多いみたいだけど
一応こんな感じでできた。
http://jsfiddle.net/soqxay5a/

beforeShowのたびにやってるから効率は悪い。
beforeCreateみたいなのないのかな?
each使うほうがシンプルではないが効率は良い

jQuery UIのインターフェースってわかりづらくて
覚えてないんだよな。気が向いたらもっといい方法探すかも

20 :Name_Not_Found:2016/06/14(火) 01:49:33.29 ID:???
一応バグとして登録されてるね。
https://bugs.jqueryui.com/ticket/6228

Datepicker が widget factory を使うようになれば
createイベントに対応するようだ。

だけど、jQuery UIってjQueryと違ってあまり期待できないんだよな・・・
完成度が高いわけじゃないのに進化が遅い。

21 :Name_Not_Found:2016/06/14(火) 01:59:08.48 ID:???
ついでにeach版も作ったよ。
http://jsfiddle.net/soqxay5a/1/

あとalt属性を使うのはお薦めしないかな。
そういうオレオレ的な用途にはdata-*属性を使ったほうが良いよ。
data-alt-fieldとかさ

22 :Name_Not_Found:2016/06/14(火) 18:20:04.13 ID:c8Axzw6s
ごめんなさい。初めて質問します。
https://github.com/vneri/circleDonutChart
このドーナツチャート使おうと思ってますが、
右端からアニメーションスタートしてじゃなくて
よくある上から時計回りにスタートするような
アニメーションにするにはどうしたら良いですかね?
ちなみにJavaScriptは全くっと言っていいほどわかりません。

23 :Name_Not_Found:2016/06/14(火) 20:53:13.95 ID:xURVhhMF
質問です

HTMLタグの<h2>内のテキストノードが空かどうかの判定ってどのように書けばよいのでしょうか。

<h2>テキスト</h2> →アリ
<h2></h2> →ナシ

24 :23:2016/06/14(火) 21:10:25.01 ID:???
すいません条件追加です。

$('h2:empty')で近しい事はできたのですが、
TABや空白文字は空とみなすようにすることは可能でしょうか

25 :Name_Not_Found:2016/06/14(火) 22:58:51.60 ID:???
>>22
ここはJavaScriptとjQueryのスレなので、
どこぞのJavaScriptのライブラリはこっちで聞いて下さい。

JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/

26 :Name_Not_Found:2016/06/14(火) 23:12:50.27 ID:???
>>24
CSS4なら:blank疑似クラスってのがあるんだよね。
https://drafts.csswg.org/selectors-4/#blank-pseudo

Firefoxは対応しているみたいなのを何処かで見たけど、
まあ使えないだろうね。

やり方としては、filterを使うのが一般的だと思うよ。
$('h2').filter(function() { return $.trim($(this).text()) === ''; })

長ったらしいと思うなら、

ブラウザ選ぶけど、ES6で書くとか
$('h2').filter(el => $(el).text().trim() === '')

別関数にするとかね
function(el) {
 return $.trim($(el).text()) === '';
};
$('h2').filter(isBlank);

27 :Name_Not_Found:2016/06/14(火) 23:19:12.01 ID:???
>>24
あともう一つ。自分でセレクタを作るって手もあるよw

こう定義しておけば
$.extend($.expr.pseudos, {
 blank: function(el) {
  return $.trim($(el).text()) === '';
 }
});

これが使えるようになる。
$('h2:blank')

blankという名前はCSS4にあるやつとかぶるので別名にするか、
仕様を調べてCSS4と互換性があるように作ればよい。

28 :Name_Not_Found:2016/06/14(火) 23:38:47.69 ID:???
しかし、CSS3少し遅れていいから has もcss3に入れといて欲しかったなぁ

29 :Name_Not_Found:2016/06/14(火) 23:45:13.04 ID:???
jQueryというかsizzleのCSS4対応も仕様が決まるまで停止中だな。

https://github.com/jquery/sizzle/issues/237

30 :Name_Not_Found:2016/06/15(水) 13:06:14.35 ID:???
■ライブラリ総合スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://echo.2ch.net/test/read.cgi/hp/1369444026/
JavaScript ライブラリ総合質問所 vol.4
http://echo.2ch.net/test/read.cgi/hp/1400834117/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/

■jQueryスレ
※前スレは「【jQuery】JavaScript ライブラリ総合質問 vol.3」(総合スレ)で「jQueryスレ vol.3」はない。
つまり、ライブラリスレの乗っ取り行為。

jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400313626/
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1452081417/
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/

31 :Name_Not_Found:2016/06/15(水) 14:07:12.58 ID:???
>>26,>>27
すごい親切に有難うございます!!!!!!!

32 :Name_Not_Found:2016/06/15(水) 23:22:49.53 ID:tk0QQAMe
>>31
どういたしましてw

33 :Name_Not_Found:2016/06/18(土) 16:22:42.90 ID:0/JGLztG
textメソッドでテキストを変えてる要素をsetter(やgetter)で監視することはできますか?
.text('...')で直接変えてるテキストノードにあたるプロパティ(とその値)がわからず、
setterで対象のプロパティを監視できません。

例えば、

<div id="target">hoge</div>
<script>
var num = 1;
setInterval(function () {
$('#target').text(num++);
}, 5000);
</script>

というのが既にあって
Object.defineProperty($('#target')[0], 'textContent', { set: function (val) { console.log(val); } });
とやるとdiv#targetのテキストノードが変わる度にコンソールに値が表示されるようにしたいがこれではできず、
引数に何を指定したらいいかわかる方いませんか?

jQueryのバージョンは1.11です。

34 :Name_Not_Found:2016/06/18(土) 16:41:29.27 ID:???
>>33
createTextNodeを使ってテキストノードを作り直してるからそれじゃだめだよ。
特に古いブラウザだとtextContent自体が存在しなかったりするしね。
3.0.0ではtextContentを書き換えてるみたいだけど、意図した結果になってない。

setInterval(function () {
$('#target').text(num++);
}, 5000);

を書き換えられないならば、その方法で監視するのは不可能。

どうしてもそのコードを監視したいならjQueryのtextメソッドに
処理を割り込ませるしかないだろうね。

35 :Name_Not_Found:2016/06/19(日) 19:43:51.11 ID:???
Webサイトの何らかのテキストをマウスで選択して反転状態になっているとして、
それをプログラム的に解除する方法を教えて下さい。
JSあるいはJQなどで。

36 :Name_Not_Found:2016/06/19(日) 21:54:15.46 ID:???
>>35
ブラウザにデベロッパーツール(開発ツール)という機能が
標準で搭載されている。それを使うとどんなサイトでも簡単に
ソースコードを見ることができる。

また右クリック禁止やコピペ禁止サイトでも
それを可能にするプラグインがいくつもある。

それらを研究すればほかのサイトがどうやって実現しているのか
わかると思うよ。

37 :Name_Not_Found:2016/06/20(月) 05:33:40.50 ID:???
jQueryUIのサイトでThemeをカスタマイズして使うと、確かに色やフォントなど変更できました。
でもDialog右上の[x]アイコン画像が出なかったり、あるいは
Dialogのタイトルバーの高さを以下の方法で変更すると
.ui-dialog .ui-dialog-titlebar
{
  height: 20px;
}
変更は出来たのですが、何故か、Dialog内部の本文の部分の幅が勝手に狭くなるなど
挙動がおかしいのです。
jQueryUIは時々使うのですが、前々からこういうおかしな挙動が気になっています。
完成度が低いのでしょうか?
皆さんはそういう問題起こりませんか?

38 :Name_Not_Found:2016/06/20(月) 09:30:22.61 ID:???
>>37
それはあんたの指定の仕方がおかしいんだろw

39 :Name_Not_Found:2016/06/20(月) 10:00:53.42 ID:???
>>38
やはりそういう事ですか。

40 :Name_Not_Found:2016/06/20(月) 13:43:19.19 ID:???
>>35-36
マウスのドラッグイベントを、OSに届けないように止めれば?
preventDefault, stopPropagation

よく知らないけど、他には、文章を選択できなくする機能も、あるかも

>>37
.ui-dialog
.ui-dialog-titlebar

これらで、HTML内を検索して、どういう使われ方をしているのか、研究する

41 :Name_Not_Found:2016/06/20(月) 16:45:56.84 ID:???
詳しくないから見てるだけのつもりだったけど
$("*").on("selectstart",function(){return false;});

セレクトさせないだけならこんなのがあったはず。
あと、フォーカス外せば選択も解除できるはずだから、解除するならelement.focus()をどっか別のところでやればいいはず
独学で動けばそれでいい程度しか学んでないので、あとは詳しい人の改良待ち

42 :Name_Not_Found:2016/06/20(月) 20:07:46.23 ID:???
$("*").on(...)
全要素に対してこう言うイベント処理をすると動きが遅くなるなどの影響は出ないのですか?

43 :Name_Not_Found:2016/06/20(月) 21:51:00.65 ID:???
>>42
ああ、別に影響出るほど重くはならないけど、処理が多くなるのはそのとおりだと思うから対象のセレクタ入れればいいよ
俺の知識は糞だから極めてる人の助言祈るかご自身で調べるか。

44 :Name_Not_Found:2016/06/20(月) 23:39:19.72 ID:???
極めている人だけど、この問題は目的がなんであるかによるな。
もしソースコードを見せたくないとか
コピペを防ぎたいってのが目的であれば
それは不可能だ。

45 :Name_Not_Found:2016/06/20(月) 23:47:20.43 ID:???
昔BASICのソースを表示しようとすると、
文字コードのビープ音が仕込んであって
「ピーピー」大音量で鳴り続けるというプロテクトがあったなぁ

46 :Name_Not_Found:2016/06/21(火) 01:49:30.79 ID:???
ちなselectstart falseの用途って、例えばマウスでドラッグさせたりするものに使うなら効果ある。mousedownしながら移動させるわけで、そうすると範囲も選択されちゃうから鬱陶しいのでselectstart falseね。でもコピーさせないためとか、そういうのなら無意味なので無駄よ。

47 :Name_Not_Found:2016/06/21(火) 09:02:54.93 ID:???
<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
  <tr><td>7</td></tr>
  <tr><td>8</td></tr>
  <tr><td>9</td></tr>
</table>
こういう10行x1列のテーブルがあり、その行数を7行に変更して余分な3行を右側に移動する。
<table>
  <tr><td>0</td><td>7</td></tr>
  <tr><td>1</td><td>8</td></tr>
  <tr><td>2</td><td>9</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
</table>
5行にした場合は以下のようになる。
<table>
  <tr><td>0</td><td>5</td></tr>
  <tr><td>1</td><td>6</td></tr>
  <tr><td>2</td><td>7</td></tr>
  <tr><td>3</td><td>8</td></tr>
  <tr><td>4</td><td>9</td></tr>
</table>
つまりtableを表示している領域のheightが小さくなっても縦のスクロールバーを出さずに横に表示したい。
この例では10行x1列の場合ですが実際にはN行xM列でやりたいのです。難しいでしょうか?

48 :Name_Not_Found:2016/06/21(火) 09:39:25.71 ID:???
tableでなく、boxを使ってfloat
根本的に間違い

49 :Name_Not_Found:2016/06/21(火) 10:44:05.67 ID:???
>>48
レスありがとうございます。
boxでググッテも良く分かりませんでした。
boxとは何ですか?

50 :Name_Not_Found:2016/06/21(火) 12:10:22.34 ID:???
>>47
マークアップ構造を変えるのは好ましくないので、ちょっと試してみた
( tbody も追加したとする)

table, td, tr {
display: block;
}
tbody {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}

100px は好みの高さで

51 :Name_Not_Found:2016/06/21(火) 13:17:41.43 ID:???
>>50
情報ありがとうございました。
やってみます。

52 :Name_Not_Found:2016/06/21(火) 18:07:05.80 ID:???
>>50
やってみました。
うまく行ったのですが一つ問題があり、
<td colspan="3">
などとしても無視されます。
50さんの方式ではcolspanは効かないのでしょうか?

53 :Name_Not_Found:2016/06/21(火) 21:55:18.78 ID:???
>>52
もう普通にdiv+inline-blockとかでやりなよ
そういう用途ってことはデータって訳でもないだろうしTableでやること自体間違ってる内容な気がする

54 :Name_Not_Found:2016/06/21(火) 22:09:44.87 ID:???
>>52
> colspan="3" は想定外だなw
そういうことやりたければ grid レイアウト使うしかないが
サポートブラウザが少ない

55 :Name_Not_Found:2016/06/22(水) 01:13:55.46 ID:???
>>53
テーブルでやるのは間違いじゃないだろうか?っていうのには
同意するけど、何を使っても結局一緒な気がする。

HTML5 + CSS3において、tableとかtrとかtdは
デフォルトのdisplayがtable-cellとかtable-rowにってるってだけでdivなどと同じもの。
逆に言えばdivなどのdisplayをtable-rowやtable-cellに設定することでテーブルになるけど
今回の問題はテーブルを使っても解決できない問題なわけで。

ぶっちゃけこれCSSの問題(限界)なんだよね。
今のCSSはHTMLに出てくる要素の順番への依存から逃れられない。
例えば上から下へと表示されていく文章を
下から上に表示するようにすることができない。
これは見た目の話なので本来はCSSでやるべき内容。

56 :Name_Not_Found:2016/06/22(水) 01:23:35.98 ID:???
>>52
> <td colspan="3">
> などとしても無視されます。

どういうときに colspan="3" と指定したくて、
その指定をしているものが移動したときに
どうなればいいのかのしようがないから答えられない。

57 :Name_Not_Found:2016/06/22(水) 02:00:15.55 ID:???
>>55
>下から上に表示するようにすること
すでに可能(ブラウザ依存かもしれないが)
>50 の例で
flex-direction: column-reverse;

>順番への依存から逃れられない
order プロパティを使えば可能
>50 の例で言えば各 tr に order:<整数> を設定する

58 :Name_Not_Found:2016/06/22(水) 04:11:54.71 ID:???
レスポンシヴに対応するなら、Blue print, 960 Grid System とか

59 :33:2016/06/22(水) 10:40:50.81 ID:???
今更レスだけど>>33の質問を解決できた。けど解決法をここに書いても誰も興味ないよね…。

>>34
> jQueryのtextメソッドに処理を割り込ませるしかないだろうね。
それは思いつかなかった。

60 :Name_Not_Found:2016/06/22(水) 10:50:22.85 ID:dvkmL6Y4
http://www.dekasu.net/upload_thumbs/

の画像の差し替え(排他制御)で現在の画像を使用を連続でクリックするとエラーが出るけど、何故なんでしょうか?

61 :Name_Not_Found:2016/06/23(木) 00:13:50.94 ID:???
>>59
書いていいよ。
俺がどうやるのか知りたいw

>>34で書いた以外の解決法?
他にやり方があるとしたら、setTimeoutかsetIntervalで
一定時間ごとに監視する方法しかなさそうだけど。

62 :Name_Not_Found:2016/06/23(木) 00:28:38.26 ID:???
>>60
バグじゃね? 作者に聞いたら?

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

有名なプラグインならまだしも、どこの誰か知らんやつが作った
jQueryプラグインのデバッグをここでやってもなんのメリットもないし役にも立たない。
俺らは誰かのデバッグ屋じゃないんでな。そういうのは作者本人に聞くように。

63 :Name_Not_Found:2016/06/23(木) 00:47:23.74 ID:???
本スレこっちなんだから、こっちで聞けば早く問題解決できるのにねw

> jQueryにArray.prototype.concatと同等の関数はありますか。

上の質問対するレスが↓これ
> jQuery([a,b,c])
これは動きません。下手なスレで聞くから的はずれな答えがくるw

これなら動くけどな
var a = $('#a')[0];
var b = $('#b')[0];
var c = $('#c')[0];
var abc = $([a, b, c]);

要するに、$(DOM要素、もしくはDOM要素の配列)なら動くわけだ。
まあこれ↓は動いたりするんだがな。

var a = $('#a');
var a2 = $(a);

jQueryオブジェクトというのは、要素ではなくて0個以上の要素をラップしたもので
本質的に配列であるから、$([a, b, c]); は配列の配列という扱いになって動かないんだよ。

で、本来の質問のArray.prototype.concatと同等なものはaddメソッド。

だから以下の問題に対する答えは
> ヒントを頂いたのでjQueryオブジェクト以外も試してみましたが、NodeListやHTMLCollectionはmergeしてくれませんでした…。
> console.log(jQuery([document.querySelectorAll('p'), document.getElementsByTagName('div')]));

こう書けばいい。
$(document.querySelectorAll('p')).add(document.getElementsByTagName('div'))

64 :Name_Not_Found:2016/06/23(木) 00:51:41.06 ID:???
もちろん最初から $('p, div') と書けばいいのは言うまでもない。

65 :Name_Not_Found:2016/06/23(木) 01:06:12.43 ID:???
あとmergeって単語が出たからついでに答えておくと
こういうこともやろうと思えばやれる。
冗長だから普通はしないけどね。

$.merge($.merge([], document.querySelectorAll('p')), document.getElementsByTagName('div'))

66 :Name_Not_Found:2016/06/23(木) 01:09:56.69 ID:???
array-like objectをArrayに変換してからconcatを使うって手もあり

$($.makeArray(document.querySelectorAll('p')).concat($.makeArray(document.getElementsByTagName('div'))))

それにしてもDOMが交じると本当に長くなるなw

67 :Name_Not_Found:2016/06/23(木) 02:15:04.34 ID:???
どちらが本スレかは>>30を読んでもらうとして、
元スレ http://echo.2ch.net/test/read.cgi/hp/1465399470/25- で質問者自身が考察してるな

68 :Name_Not_Found:2016/06/23(木) 02:39:58.88 ID:???
> .add()はa.add(b, c)が期待通りに動かず、a.add(b).add(c)と書いてようやく要件を満たします。

そりゃa.add(b, c)なんてのが使えるなんて言ってないしな。

69 :Name_Not_Found:2016/06/23(木) 02:42:35.65 ID:???
> 変数a,b,cから変数abcを一つの関数で生成したい
要件を読み取れない人の回答は読んでも仕方ない

70 :Name_Not_Found:2016/06/23(木) 02:47:45.23 ID:???
関数一つに拘る意味がわからんな。

手段と目的が逆になってる人な気がするね。

71 :Name_Not_Found:2016/06/23(木) 03:00:50.57 ID:???
そもそも「変数a,b,cから変数abcを一つの関数で生成したい」ことが
ありえないので・・・。

72 :Name_Not_Found:2016/06/23(木) 03:33:19.31 ID:???
こっちのスレはやっぱり荒れやすいな

73 :Name_Not_Found:2016/06/23(木) 03:51:39.95 ID:???
>>30を読んで本スレに移動しよう

JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/

74 :33:2016/06/23(木) 18:50:56.63 ID:???
>>61
Object.defineProperty($('#target')[0], 'firstChild', { get: function () { console.log(this.lastChild.nodeValue); this.removeChild(this.childNodes[0]); } });
たぶんこれで動くはず。そのfirstChildとそれを使ってるjQueryのメソッドが使えなくなるけど。

75 :Name_Not_Found:2016/06/23(木) 23:31:29.11 ID:???
>>72
本スレ()とどっこいだろ
キモイ成りすましとか

76 :Name_Not_Found:2016/06/23(木) 23:38:36.41 ID:???
>>74
それはハックレベルの汚いコードだな。
本来の動きを壊している時点でハックよりもひどいかもしれん。

デバッグとか一時しのぎならいいけど
製品としては絶対に許されないコード。

それがわかっているならいいけどね。

77 :33:2016/06/24(金) 00:35:38.39 ID:???
>>76
これに限らず(要素をinnerHTMLで頻繁に要素内を変えてるのが既にあって)
セッターに取得したその要素とinnerHTMLを指定すると
そのオブジェクトのinnerHTMLが使えなくなると思うんですが、
そういうのはダメなんですか?

78 :Name_Not_Found:2016/06/24(金) 00:40:04.23 ID:???
>>77
何を言ってるのかさっぱりわからん。

まず一般的に、Object.definePropertyは使うべきものじゃない。
これを使っていいのは、汎用的なフレームワークやポリフィルやライブラリ

通常の仕事で書くときには使ってはならない。
なぜならば、わかりづらいコードを書くことができてしまうからだ。
通常はそんなものを使わないで書くことができる。

79 :33:2016/06/24(金) 00:54:07.56 ID:???
>>78
素人かつ趣味でやっていてそこらへんの事情はちょっとわからないのですが、
Object.defineProperty以外のセッターならいいんでしょうか?
他にプロパティの値を監視する代替案はありますか?

80 :Name_Not_Found:2016/06/24(金) 01:51:38.67 ID:???
>>79
いちばん重要な視点が抜けてる。
何のために監視したいかだよ

81 :Name_Not_Found:2016/06/24(金) 03:47:24.49 ID:???
すんません。。

<a href="http://www.yahoo.co.jp/">

    /*この辺りは適当にいろんな要素*/

<select>
<option value="1">パン</option>
<option value="2">ごはん</option>
<option value="3">めん</option>
</select>

</a>

$("select").click(function(e){
 e.preventDefault();//←selectの操作中yahooに遷移して欲しくないから
})

■firefox 47だとセレクトボックスの値をマウスで変えられない。。
■chrome 51だとセレクトボックスの値をマウスで変えれる。

firefoxでもchromeと同じ動作を実現するにはどうしたらよいのでしょうか。

82 :Name_Not_Found:2016/06/24(金) 04:05:39.14 ID:???
アプリケーション起動判定とかで
指定したhostとportからの返り値から それを確認するなどといった場合は
どういうコードを書けばいいのでしょうか?
locationを利用すればできそうな気もするのですが いまいちピンときません

83 :Name_Not_Found:2016/06/24(金) 04:08:03.17 ID:???
>>82ですが
例えば yahoo.co.jpのport80が通信できているかどうかといった要領です
phpならばわかりやすいのですが...

84 :Name_Not_Found:2016/06/24(金) 08:39:58.95 ID:???
>>83
https://developer.mozilla.org/ja/docs/Web/API/Window/location
イマイチ言ってる意味が分からないからとりあえず。

85 :Name_Not_Found:2016/06/24(金) 14:11:35.87 ID:???
>>84
ありがとうございます
一番シンプルに書くと、サーバーの稼働確認などで
あるホストのport80が空いていれば、okを表示する といったようなものです。
要素例
document.getElementById("port").value="80";
document.getElementById("host").value="google.com";

function callback(host, port, message,id){
document.getElementById( id ).innerHTML += ": ホスト "+host+" ポート "+port+" は "+message;
if(message=="オン") document.getElementById( id ).style.color ="green";
else document.getElementById( id ).style.color ="red";

ステータス確認などの記述例

86 :Name_Not_Found:2016/06/24(金) 15:24:57.88 ID:???
>>30
タイトルに"JavaScript"が入った理由が分からんかったが、JavaScriptスレも乗っ取ろうとする現れなのかね
子のスレは事実上vol.4だし、わけわからんな

87 :Name_Not_Found:2016/06/24(金) 16:38:17.51 ID:???
>>85
それが出来ると脆弱性になるから無理ちゃうかな?
よそのサーバー操作できるって事は、アクセスした人にAmazonに出品した自分の商品を買い物かごに入れておくって操作も出来ちゃうだろうし

88 :Name_Not_Found:2016/06/24(金) 19:02:12.96 ID:???
次スレ立ってた

+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1466750494/

89 :Name_Not_Found:2016/06/24(金) 22:42:53.66 ID:???
ぶっちゃけこうやるのがreduceを使った正しいコードなんだがなw

var abc = [a, b, c].reduce(jQuery.merge, $());

90 :Name_Not_Found:2016/06/24(金) 22:44:24.41 ID:???
おっと冗長だったw

var abc = [a, b, c].reduce($.merge, $());

91 :Name_Not_Found:2016/06/24(金) 23:01:27.65 ID:???
正しい使い方を知らない人たちは
困り者だよなw

92 :Name_Not_Found:2016/06/24(金) 23:44:02.21 ID:???
一人芝居が好きだねえ

93 :Name_Not_Found:2016/06/25(土) 00:07:53.55 ID:???
情報だっていう理由で、jQueryを$に変えたら、
全く的はずれな指摘してワロタw

94 :Name_Not_Found:2016/06/25(土) 00:26:28.51 ID:???
「情報だっていう理由」って文章の意味がよく理解できない。

95 :Name_Not_Found:2016/06/25(土) 00:34:49.22 ID:???
>>94
http://echo.2ch.net/test/read.cgi/hp/1465399470/59
で「さっきこっちに正しい使い方を書きましたよw」と書かれた事を指してるんじゃないかな

96 :Name_Not_Found:2016/06/26(日) 02:04:45.50 ID:???
レベル高くなったね。ついていけなくなった

97 :Name_Not_Found:2016/06/26(日) 08:05:53.75 ID:???
独りのjQuery信者が必死になって回答してるだけで全体としては大して変わってない
子のスレは彼の独壇場

98 :Name_Not_Found:2016/06/26(日) 12:24:25.90 ID:???
それはそれですごいなw

99 :Name_Not_Found:2016/06/26(日) 12:27:31.03 ID:???
jQueryのメソッドの中でネストしている奴なw

100 :Name_Not_Found:2016/06/28(火) 09:32:50.28 ID:???
$.get("なんとか.js", function(data) {});
指定したurlの最後が.jsだと、実行するのですが、そういう仕様なのでしょうか。
そういう説明はまだ見つけてません。

101 :Name_Not_Found:2016/06/28(火) 10:22:56.99 ID:???
>>100
詳しくは知らないから解答にはならないけど、レスポンスヘッダのContent-Typeがtext/javascriptの時実行されるね

102 :Name_Not_Found:2016/06/28(火) 10:48:12.16 ID:???
>>100
$.getScript("hoge.js", function(data) {});

103 :Name_Not_Found:2016/06/28(火) 15:55:35.08 ID:???
<div id="divID">
  <button>ボタン</button>
  <input type ="text"/>
  他の要素
<div>
の時に、
$('#divID>button, #divID>input[type=text]')...
とすると二つの要素が得られると思いますが、この記述を
$('#divID button|input[type=text] ')...
こういう感じで  | 記号を使うなどで書き換えられますか?
実際は divIDの部分がもっと長い文字列なので、それを二回書くと物凄く
長くなるので一回ですませたいのです。

104 :Name_Not_Found:2016/06/28(火) 19:51:01.94 ID:???
>>103
$('#divID').children('button, input[type="text"]');

105 :Name_Not_Found:2016/06/28(火) 21:19:19.66 ID:???
>>101の説明に補足すると、拡張子がjsだとウェブサーバーの設定で
レスポンスヘッダのContent-Typeがtext/javascriptになる。
jQueryでは拡張子で判断はしていないが、Content-Typeで判断しているということ。
そしてtext/javascriptで実行されるのはJSONP対応なんじゃないかな?

106 :Name_Not_Found:2016/06/28(火) 21:56:27.79 ID:???
>>104
ありがとうございました

107 :Name_Not_Found:2016/06/29(水) 22:52:57.24 ID:???
>>106
他の要素に2行目の<button>とは別の<button>はないよな?

108 :Name_Not_Found:2016/06/29(水) 23:11:09.25 ID:???
<div class="a">
 <span class="b">1</span>
 <span class="b">2</span>
</div>

<div class="a">
 <span class="b">3</span>
 <span class="b">4</span>
</div>

$('.a').children('.b').each(function() {
 console.log(this.textContent)
});

当たり前なんだろうけど、これでちゃんと4回のループになるんだよな。
良く出来てるよな。

109 :Name_Not_Found:2016/06/30(木) 19:56:46.77 ID:+N+EXIhf
突然どうした?

110 :Name_Not_Found:2016/06/30(木) 20:52:06.97 ID:???
>>109
感心しているだけ。

例えばこうすることで、2回のループにすることはできる

["12", "34"].forEach(function(c) {
 console.log(c)
});

そしてこれでも2回のループになる。
"12".split("").forEach(function(c) {
 console.log(c)
});

だけどこの2つを組み合わせて関数(アロー関数含む)を追加せずに
(または一つのforEachだけで)2×2回の4回のループにすることはできないでしょ?

jQueryではeachの前にあるchildrenメソッドで2×2の4つの要素を
生成しているってことなんだよね。だから4回のループになる。
jQueryを使わずに書けばこんな感じ(もちろん動きません。)

["12", "34"].split("").forEach(function(c) {
 console.log(c)
});

111 :Name_Not_Found:2016/07/01(金) 00:50:25.87 ID:???
>>110
集計した結果を1つの配列に入れて返してるからじゃないの?
ソース見てないから知らんけど

112 :Name_Not_Found:2016/07/01(金) 01:01:46.19 ID:???
>>111
いや、俺は仕組みはわかってるよw
改めて見るとよく出来てるなぁってだけ。

["12", "34"].split("")が動作しないのは、配列オブジェクトにsplitメソッドがないから
もちろんこれは無いほうが自然だから問題ない。
だけどもし配列オブジェクトにsplitメソッドがあれば
2要素をもった配列オブジェクトから、4要素の配列(["1", "2", "3", "4"])を返すことは可能になる。

jQueryオブジェクトは「DOM要素専用の配列オブジェクト」なので
DOMに特化したchildrenなんてメソッドをつけても自然になった。
それによってよりシンプルに記述することを可能にしたから
良く出来てるなぁって感心してるんだよ。

113 :Name_Not_Found:2016/07/01(金) 07:56:26.34 ID:???
>>110
Array#mapで実現できるだろ
そもそも、>>108は4回じゃなくて8回(4+4)ループ回してるし
jQuery信者的発想がうざい

114 :Name_Not_Found:2016/07/01(金) 08:05:03.67 ID:???
いや、Array#mapじゃ無理か
Array#reduceで出来る
.children()はjQueryコレクションの作り直しに相当するコストの高い関数
配列に同じような関数が存在しないのはおかしくないと思うがね

115 :Name_Not_Found:2016/07/01(金) 08:14:13.85 ID:???
> >>108は4回じゃなくて8回(4+4)ループ回してる
6回(2+4)に訂正しておく

116 :Name_Not_Found:2016/07/01(金) 22:27:54.14 ID:???
>>114
> Array#reduceで出来る
じゃあやってみてjQuery信者的発想と言う前に
まずできるか証明して見せてよ

117 :Name_Not_Found:2016/07/01(金) 22:29:05.48 ID:???
>>115
単にeach引数の関数は4回呼び出されているという意味でしかない
内部の実装の話なんかしてない。

118 :Name_Not_Found:2016/07/02(土) 00:24:09.33 ID:k7dPWvWj
$.ajax()でニコニコ動画のタイトル検索を試していますが、うまく行きません。
dataにjson文字列を設定し、ajax通信でpostしたのですがparsererrorになります。

検索クエリが正常だとparsererrorになり、.fail()になりますがresponsetextの中身には検索結果が入っています。
http://www.dotup.org/uploda/www.dotup.org926215.png
検索クエリがおかしい(

119 :Name_Not_Found:2016/07/02(土) 00:25:57.39 ID:k7dPWvWj
>>118
は取り下げます。何故か書き込めないです…

120 :Name_Not_Found:2016/07/02(土) 08:33:18.82 ID:???
>>116
あらかじめ釘をさしておくが、「コードが長い」や「ループ回数が6回」と文句を言われても知らん
>>115で既に指摘してあるし、ライブラリでコードが短縮されるのは当たり前だからな

['12', '34'].reduce(function (b, c) {
 Array.prototype.push.apply(b, c.split(''));
 return b;
}, []).forEach(function(c) {
 console.log(c);
});

121 :Name_Not_Found:2016/07/02(土) 10:26:48.61 ID:???
> だけどこの2つを組み合わせて関数(アロー関数含む)を追加せずに
> (または一つのforEachだけで)2×2回の4回のループにすることはできないでしょ?

って書いてあるのにw

やっぱり関数を追加しないとできなかったなw

122 :Name_Not_Found:2016/07/02(土) 13:00:28.19 ID:???
「関数を追加」はコールバック関数の事だったのか
そもそも、jQueryでもコールバック関数を使わないと実現できんし、例が悪すぎるわ

123 :Name_Not_Found:2016/07/02(土) 13:32:11.55 ID:???
>>122
そうだよ。書いてあるじゃん
> jQueryではeachの前にあるchildrenメソッドで2×2の4つの要素を
> 生成しているってことなんだよね。だから4回のループになる。
> jQueryを使わずに書けばこんな感じ(もちろん動きません。)
> ["12", "34"].split("").forEach(function(c) {
>  console.log(c)
> });

(eachの中の関数とは別に)もう一つ関数を追加しないと実現できない。関数を追加せずに
既存のメソッドを使うだけで要素と要素の組み合わせ(もちろん組み合わせだけじゃない)の
処理を実現できる。だからjQueryはよく考えられてるなって言ってるの。

> そもそも、jQueryでもコールバック関数を使わないと実現できんし、例が悪すぎるわ
今回は単にループしている数を明らかにするためにeachを使っただけで>>108 であれば、
.a の中の .b の全組み合わせを求めるのにコールバック関数はいらん。
$('.a').children('.b') これだけでよい。(.a > .b と書いてないのは >>103-104 の続きだから)

もちろん $('.a').children('.b').css('color', 'red') という書き方もできるのでコールバック関数も
ループもを使わずに「.a の中の .b に当てはまるものすべての文字色を赤にする」ことを実現できる。

jQueryのこの書き方っていうのは手続き型的な処理がないから見方を変えると
CSSの定義するという書き方と同じになってるんだよね。少しづつ変化させていくとこうなるw

.a > .b { color: red }
→ $('.a') > $('.b') { color: red }
→ $('.a') children $('.b') css (color: red)
→ $('.a').children('.b').css('color', 'red')

ね? ちょっと文法が違うだけって感じられるはず。ここにCSSにはないループや関数が
入ってくると、CSSとは考え方が全く違う手続き型の書き方として見えてしまう。
jQueryの書き方は関数型風であると同時にCSSの書き方とも親和性が高い。

124 :Name_Not_Found:2016/07/02(土) 13:34:38.60 ID:???
>>123
jQueryの例はjQueryコレクションで配列じゃないだろ
同じオブジェクトを指してないのになぜ同列に語るんだ?

125 :Name_Not_Found:2016/07/02(土) 13:37:20.24 ID:???
>>120をjQueryで楽にかけないと話にならん

126 :Name_Not_Found:2016/07/02(土) 13:43:41.85 ID:???
>>125
> >>120をjQueryで楽にかけないと話にならん

>>120はDOMじゃないのでDOM用のjQueryでやる内容じゃない。
やるとしたらlodashだろう。

127 :Name_Not_Found:2016/07/02(土) 13:45:00.37 ID:???
>>124
> jQueryの例はjQueryコレクションで配列じゃないだろ

そうだよ? jQueryコレクションと言うものを作り出すことで
配列として扱う方法では不可能なことを実現してるので
jQueryは良く出来てるって感心してるの。

DOM要素を配列として扱う方法じゃあだめなんだよ。

128 :Name_Not_Found:2016/07/02(土) 14:17:56.09 ID:???
$.ajax()でパーサーエラーが返ってくるときは、
サーバーからの応答がjson形式でその中身がおかしいということでしょうか

129 :Name_Not_Found:2016/07/02(土) 14:18:12.19 ID:k7dPWvWj
>>128です、ID出し忘れました。すいません。

130 :Name_Not_Found:2016/07/02(土) 18:00:14.09 ID:???
>>128
適当にググればわかるだろ
http://lealog.hateblo.jp/entry/2011/12/16/234332
http://www.koikikukan.com/archives/2014/10/01-012345.php
http://w3q.jp/t/4478
http://qa.atmarkit.co.jp/q/3588

131 :Name_Not_Found:2016/07/02(土) 18:23:23.20 ID:???
>>126
だから、比較例が適切でないといってるんだが、分からん奴だな

132 :Name_Not_Found:2016/07/02(土) 18:26:53.38 ID:???
なにが適切じゃないのか具体的に言えよw

133 :Name_Not_Found:2016/07/02(土) 18:28:47.79 ID:???
>>120
.join('').split('') でいいんじゃね?

134 :Name_Not_Found:2016/07/02(土) 18:33:57.25 ID:???
>>133
空文字は存在しないという前提?

135 :Name_Not_Found:2016/07/02(土) 18:42:17.37 ID:???
比較例を適切にしろっていうのは、
jQueryのDOM操作に対して、JavaScriptでもDOM操作の
話をしろって言ってるんだと思う。
例えばjQueryの$(・・・) と比較するならばquerySelectorAllだろという事。

だけどquerySelectorAllで帰ってくるNodeListにはメソッドが最低限のものしか無いから
document.querySelectorAll('.a').children('.b').css('color', 'red')
なんてことはできないんだよね。

適切な比較例にしても殆ど変わらないな。

136 :Name_Not_Found:2016/07/02(土) 22:48:32.47 ID:???
>>135
比較例を適切にはあなたの推測通り
>>108のjQueryコードに対して>>110のESコードが比較対象になってない
jQueryはDOM特化だからDOMコードは効率よく書けるが、配列に対して効率よく書けるわけではない
だから、>>110はjQueryでもESでもコールバック関数を一つにするのは不可能

> だけどquerySelectorAllで帰ってくるNodeListにはメソッドが最低限のものしか無いから
Function#callを使うか、Array.fromで配列に変換すれば配列用関数を使える
>>108をESで書くなら>>120的な実装になるだろう

Array.prototype.reduce.call(document.querySelectorAll('.a'), function (b, c) {
 Array.prototype.push.apply(b, c.querySelectorAll(':scope>.b'));
 return b;
}, []).forEach(function(c) {
 console.log(c);
});

137 :Name_Not_Found:2016/07/02(土) 23:08:09.71 ID:???
:scope は実装が追い付いてないので XPath を使う方が相互運用性の点で良い
forEachについてはcallとの組み合わせでコード量が長くなってしまうので、NodeList を iterable にするおまじないを使って、for-of を使うともっとシンプルに書ける

実際のところ、>>108はdocument.querySelectorAll('.a>.b') で十分であり、メソッドチェーンを使う必要もないので>>108は現実に即したコードとは言えない
CSSセレクタで補えないフィルタをする場合が適切な例となりうるが、document.evaluate, document.createTreeWalker, document.createNodeIterator を使えばSelectors APIよりも楽に書ける場合も多々ある
いわゆる親セレクタ、セレクタの先読み、テキストノードの選択はSelectors APIで網羅できない弱点といえるな

138 :Name_Not_Found:2016/07/02(土) 23:24:58.92 ID:???
>>136
やっぱりjQueryだと(コールバック)関数が一つでいい処理が
2つになってるじゃねーかw

139 :Name_Not_Found:2016/07/02(土) 23:26:11.97 ID:???
>>136
> だから、>>110はjQueryでもESでもコールバック関数を一つにするのは不可能

>>110は例であってjQueryだとコールバック関数一つ出かけるなんて
一言も言っていません。なんでこう読解力がないんだろう?

140 :Name_Not_Found:2016/07/02(土) 23:27:57.28 ID:???
訂正

>>110は例であってjQueryだと "この処理を" コールバック関数一つで書けるなんて
一言も言っていません。なんでこう読解力がないんだろう?


通常のESだとquerySelectorAllを使っても
コールバック関数一つで書くことは不可能だが、
jQueryだとコールバック関数一つで書くことが可能になる。
どんなにチェインをつなげたとしてもね。

141 :Name_Not_Found:2016/07/02(土) 23:30:10.89 ID:???
ゴミみたいな内容をいつまで続けるんだ

142 :Name_Not_Found:2016/07/02(土) 23:31:53.00 ID:???
> いわゆる親セレクタ、セレクタの先読み、テキストノードの選択はSelectors APIで網羅できない弱点といえるな
たしかに。

jQueryだとこんな感じでできることがSelectors APIではできない。

$('.b').parents('.a').css('border', '1px solid red')

143 :Name_Not_Found:2016/07/02(土) 23:46:52.59 ID:???
テキストノードの選択はこんな感じかな。
jQueryプラグインにすると簡単になるね。

(HTMLは>>108

$.fn.textnodes = function() {
 return this.contents().filter(function() {
  return this.nodeType === 3;
 });
};

$('.a').children('.b').textnodes().each(function() {
  console.log(this.nodeValue);
})

144 :Name_Not_Found:2016/07/03(日) 03:47:35.74 ID:???
jQueryの効率と速度は凄いと思うし有り難く使ってるが
凄いと言い出してる人の主張はとても理不尽で不毛な要求にしか見えない
詳しくはしらないがjQueryだって中でいろんな処理走らせてるだろうに、あれだめこれだめって色々縛り作るとかそもそも同じ土俵で戦うのを制限してる時点で平等じゃない

145 :Name_Not_Found:2016/07/03(日) 12:01:52.82 ID:???
> 凄いと言い出してる

誰のこと?w
少しでもjQueryによっていい話をすると逆上してしまうようだねw



【レス抽出】
対象スレ:+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
キーワード:凄

103 名前:Name_Not_Found[sage] 投稿日:2016/06/28(火) 15:55:35.08 ID:???
実際は divIDの部分がもっと長い文字列なので、それを二回書くと物凄く
長くなるので一回ですませたいのです。

144 名前:Name_Not_Found[sage] 投稿日:2016/07/03(日) 03:47:35.74 ID:???
jQueryの効率と速度は凄いと思うし有り難く使ってるが
凄いと言い出してる人の主張はとても理不尽で不毛な要求にしか見えない
詳しくはしらないがjQueryだって中でいろんな処理走らせてるだろうに、あれだめこれだめって色々縛り作るとかそもそも同じ土俵で戦うのを制限してる時点で平等じゃない

抽出レス数:2

146 :Name_Not_Found:2016/07/03(日) 13:03:04.01 ID:???
>>145
検索は文章の意味まで理解しないよ、馬鹿なのかな

147 :Name_Not_Found:2016/07/03(日) 13:42:04.03 ID:???
あぁ、jQueryにとっていい話をすると
なんでも「凄い」と言ってるって脳内変換してしまう人かw

きっとこの人にとってはjQueryの話すべてが
見たくないんだろうな。

普通の話をしてるだけなんだからおとなしく聞いてろ

148 :Name_Not_Found:2016/07/03(日) 18:16:42.11 ID:???
>>147
日本語読めないならROMってどうぞ

149 :Name_Not_Found:2016/07/03(日) 19:58:20.40 ID:???
日本語読めるなら書き込んで良い

150 :Name_Not_Found:2016/07/04(月) 00:57:46.68 ID:???
>>139
それなら>>120でESのコードを書かせたことが無駄
>>121の指摘も的外れ
ミスリードを誘う事しかできない悪文

151 :Name_Not_Found:2016/07/04(月) 21:36:43.77 ID:???
読めばわかることを勘違いしただけだろ?
お前以外に勘違いしているやついるか?

>>108>>110を読めば誰でもわかる。

152 :Name_Not_Found:2016/07/04(月) 23:25:47.88 ID:???
趣旨は誰でも理解してるだろうさ
不公平な比較をしてjQuery優位になるように見せかける姑息な手段が嫌いなだけ

153 :Name_Not_Found:2016/07/05(火) 00:21:13.37 ID:???
実際jQueryの方が有利じゃね?w

>>108をDOM APIだけで書いたらどうなるか?って
話をすればよかったのか?

childrenを使うのは今回の条件だから使わないといけないけど
".a > .b" で書けるって言われるのもくだらないから、
Selectors APIではできない例として>>142を例としようか?


> $('.b').parents('.a').css('border', '1px solid red')

jQueryではこの処理をコールバック関数を使わずに書くことができるがDOM APIではできない。
$('.b').parents('.a')の部分で4つの要素をもったjQueryコレクションが作成され
cssメソッドは4つの要素に対して適用される。
このように"定義"しているように書けるのがjQueryの特徴で素晴らしい点。

という言い方なら、不公平な比較じゃないよね?w

154 :Name_Not_Found:2016/07/05(火) 00:36:51.09 ID:???
>>153
jQueryのソース内でも一切コールバックも何もかも使われてないんだな?

っていう話ね

155 :Name_Not_Found:2016/07/05(火) 00:42:28.44 ID:???
>>154
なんでjQueryのソース内の話が出てくるんだ?
その理屈のままアセンブラまで行く気か?w

jQueryのライブラリの素晴らしさの話なんだが。
よくできているから、jQueryのライブラリのユーザーは
簡単に書くことができる。DOM APIのユーザーよりもね。

156 :Name_Not_Found:2016/07/05(火) 01:54:11.29 ID:???
>>152
横から失礼、それは違うかと。
元々(こんな簡単に記述できて)jQueryって凄いよなって話でしょ。
何から何まで全てjQuery優位とは言ってない(と思う)。
たまたま出した例で不公平も姑息もない。

157 :Name_Not_Found:2016/07/05(火) 09:12:43.90 ID:???
>>156
>>108は「jQueryって凄いよな」って話
>>110は「DOMではこんなこと出来ないよな」って話
だが、>110はjQueryでも実現できないのでこの比較は公平じゃない
>>110がなくて>>153の説明だったなら公平な比較だった

それから、>137に対して>142はjQuery優位な結論に持って行っているが、そんなことはない
例えば、XPath式の descendant::text() はjQueryでもSelectors APIでもコールバック関数を使わなければ実現できない
「Selectors APIで網羅できない弱点」はそのまま「jQueryの API で網羅できない弱点」になる(:has()を使えば先読みは出来るが)
>>143でjQuery pluginを使えばできる」とあるが、それはその通り
ただ、その理屈を通すならDOMでもユーザ定義関数を使えばコールバック関数を使わずとも何でも実現できる
自由な発想でユーザ定義関数、Classを定義できる事がライブラリを使わずに書く事の利点だが、彼はjQueryだけにその特権(jQuery plugin)があるかのように説明する
これが不公平な比較でないといえるだろうか

158 :Name_Not_Found:2016/07/05(火) 09:18:09.71 ID:???
訂正

例えば、XPath式の descendant::text() ”だけ” は jQueryでもSelectors APIでもコールバック関数を使わなければ実現できない

これだけねw

159 :Name_Not_Found:2016/07/05(火) 09:35:30.69 ID:???
jQueryは(テキストを除いて)コールバック関数を使わずに実現できる。
それに対してDOMでは実現できないから、自分でjQuery相当のものを作らないといけない。

だからjQueryってよく出来てるねって話

160 :Name_Not_Found:2016/07/05(火) 09:36:39.22 ID:???
実現可能かどうかの話をしてるんじゃないんだよねw
実現されてるかどうかの話をしてる。

jQueryでは実現されているがDOMでは実現されていない。
なんでこんな簡単なことがわからないんだろうね。

161 :Name_Not_Found:2016/07/05(火) 10:04:38.55 ID:???
jQuery信者って論理のすり替えが得意なんだな
間違いに認めてしまえば>>108は素直に評価されただろうに

162 :Name_Not_Found:2016/07/05(火) 15:19:31.34 ID:???
>>158
お前はXPath式を使ったことがないだろ
jQueryセレクタで対応できないXPath式はそれなりにあるぞ
parent, ancestor, preceding-sibling
関数も含めれば更にある
XPathを使えばjQuery#filterを使わなくて済むパターンは結構な数に上るはずだ

163 :Name_Not_Found:2016/07/05(火) 21:56:54.69 ID:???
> jQueryセレクタで対応できないXPath式はそれなりにあるぞ

jQueryセレクタなんてものはないよ。
それをいうならCSSセレクタな。
だから同じことはquerySelectorAllにも当てはまる話

> XPathを使えばjQuery#filterを使わなくて済むパターンは結構な数に上るはずだ
上るはずだじゃなくて、具体的にいえばいいのにw

あまり知られてないけど、実は昔はjQueryはXPathに対応していたんだよ。
http://web.archive.org/web/20130429130056/http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors
XPathでしかできないことはあるけど、いらないって思ったから削除したんじゃねーの?
XPathはjQueryからあえて削った機能だよ。

どうしても使いたいなら、プラグインがあったよ。
jQuery XPath plugin
https://github.com/ilinsky/jquery-xpath

で、話を戻すけどCSSではできなくてXPathでできることがあることはわかった。
それがjQueryになんの関係があるんだ?

CSSの場合・・・jQueryの方が使いやすい
XPathの場合・・・引き分け

jQueryの方が1勝1引き分けってことだろう?

164 :Name_Not_Found:2016/07/06(水) 00:31:02.02 ID:???
>>163
> jQueryセレクタなんてものはないよ。
jQueryはセレクタエンジンを:has()とかで拡張してるだろ

> それをいうならCSSセレクタな。
Selectors APIはCSSだけのものじゃないぞ

> どうしても使いたいなら、プラグインがあったよ。
お前さんは何かとプラグインを使えばいいというが、
DOMでも便利関数を自前で作ればそれを呼び出すコードではコールバック関数を一つも使わないことが出来る

> XPathの場合・・・引き分け
XPathの方が多機能な時点で引き分けはない

こいつはただjQueryって凄いといいたいだけだろ
いい加減、言い訳がひどくて見苦しいぞ

165 :Name_Not_Found:2016/07/06(水) 00:40:40.90 ID:???
> DOMでも便利関数を自前で作ればそれを呼び出すコードではコールバック関数を一つも使わないことが出来る

いや、だから自分で作らないといけないんだよね?
そこがいちばん重要な点なんだけど。

166 :Name_Not_Found:2016/07/06(水) 00:41:37.61 ID:???
> XPathの方が多機能な時点で引き分けはない

いや別にjQuery使っていても、
必要ならXPath使ったコード書けますからw

XPath使うのに自前で便利関数を作る必要もないぞ
ほら引き分けじゃんw

167 :Name_Not_Found:2016/07/06(水) 00:45:59.23 ID:???
お前さんは何かとプラグインを使えばいいというが、
DOMでもjQueryを使えばそれを呼び出すコードではコールバック関数を一つも使わないことが出来る

こういう言うべきじゃね?w

プラグインを使え、jQueryを使え。

168 :Name_Not_Found:2016/07/06(水) 00:55:07.54 ID:???
つーかこの勝負(?)はjQueryが素晴らしいライブラリかって
話なんだから、jQueryのコールバック関数を使わない方法を
真似た時点でjQueryの素晴らしさを認めているようなもんなんだけどなw

169 :Name_Not_Found:2016/07/06(水) 01:35:31.64 ID:???
いやだから、言ってるだろ
jQueryなかった時代でも使いことが出来るようそれぞれがそれぞれの組み方でなにかとどうにでもなった
だからjQueryで出来ることはDOMでも出来る。但し相応のコードは用意しなくちゃいけないしブラウザ間の互換も必要とする。
jQueryも分解すればDOMなんだからjQueryに出来る事ならDOMも関数組めば出来る
.DOMでしか出来ないこともプラグインさえ使えば出来るようになる

でもjQuery信者は

DOM=>コールバック禁止、複雑なの禁
jQuery=>できないことはプラグインでできるからすごい
という条件がそもそも不平等

170 :Name_Not_Found:2016/07/06(水) 02:09:48.46 ID:???
まーた話をずらしてる。
jQueryがよくできたライブラリだって話をしてるんだろ。
同じライブラリでもだめなものだってたくさんある。
その中でjQueryは良く出来たライブラリ

171 :Name_Not_Found:2016/07/06(水) 02:10:27.93 ID:???
> jQueryも分解すればDOMなんだからjQueryに出来る事ならDOMも関数組めば出来る
できるできないの話じゃない。

たくさんあるやり方のうち、jQueryは最高のDOM操作ライブラリだって話をしてる。

172 :Name_Not_Found:2016/07/06(水) 02:29:30.55 ID:???
>>165
自分で作る事の何がいけないんだ?
pluginも誰かが作ってるから存在するわけだが、お前さんはplugin作者の労力を否定してるようなもんだ
自分で発明することに労力をかけられないならプログラミングをやめてしまえ

173 :Name_Not_Found:2016/07/06(水) 02:56:06.75 ID:???
>>172
自分で作らないといけないってことは、DOM APIが
jQueryよりも劣ってるってことなんだよ。

jQueryが優れてるから、そのjQueryと
同じような感じに近づけたいんだろう?

174 :Name_Not_Found:2016/07/06(水) 04:22:36.34 ID:???
>>173
> 自分で作らないといけないってことは、DOM APIが、jQueryよりも劣ってるってことなんだよ。
それならjQueryはXPathより劣っているという評価になるな

> jQueryが優れてるから、そのjQueryと同じような感じに近づけたいんだろう?
そう思っているのはお前だけだろ
なぜjQueryをお手本にしなくてはならんのだ?

175 :Name_Not_Found:2016/07/06(水) 09:16:21.06 ID:???
> それならjQueryはXPathより劣っているという評価になるな

jQueryを自分で作るならね(笑)
俺はjQueryを自分で作ったこと無いね

176 :Name_Not_Found:2016/07/06(水) 09:31:48.51 ID:???
お前らさあ、毎回同じ事の繰り返しだな
少しは学習しろよな
キチガイはスルーね

177 :Name_Not_Found:2016/07/06(水) 09:34:58.31 ID:???
jQueryは良く出来たライブラリって話をしているんだから
「DOM API使っても自分でライブラリつくればjQuery風にすることができる」は
jQueryが素晴らしいということを後押ししても否定することにはならないからな。

自分で書いたコードでjQuery風にした時点で、このライブラリが
もっとも最良の書き方ってことになるわけだから。

178 :Name_Not_Found:2016/07/06(水) 09:42:38.33 ID:???
スルーっていうのは諸刃の剣で、
誰が見てもキチガイに見えてるならいいんだが、
(いくら誰かがキチガイ呼ばわりしたとしても)
キチガイに見えなければ反論できないように見えちゃうんだよねw

179 :Name_Not_Found:2016/07/06(水) 11:53:13.35 ID:???
>>174
「jQuery XPath plugin」を使わなければXPathと同等の事が出来ないjQueryが劣っているという事なんだが、アホには理解が難しかったようだな
pluginは誰かが「自分で作る」ことで出来上がるもの
pluginはjQueryの機能の一部ではない

180 :Name_Not_Found:2016/07/06(水) 16:37:54.94 ID:???
jQuery信者

DOM=>コールバック禁止、複雑なの禁止
jQuery=>できないことはプラグインでできる

これな。
他のライブラリと比べてjQueryが優れてるって話は分かるけど論点はそこじゃない。
jQueryで出来ることは100%DOMでも出来る。当たり前だが。
DOMで出来るからといってjQueryでできるとは限らない。

例えばSVGもjQuery標準の書き方では初回の生成ができない。$("<svg>"); これが役立たない。
DOMなら標準で生成できる。

181 :Name_Not_Found:2016/07/06(水) 16:52:06.63 ID:???
限られた人生の貴重な時間に於いて目的を達成する為の
手段に無駄な時間を費やすよりもひとつでも多く目的を
達成することが人生をエンジョイする秘訣だ

182 :Name_Not_Found:2016/07/06(水) 18:36:24.23 ID:???
jQuery pluginを認めるならDOMでもNodeList.prototype.elements.childrenを拡張すればquerySelectorAllで>>108を実装できるからね

183 :Name_Not_Found:2016/07/06(水) 18:39:34.21 ID:???
× NodeList.prototype.elements.children
○ NodeList.prototype.children
まあ、彼は自分でコードを書くのが時間の浪費といわんばかりだけど、それが作っている人への尊厳を汚す行為に他ならない事も想像できないんだろうね
jQueryだってjQuery pluginだって誰かが作ったから使えるのにね

184 :Name_Not_Found:2016/07/06(水) 21:06:19.44 ID:???
勉強のためにjavascriptのみで判定するリンクチェッカーを作ってみようと思いさっそく躓きました。

画像はimageにonloadさせてサイズを測って判定、ということがわかったのですが
他のコンテンツ、例えば動画やツイートなどの閲覧判定で悩んでいます。

・動画(例えばyoutube)のページは存在していても、動画自体は再生できる状態か否かの判定
・ツイートは削除されているが、”このページは存在しません。”ページが返ってくるので閲覧自体はできる
などなど

何か良いアイデアはありませんでしょうかよろしくおねがいします

185 :Name_Not_Found:2016/07/06(水) 21:50:07.63 ID:???
>>179
> 「jQuery XPath plugin」を使わなければXPathと同等の事が出来ないjQueryが劣っているという事なんだが、アホには理解が難しかったようだな

何に対して劣っているの?
DOM APIでしょ?

jQuery使う。XPath対応できない!
じゃあDOM APIを使おう。ってことで別に
その点ではどちらも同じでしょ?

186 :Name_Not_Found:2016/07/06(水) 22:18:13.01 ID:???
>>180
> 例えばSVGもjQuery標準の書き方では初回の生成ができない。$("<svg>"); これが役立たない。

こうすればできるよ。
var $circle = $(document.createElementNS("http://www.w3.org/2000/svg", "circle"));
$circle.attr({cx: "190", cy: "40", r:"40", fill: "#c44"});
$(document.createElementNS("http://www.w3.org/2000/svg", "svg")).append($circle).appendTo('#main');

要するに要素を作る部分がcreateElementではなく違うネームスペースにしなければいけないからこうなる。
言い換えるとここだけだから、その他の部分は見ての通りjQueryのパワーを使うことができる。

ところで、SVGの話題をしたっていうのは、
3.0でSVGのクラス操作ができるようになったのを知ったからかな?

https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/
> add SVG class manipulation (#2199, 20aaed3)

でもSVGを扱うのであれば、D3を使うのがおすすめだよ
http://ja.d3js.node.ws/
> jQuery や Prototype に馴染のある方は、 ここまでで D3 とそうした他の DOM フレームワークとの類似性に気が付いたことでしょう。
と書いてあるようにD3はjQueryとかなり似ている設計になっている。

d3.select("#TEXT2").selectAll("p").style("color", function() {
 return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

HTMLの話題でDOM APIよりもjQueryが優れていると言ってることに対応して
SVGの話題ではDOM APIよりもD3が優れていると言うかな。

jQueryもD3も同じようにDOM要素のコレクションに対してメソッドが定義されている。
それによりDOM要素の取得部分にコールバック関数必要なくなっている。
この設計の素晴らしさはSVGに対しても同じことだということがわかるね。

187 :Name_Not_Found:2016/07/06(水) 22:19:20.27 ID:???
>>179
> pluginはjQueryの機能の一部ではない

pluginはjQueryの機能の一部ではないが、
今ここで話をしているのはjQueryの設計。

プラグインも同じ設計に基づいている。

188 :Name_Not_Found:2016/07/06(水) 22:20:26.37 ID:???
>>182
> jQuery pluginを認めるならDOMでもNodeList.prototype.elements.childrenを拡張すればquerySelectorAllで>>108を実装できるからね

今話をしているのはjQueryの設計。
あんたがNodeList.prototype.elements.childrenをどう拡張するのか知らんが、
やっぱり素晴らしいjQueryの設計を参考にするんでしょう?w

189 :Name_Not_Found:2016/07/06(水) 22:34:32.94 ID:???
>>183
> まあ、彼は自分でコードを書くのが時間の浪費といわんばかりだけど、それが作っている人への尊厳を汚す行為に他ならない事も

意味がわからん。jQueryがあるから自分でコードを書かなくて良くなった。
ありがとう!って思ってるんだが?

jQuery作ってご苦労さん。使わないけどねwwwって言う方が
よっぽど作っている人への尊厳を汚す行為だと思うが?

>>184
HTMLならiframeでできるかな?とかajax使って調べられるかな?って
思ったけど例えばYouTubeのページはあるけど動画は再生できないとか
ページのURLから動画ファイルが推測できれば(多分できると思うが)実現可能だけど
そういうのはサイトごとにやり方は違うからサービスごとに考えないといけないんじゃないか?
正攻法はAPIを使うことだろうけど、当然これもサービスごとに微妙に異なる

190 :Name_Not_Found:2016/07/06(水) 22:58:50.24 ID:???
>>186
いやjQuery信者主張によればその方法はルール違反の反則だよ
D3もjQuery本体じゃないから論外ね

191 :Name_Not_Found:2016/07/06(水) 23:00:13.74 ID:???
$(document.createElementNS("http://www.w3.org/2000/svg", "circle"))

毎度こんなことするのかと思うと鬱になるなw

192 :Name_Not_Found:2016/07/06(水) 23:11:13.39 ID:???
>>190
> いやjQuery信者主張によればその方法はルール違反の反則だよ
じゃあ俺はjQuery信者ではないということだなw

jQueryの設計が素晴らしいって言っているだけだ。
D3も同じ設計。

>>191
> 毎度こんなことするのかと思うと鬱になるなw

まったくだよな。DOM APIだとSVGの場合だけじゃなくてHTMLでさえ
document.createElementと毎回やってるんだぜw

193 :Name_Not_Found:2016/07/07(木) 01:07:26.15 ID:???
>>192
function doc(name){
return document.createElementNS("http://www.w3.org/2000/svg", "circle");
}

DOMメソッドも作れるから完結になるよ

194 :Name_Not_Found:2016/07/07(木) 01:08:09.87 ID:???
ああ"circle"をnameに変えてくれな コピペして満足したわ

195 :184:2016/07/07(木) 07:38:38.29 ID:???
>>189
そうですか・・
もうこの際リンクチェックしてくれてJSOP対応のサービスを(なかなか見つからないのですが)使おうかなと思います
ありがとうございました

196 :Name_Not_Found:2016/07/07(木) 08:03:04.72 ID:???
>>185
「jQuery + DOM vs DOM」で比較したらDOMが劣るのは当然だろ
その理屈ならライブラリは全てにおいて標準より優っている
改めて言われるまでもなく、皆わかってるし、>>108のコード説明が全くの無意味だわ

197 :Name_Not_Found:2016/07/07(木) 09:05:27.02 ID:???
>>193
> DOMメソッドも作れるから完結になるよ
知ってるけどjQueryでも同じじゃね?w

198 :Name_Not_Found:2016/07/07(木) 09:07:53.95 ID:???
>>196
> その理屈ならライブラリは全てにおいて標準より優っている

そうでもないよ。
DOM APIっていうのはライブラリだから。

標準が優れているのであれば、わざわざそれをラップするライブラリを作る必要はない。
そしてライブラリと言ってもいろんなものがある。
過去に流行ったPrototype.jsっていうのもあるでしょ。

標準やPrototype.jsに比べてjQueryは良く出来たライブラリって
話をしている。

199 :Name_Not_Found:2016/07/07(木) 15:04:05.95 ID:???
>>197
jQueryにそんな機能あんの?DOMの機能じゃないももで

200 :Name_Not_Found:2016/07/07(木) 15:09:59.79 ID:???
教えてください。
draggable というプラグインを使って
文字をtextareaに入れようとしてるのですが、dropイベントが発生しないようですが、
仕様でしょうか?
回避する方法があれば教えてください

201 :Name_Not_Found:2016/07/07(木) 20:36:47.04 ID:???
>>185
XPathとjQueryを比較してjQueryが劣っているといってるんだが?

202 :Name_Not_Found:2016/07/07(木) 22:45:14.83 ID:???
>>199
jQueryは言語じゃないんだよ。
言語(JavaScript)を使わないでjQueryを使えと言われても
困るというか意味不明w

で、当たり前だけどさ、jQueryはJavaScriptという言語から
呼び出して使う。

何が言いたいかわかる?

203 :Name_Not_Found:2016/07/07(木) 22:47:34.47 ID:???
>>201
> XPathとjQueryを比較してjQueryが劣っているといってるんだが?
ゴメンな。
俺はXPath(セレクタの一種)とjQuery(DOM操作ライブラリ)は
全く別物だと考えている。比較するものじゃない。

XPathと比較するならばCSSセレクタだよ

204 :Name_Not_Found:2016/07/07(木) 22:52:52.07 ID:???
>>200
http://stackoverflow.com/questions/7237436/how-to-listen-for-drag-and-drop-plain-text-in-textarea-with-jquery
これでどう?

205 :Name_Not_Found:2016/07/07(木) 23:19:56.64 ID:???
XPathって必要ですか?
使ってますか?

206 :Name_Not_Found:2016/07/07(木) 23:22:37.02 ID:???
https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate

XPathってIEでサポートされてないんだな。

207 :Name_Not_Found:2016/07/07(木) 23:26:28.75 ID:???
ここで一つ俺はXPathを使いまくっているから
XPathは必須だという人に登場してほしい所w
ちなみに俺はXPathはいらない機能だと思ってる。

208 :Name_Not_Found:2016/07/07(木) 23:44:28.11 ID:???
「俺はいらない」とか俺々ルールを持ち出すなら初めから比較すんなよ
「俺はいらない」vs「俺はいる」なんて水掛け論だろ
せめて「俺にとってはjQueryが凄いって思う」にしとけ
そうすりゃ、誰も手を出さないから

209 :Name_Not_Found:2016/07/07(木) 23:50:54.49 ID:???
俺にとってはじゃ単なる主観だろ。
客観的な意見として、ちゃんとした理由が必要。

jQueryは関数型の考え方を取り入れて
CSSセレクタによってツリー構造のDOMを
リスト構造に変換することに成功した。

それにより関数型言語が得意とするリスト処理を適用することが可能になり
高階関数を用いたプログラミングをDOMのリストに対して適用することで
より効率的なプログラミングが可能になった。

210 :Name_Not_Found:2016/07/07(木) 23:51:50.58 ID:???
その発想がjQueryの素晴らしい点だよ。

211 :Name_Not_Found:2016/07/07(木) 23:57:55.28 ID:???
いっちゃ悪いが、>>108的なアプローチは出来るだけ使わないテクニックだから正直どうでもいいんだよな
一つのセレクタで完結できるのは美しいと思うが、jQueryコレクションを何度も作り直すのはコストが重くてやってられん
(こういうと間違いなく、彼が「nミリ秒の差がそんなに重要?w」と煽ってくるが、お前の価値観なんかどうでもいい)
'.a>.b' が最善だし、それが出来なくても forEach x 2 か for-of x 2 で済ます
Selectors APIで何ともならん部分は普通にXPathを使ってるよ
AutoPagerizeがSelectors APIを使っていたらどうにもならんサイトが多かったと思う
XPathの強力さは使ってみないと分からんだろうな

212 :Name_Not_Found:2016/07/07(木) 23:58:47.48 ID:???
>>209
「俺はいらない」が主観だろ
主観と客観ぐらい使い分けろよ

213 :Name_Not_Found:2016/07/08(金) 00:02:28.07 ID:???
> いっちゃ悪いが、>>108的なアプローチは出来るだけ使わないテクニックだから正直どうでもいいんだよな
> 一つのセレクタで完結できるのは美しいと思うが、jQueryコレクションを何度も作り直すのはコストが重くてやってられん
> (こういうと間違いなく、彼が「nミリ秒の差がそんなに重要?w」と煽ってくるが、お前の価値観なんかどうでもいい)

nマイクロ秒な。速度の感覚がずれてるんだよw
で煽りじゃない。その程度の差がそんなに重要なのか?

重要なところだけがんばるという
発想は持ってないのか?

214 :Name_Not_Found:2016/07/08(金) 00:03:25.90 ID:???
>>211
> Selectors APIで何ともならん部分は普通にXPathを使ってるよ

じゃあ試しに「Selectors APIで何ともならん部分」を「XPath」で書いてみて。
なおテキストノードを取得するコードはわかりきってるので
それ以外でね。

215 :Name_Not_Found:2016/07/08(金) 00:11:15.80 ID:???
このライブラリ信者は餌を与えると必ず食いついてくるから「適当にあしらう」か「完全に無視する」かスタンスを決めておいた方がいいね
絶対最後にレスをしないと気が済まないマンだから

216 :Name_Not_Found:2016/07/08(金) 00:11:55.21 ID:???
>>215
じゃあお前はレスするべきじゃなかったねw

217 :Name_Not_Found:2016/07/08(金) 00:15:05.74 ID:???
というか、彼以外の人達だけでレスし合えばいいんじゃないか?
彼は空気みたいなもんだと思えばいい
プログラム板にいけばNGIDでもう少し平和になるんだがね

218 :Name_Not_Found:2016/07/08(金) 00:24:55.10 ID:???
>>217
それは難しいなw

質問する人は、ここの常連じゃない。
だから、そんなお前が作ったくだらないルールなんか知らない。
そして俺はそれに対してレスをする。

常連のあんたはそもそも質問をしない。
どうせ回答もしないだろう。
お前がやることは荒らすことだけだw

今だってそうだろう?
俺は質問者にレスしている。(>>204>>189
俺以外の人は、俺にレスしている。

219 :Name_Not_Found:2016/07/08(金) 00:52:52.58 ID:???
>>202
それを言いたいのはこっちなんだけどなぁ
だからjQuery信者の存在は困る

220 :Name_Not_Found:2016/07/08(金) 00:55:43.77 ID:???
>>219
お前が分かってないのは、DOM APIは言語じゃない
JavaScriptではないということだよw

221 :Name_Not_Found:2016/07/08(金) 01:01:46.22 ID:???
>>202
もう一度言うね

jQueryで出来ることはDOM、普通のJavascriptでできる。当たり前の話。
DOMで出来る事jQueryで出来るかというと、必ずしもそうではない。

例えば
createDocumentはjQueryでは$("<div>")で出来る。
ではcreateElementNS("なんとかかんとか/svg","svg")は?

なんかあんの?D3だとか標準のjQuery以外の物は論外よ
ようはjQueryは素晴らしい、それは間違いない。だからといってDOMを劣等に見る事とは繋がらない。
でもjQuery信者はDOMでもこうすればできるよ、っていう意見と作例に、コールバック使うな、とかやっぱりそうなるよね、とか、jQueryはプラグイン利用が良くて、DOMはだめ、という変娘な条件を押し付ける。

222 :Name_Not_Found:2016/07/08(金) 01:04:31.53 ID:???
>>220
ECMAScript 反論が揚げ足取りか。

223 :Name_Not_Found:2016/07/08(金) 02:11:02.69 ID:???
>>221
もう一度言うね

できるできないの話はしていない。
当たり前すぎるから、お前はわざわざ出す必要はない。

今ここで話をしているのはjQueryのライブラリの
インターフェース(API)の設計の話。

jQueryはCSSセレクタを使うことでDOMツリーをリスト処理できるようにした。
そしてjQueryオブジェクト(DOM要素コレクション)を作り
DOMを操作するメソッドを単一のDOM要素ではなく、DOM要素のリストに対して
適用させることで、リストに対して一括して処理を適用させられるようになった。

こういう「設計」の素晴らしさの話をしている。

224 :Name_Not_Found:2016/07/08(金) 02:18:51.70 ID:???
>>221
> createDocumentはjQueryでは$("<div>")で出来る。
> ではcreateElementNS("なんとかかんとか/svg","svg")は?

お前はjQueryが分かってないなw
それは要素からjQueryオブジェクトを作る時の話ではないか

jQueryの素晴らしさはjQueryオブジェクトを作った後にある。
jQueryはいろんな方法でjQueryオブジェクトを作ることができる。

$('.test') というCSSを使った方法だけではなく、
$(document.getElementsByClassName('test')) という方法でも
jQueryオブジェクトを作ることができる。

jQueryの真価はここからだよ。

var $es = $(いろんな方法) で取得したjQueryオブジェクトに対して
$es.attr({height: 100, width: 100}) のように一括して適用することができる。
これはCSSがクラス名で一括してスタイルを適用するのと同じ。

これによりループや条件分岐と言った手続き処理をすることなく、
関数型風に処理を適用させるという設計が素晴らしいんだよ。

225 :Name_Not_Found:2016/07/08(金) 02:20:50.11 ID:???
jQueryをやっていると関数型を理解できるし、
関数型を理解するとjQueryの素晴らしさも理解できる。

これからは関数型だよ。
手続き型やオブジェクト指向は古いw

226 :Name_Not_Found:2016/07/08(金) 02:45:30.43 ID:???
読むといいよ

jQueryはモナドだ
http://blog.anatoo.jp/entry/20100305/1267801847

227 :Name_Not_Found:2016/07/08(金) 07:35:52.06 ID:???
>>217
それが出来れば理想だけど、彼の投稿数は異常なほどに多いんだよね
ぶっちゃけ、このスレの人数は本当に少ないから

228 :Name_Not_Found:2016/07/08(金) 07:53:35.30 ID:???
まあこういうのはハシカみたいなもんだから

229 :Name_Not_Found:2016/07/08(金) 09:08:59.12 ID:???
>>224
ああ俺は平等な目線でどっちのメリットデメリット認めようねっ話な

230 :Name_Not_Found:2016/07/08(金) 21:43:21.80 ID:???
>>229
俺としてはメリットデメリットはとっくに分かっているから
jQueryの設計が素晴らしい理由の話がしたいんだけどね。
(うるさい人のために言っておくと、設計が素晴らしいといってるだけで
デメリットが全く無いなんて言ってない。)

jQueryを真似てDOM API にもquerySelectorAllが入ったけど
これだけじゃjQueryのようにシンプルに書けるようにはならなかったよね。
だからこそ自分で何かを書くって話になっている。
DOM APIには何が足りなかったのか?

昔prototype.jsってのがあったけど、これはプロトタイプを拡張していると言う問題もあるが
それは置いといて $()関数は単なるdocument.getElementByIdのショートカットであり
戻り値も単なるDOM要素でしかなかった。
そのためjQueryの$()とは要素を選択した後の処理が全く違うものとなった。
prototype.jsのそれはDOM APIのそれと変わらない。

DOM APIのパワーをjQuery並にするにはprototype.jsの$()みたいな
ショートカットをたくさん作ればいいと思っているかもしれないがそれでは実現できない。
jQueryオブジェクトのようなものを作らないといけないわけさ。
そこまでやってやっとDOM APIがjQuery並になれる。

231 :Name_Not_Found:2016/07/08(金) 23:21:26.48 ID:???
>>jQueryの設計が素晴らしい理由の話がしたいんだけどね。

+ JavaScript & jQuery 質問用スレッド vol.6 +

ipt & jQuery 質問用スレッド

jQuery 質問用スレッ

「質問用スレ」←注目

232 :Name_Not_Found:2016/07/09(土) 00:42:06.67 ID:???
メリットデメリット理解してない奴なんて居るんだろうか

233 :Name_Not_Found:2016/07/09(土) 08:20:25.08 ID:???
jQueryが素晴らしいという意見以外を認めない時点でメリット/デメリットの話じゃないから

234 :Name_Not_Found:2016/07/09(土) 09:00:55.70 ID:???
jQueryを使わなくてもできるってだけで
素晴らしいってことは事実だから。

235 :Name_Not_Found:2016/07/09(土) 12:50:47.83 ID:???
宗教論は聞き飽きたよ
ID強制のプログラム板に行けば平和になるかね

236 :Name_Not_Found:2016/07/09(土) 12:55:22.32 ID:???
さっさといけよ

237 :Name_Not_Found:2016/07/11(月) 00:48:02.86 ID:???
canvasでAndroid版のFoxだけ
昔のテレビのような砂嵐になってしまうのですがなぜでしょうか?
PC版のFoxや他のブラウザでは正常です。

238 :237:2016/07/11(月) 10:31:06.43 ID:???
Yahoo知恵袋で解決したので質問を取り下げます

239 :Name_Not_Found:2016/07/11(月) 20:10:40.28 ID:???
>>237ですが>>238はなりすましです。

>>238
別スレからこっちまで来て同じこと書いてキモイぞ。
第一そこにはないし(あったら出してみろ)。

240 :Name_Not_Found:2016/07/11(月) 20:19:56.87 ID:???
ソースも貼れんマヌケはお呼びでないよ

241 :Name_Not_Found:2016/07/11(月) 20:31:20.81 ID:???
>>238
下手糞杉

242 :Name_Not_Found:2016/07/11(月) 23:12:53.16 ID:???
>>237
というかjQueryの話題じゃないのでこっちへどうぞ

+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1463395557/

243 :Name_Not_Found:2016/07/12(火) 00:09:30.85 ID:???
そのスレはまともな回答が期待できない
スレタイ通りJavaScriptなのでここでもOK

244 :Name_Not_Found:2016/07/12(火) 00:33:02.81 ID:???
>>243
そうやってお前が全部こっちに質問流してるんだろ
荒らしは消えろ

245 :Name_Not_Found:2016/07/12(火) 12:34:12.72 ID:???
>>1にjQueryスレって書いてあるよね

246 :Name_Not_Found:2016/07/12(火) 19:24:26.75 ID:???
>>244
は?荒らしは成りすましの>>238だろ

>>245
スレタイにJavaScriptって書いてあるよね

247 :Name_Not_Found:2016/07/12(火) 19:41:35.51 ID:???
>>242
そこまともに機能してねーじゃねーか
最後にコード書かれたの1ヶ月前とかw

248 :Name_Not_Found:2016/07/12(火) 20:30:11.87 ID:???
ぶっちゃけ、JavaScriptスレはここを含めて例の奴が荒らしまわっているのでまともに機能しているスレは存在しない
巡回対象にしている人はいるようなので質問を投げかけて待つのが吉
善良な一般人は既に2chを去っているので2ch以外で質問するのも有

+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1463395557/
+ JavaScript の質問用スレッド vol.121 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1468158373/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/

249 :Name_Not_Found:2016/07/12(火) 23:59:27.76 ID:???
>>248
> 巡回対象にしている人はいるようなので質問を投げかけて待つのが吉

その巡回して質問者に答えているのが
荒らしてるやつ呼ばわりされている俺なんだけどねw

jQueryを使って答えるのが大好きです(笑)

250 :Name_Not_Found:2016/07/13(水) 01:31:33.75 ID:???
複数の回答があっても荒らしが混じってるってところだな
何でもjQueryで返すからわかりやすい

251 :Name_Not_Found:2016/07/13(水) 01:37:32.42 ID:???
>>250
なんでもjQueryじゃないですよ。

DOMの場合はjQueryですけど、
DOMじゃなければlodashで答えますし、
日付関連ならmomentを使います。

基本的に最小の労力で問題を解決する方法を
提示しますね。

252 :Name_Not_Found:2016/07/13(水) 16:17:38.69 ID:???
>>251
http://echo.2ch.net/test/read.cgi/tech/1468158373/66-
こいつか
ライブラリには詳しいが標準仕様は全く学習しないタイプだな
「オブジェクト指向型(手続き型)では使わないたぐいの関数」といってるが、結局bindで解決可能なんだからな
最も、ここでjQuery.proxyが出てこない時点でjQueryにも詳しくはなさそうだがね

253 :Name_Not_Found:2016/07/13(水) 22:25:07.26 ID:???
>>252
curryとbindはぜんぜん違うよw

bindはオブジェクト指向脳の関数。なぜならthisをbindするものだから。
引数も束縛できるから(余計なthisのbindを無視すると)部分適用ができているけど、
そもそも引数の束縛(部分適用)とカリー化は違う。

curry(カリー化)は部分適用することが可能な関数を作ること。
そしてオブジェクト指向じゃないんでthisはでてこない。


でさ、俺に反論するのはいいけどさ、そう言った一つ二つレベルが下の人が
やりそうな間違いしたレスをしても逆効果なだけだよw

> 最も、ここでjQuery.proxyが出てこない時点でjQueryにも詳しくはなさそうだがね
jQuery.proxyも同様。カリー化とは全く別のもの。別のものだから出すわけ無いじゃんw

jQuery.proxyもbindが世の中に普及していなかったらjQueryがずっと前に実装した。
(なおprototype.jsの方がさらに先にbindを実装していたはず)
http://kangax.github.io/compat-table/es5/#test-Function.prototype.bind

ちなみにbindとproxyで関数名が違っているがこれはjQueryのproxyはbindとも違うものだから。
わかりやすい例が$.proxy(object, function_name) という用法で、関数名の代わりに
関数の名前(文字列)で指定できる所。この機能はbindにはない。
なぜこんな機能があるかというと、そもそも$.proxyがthisをbindするものではなくて
特定のオブエジェクトに対して処理を委譲(proxy)するためのものだから。

結果としてthisをbindするわけだけど、thisをbindするのが目的ではなくて処理を委譲するのを目的としていた。
(ちなみにproxyが導入されたのはjQuery 1.4からなのに対して引数を部分適用できるようになったのは
jQuery 1.6から。ここからも部分適用が目的ではなかったことが読み取れる。)

jQueryにも詳しくはなさそう? ここまで解説してあげれば満足ですかねぇ?w

254 :Name_Not_Found:2016/07/13(水) 22:51:45.59 ID:???
>>252
どうせあっちも見てるんだろ?
違いがわかりやすいコード書いてやったから
勉学に励めやw

255 :Name_Not_Found:2016/07/14(木) 00:00:36.28 ID:???
友達居ないの?w

256 :Name_Not_Found:2016/07/14(木) 00:02:41.70 ID:???
そういうレスした意図がわからんw

257 :Name_Not_Found:2016/07/14(木) 00:35:31.84 ID:???
>>253-254
おまえにいわれるまでもなく知っている事しか説明されてないんだが、長々と書くもんだな
bindはthisと引数を束縛するものだ(thisに限定されない)
「標準化に時間がかかるんだろうね」といってるが、お前は「bindがあるから標準化されない」とは考えなかった
考えられる理由は3つ

(1) bindが引数束縛できることを知らなかった
(2) bindが引数束縛できることは知っていたが、bindが存在する影響でcurry化メソッドの標準化しない可能性まで結び付けられなかった
(3) bindが存在する影響でcurry化メソッドの標準化しない可能性を考慮したうえでcurry化メソッドがbindにない重要な機能があるから

お前の主張によれば(3)なんだろうが、非常に苦しい言い訳だと思うね
this束縛で困る状況が限定的だし、書き方次第で何とでもなるからな
少なくともGood Partsの該当コードの要件を満たしている時点でbindの存在は教えるべきだった
bindがあるからcurryが標準化されない可能性に触れない理由も特にない

258 :Name_Not_Found:2016/07/14(木) 01:05:06.86 ID:???
>>257
えとさ、カリー化はbind(引数束縛)のことじゃないって
ところから認めようか?
言い訳多すぎ

259 :Name_Not_Found:2016/07/14(木) 01:06:12.88 ID:???
ったく認めるもなにもさぁ
カリー化はbindとは違うっていう話なのに
なんでそれを理解できないのかなl。

260 :Name_Not_Found:2016/07/14(木) 01:46:00.18 ID:???
JavaScriptにおいてある関数の中から見えているthisというのは、
呼び出すときのオブジェクトによってコロコロ変わるもの。

これが本来のthisであり、bindはこのthisを呼び出すときのオブジェクトとは
無関係に特定のオブジェクトに強制的に結びつけるものだから
(そもそもbindとcurryは違うという話は見なかったことにしてあげるにしても)
bindがあるからcurry(正しくは部分適用)がいらないということにはならない。

部分適用だけがしたい(thisは本来通りに呼び出すときのコンテキストで変わる)ときに
bindを使うと余計なこと(thisをコンテキストを無視して特定のオブジェクトに結びつける)を
してくれるのでbindは部分適用の代わりにはならない。

261 :Name_Not_Found:2016/07/14(木) 01:52:26.14 ID:???
bindではcurry(くどいけどbindはcurryは全く別の機能)を実現できないからcurryを標準化する意味はあるが
これをやらないのは、単にJavaScriptがもともとオブジェクト指向で設計されているから。
関数型のメリットが認知されてきた今なら関数型の関数も取り入れようぜってなるかもしれないが
標準化が遅すぎる上にブラウザ間の互換性が重要な今、今更方向転換するには遅すぎる。
関数型でやりたければjQueryやlodashを使えば良い。

262 :Name_Not_Found:2016/07/14(木) 06:33:46.31 ID:???
html、cssスレで聞いたらjs使わないと無理って言われました。

例えば5行x1列のtableに、
 "あああああ"
 "いいい"
 "うう"
 "ええええ"
 "おおおおおお"
こんなふうに文字列があるとして、それぞれの文字列がtableのcellの幅にピッタリ収まるくらいにfontサイズを調整したいのです。
なので "うう" なら大き目のフォント、 "おおおおおお" なら小さ目のフォント。
どういう手法でやれば実現出来るでしょうか?
実現する方法があるならtableで有る必要は有りません。

263 :Name_Not_Found:2016/07/15(金) 11:18:26.22 ID:???
文字幅が何ピクセルになるかを計算で出すのは無理だから出来ないが答え

264 :Name_Not_Found:2016/07/15(金) 12:14:16.61 ID:???
あまりに狭すぎたりすると物理的に無理だけど文字サイズ調整はこれでなんとか。
https://jsfiddle.net/cv2cgs3a/

でも俺は動けばいい程度の極めて無い人なので誰かこの考え方をヒントにでも最適化してもらうのを期待。

265 :Name_Not_Found:2016/07/15(金) 16:37:39.73 ID:???
>>264
中々よいアイディアですね。
参考にさせて頂きます。
ありがとうございました。

266 :Name_Not_Found:2016/07/16(土) 00:24:40.94 ID:???
>>264
呼ばれた気がしたw

https://jsfiddle.net/cv2cgs3a/1/

267 :Name_Not_Found:2016/07/16(土) 00:58:50.73 ID:???
>>266
ちなその方法は俺が会社で資料作るときに集計プログラム表示して印刷すればいいだけっての作ってる奴の切れ端だから、自分用に手放しで何か作るときお勧め

268 :Name_Not_Found:2016/07/26(火) 14:37:45.34 ID:???
<div>
  ...沢山の要素
</div>

<div>
 <div id="newDivID">
   ...沢山の要素
 </div>
</div>
のようにしたいのですが、JSかjQueryでやる方法を教えて下さい。

269 :Name_Not_Found:2016/07/26(火) 16:30:44.91 ID:???
>>268
$('div').attr('id', 'newDivID').wrap('<div />');

270 :Name_Not_Found:2016/07/26(火) 16:42:59.36 ID:???
>>268
逆参照なら
$('div').html($('div').clone().attr('id', 'newDivID'));

271 :Name_Not_Found:2016/07/26(火) 17:22:06.50 ID:???
>>269>>270
ありがとうございました。
appendとかprependでやるのかと思って試行錯誤しても出来なかったのですが、
教えて頂いた方法で試してみます。

272 :Name_Not_Found:2016/07/28(木) 09:14:27.05 ID:???
chrome で input type="number"
で数値入力する場合に、Mouse Wheelをグリグリ回して数字が変わりますが
回している途中ではonchangeが発生せずにENTERを押した時点で
発生します。それをMouse Wheelをグリグリ回している最中もonchangeを
発生させたいのですが、出来ますか?

273 :Name_Not_Found:2016/07/29(金) 00:44:10.40 ID:IElj7m+I
>>272
手抜きだけど、これでできるよ。

$(document).on('wheel', 'input[type="number"]', function(event) {
 setTimeout(function() {
  $(event.target).trigger('change');
 }, 0);
});

なぜ手抜きかというとmaxを指定するなどして、値が変わらなくても
changeが発生するとか、標準のchangeも発生するけど
そのままでいいのとかあるから。

値が変わったかどうかはfocus時や変更時に現在の値を
data()メソッドで保存しておいて比較したり、
標準のchangeではなく別のイベント名に変更するとかすればいい。
そこはどこまで厳密にしたいかとの兼ね合いで決める。

ちなみにsetTimeoutを入れてるのは、そのままtrigger('change')を実行すると
changeイベントの中でval()で取得する値が変わる前の値になってしまうから。

274 :Name_Not_Found:2016/07/29(金) 07:54:54.44 ID:???
>>273
サンプルならびに詳しい解説ありがとうございました。
でも私の環境win7pro64でchrome64最新版では動作しませんでした。
サンプルを参考にさせて頂いて調べてみます。

275 :Name_Not_Found:2016/07/29(金) 11:04:35.05 ID:???
$.ajax を順番に処理させたいときってどうしてる?

順番が固定なら成功時に次を呼べばいいけど
そうじゃないときはどうしたらいいか
なんか汎用的なうまい方法が思いつかない

276 :Name_Not_Found:2016/07/29(金) 12:46:48.41 ID:???
$.ajax().then()
>そうじゃないときはどうしたらいいか
何をやりたいんだ?

277 :Name_Not_Found:2016/07/29(金) 13:54:49.69 ID:???
>>276
ときどき順番を変えたいとき

278 :Name_Not_Found:2016/07/29(金) 14:06:39.57 ID:???
固定じゃないとはいっても順番に実行する以上、どこかで順序は決まるんだよね?
次のajaxを決める関数をつくっておいて
それぞれのajaxのthenでその関数に問い合わせて次のajaxを聞き、それを呼び出す
では?

279 :Name_Not_Found:2016/07/29(金) 15:59:03.41 ID:6CQ5PEJ1
$.ajax()を呼んでる関数が hoge1(), hoge2() ,hoge3() とあり、順番に呼びたい
hoge2() は PIYO==true のときのみ呼ぶとして、こんな感じのことをしたい。
(成功したら次に進み、途中でエラーになったら処理は中断する)

hoge1();
if(PIYO==true) hoge2();
hoge3();

これを .then とかで実現するには
function hoge1(){ return $.ajax(〜); }
として、
hoge1().done( function(){ hoge2().done( function(){ hoge3(); } ); } );
みたいにするの?

280 :Name_Not_Found:2016/07/29(金) 16:33:07.70 ID:???
ネストしなくても、メソッドチェーンでいけると思うけど
hoge1()
.done(function(){
 return hoge2();
}).done(function(){
 hoge3();
});
…というか、順番が固定しない、という話はどこへ…?
hoge1、hog2、hoge3 に入れるajaxが不定ということかな…

281 :Name_Not_Found:2016/07/29(金) 16:49:05.22 ID:???
>>280
説明上 簡略化しましたが

hoge1();
if( PIYO==true ){ hoge2(); hoge3(); }
else{ hoge3(); hoge2(); }

みたいなのもあります。そのときは

hoge1()
.done(function(){
 if(PIYO==true) return hoge2();
else return hoge3();
}).done(function(){
 if(PIYO==true) return hoge3();
else return hoge2();
});

みたいにやるんでしょうか
案外 読みにくい書き方ですね・・・

282 :Name_Not_Found:2016/07/29(金) 17:15:56.67 ID:???
条件によって呼び出す関数の数が変わるときも
メソッドチェーンは使えないのか

283 :Name_Not_Found:2016/07/29(金) 18:53:45.09 ID:???
じゃあ、こんなの。mugiが実行する関数をfugaに聞いて、それを実行
function doHoge(){
 var fuga = new function(){
  var trueArray = [hoge1, hoge2, hoge3];
  var falseArray = [hoge1, hoge3, hoge2];
  this.getFunc = function(index){
   if (PIYO){ return trueArray[index]; }
   else{ return falseArray[index]; }
  }
  this.max = trueArray.length;
 }
 function mugi(order){
  fuga.getFunc(order)()
  .done( function(){
    if (++order < fuga.max){ mugi(order); }
    else{ return; }
  });
 }
 mugi(0);
}

284 :Name_Not_Found:2016/07/29(金) 19:05:35.14 ID:???
>>283
どこでajaxが走ってるのかわからん
何となく、Promise.allかDefered.whenが求める機能な気はするが

285 :283:2016/07/29(金) 19:12:17.43 ID:???
hoge が ajax の処理をして return ajax するのが前提で書きました…

286 :Name_Not_Found:2016/07/29(金) 19:17:58.58 ID:???
そんなに攻撃したいの?w

287 :Name_Not_Found:2016/07/29(金) 19:20:03.77 ID:???
>>285
で、Promise.allやDefered.whenの何が不満なのだ?

288 :283:2016/07/29(金) 19:30:32.95 ID:???
>>287
>>275 >>277 >>279 >>281 >>282 に対応できる
Promise.allやDefered.whenの書き方がわかりませんでした…。
教えてください。

289 :275:2016/07/29(金) 19:38:07.26 ID:???
>>287
おれにも教えてください
何でもしますから

290 :Name_Not_Found:2016/07/29(金) 19:43:22.30 ID:???
asyncにfalseを設定しても固まらない同期通信
なんてのがあればなにも考えずに済むんだよな

291 :Name_Not_Found:2016/07/29(金) 21:18:03.79 ID:???
>>290
それは非推奨か廃止になるはず。

292 :Name_Not_Found:2016/07/29(金) 21:26:22.41 ID:???
>>279
まずね、そのhoge1()、hoge2()、hoge3()をPromiseを返す関数と定義する。

具体的にはこんな感じ。
function hoge1() {
 return $.ajax(・・・);
}

正確にはjQueryのDeferredオブジェクトを返しているけどPromise
オブジェクトと互換性があって混ぜて使えるので、Promiseと同一視してほぼ問題ない。

そしておそらくすべての処理が終わったときに実行する処理もあるだろう?

hoges().then(function() { すべての処理が終わったときに実行する処理 })
とする。hoges()の中でhoge1〜hoge3を実行。

あとは、hoges()の中でどういった処理をするかという話になる。

まず逐次処理

return hoge1()
 .then(function() {
  return hoge2();
 })
 .then(function() {
  return hoge3();
 });

293 :Name_Not_Found:2016/07/29(金) 21:29:08.25 ID:???
最初にhoge1を実行して、その結果で処理を変える

return hoge1()
 .then(function(ret) {
  return ret ? hoge2() : hoge3();
 });


hoge1の結果がtrueのときだけhoge2を実行する

return hoge1()
 .then(function(ret) {
  if (ret) {
   return hoge2().then(function() {
    return hoge3();
   }
  }
  return hoge3();
 });

294 :Name_Not_Found:2016/07/29(金) 21:32:00.27 ID:???
hoge1の結果がtrueのときだけhoge2を10回実行する。

return hoge1()
 .then(function(ret) {
  if (ret) {
   var p = Promise.resolve();
   for (var i = 0; i < 10; i++) {
    p = p.then(function() { return hoge2() };
   }
   return p.then(function() {
    return hoge3();
   }
  }
  return hoge3();
 });

ちなみにループではなく、reduceを使って
関数型っぽく書く書き方もあるw

295 :Name_Not_Found:2016/07/29(金) 21:34:20.49 ID:???
それからPromiseを使うときは、アロー関数を使うと見やすくなる。
ブラウザが限られるがBabelを使って変換できる。

return hoge1()
 .then(() => hoge2())
 .then(() => hoge3());

296 :Name_Not_Found:2016/07/29(金) 21:38:40.11 ID:???
>>293の下のやつは少し書き換えるとこう書くこともできる。

return hoge1()
 .then(function(ret) {
  var p = Promise.resolve(); // thenを使えるようにするためのダミー
  if (ret) {
   p = p.then(function() {
    return hoge2()
   }
  }
  return p.then(function() {
   return hoge3();
  }
 });

アロー関数使用版

return hoge1()
 .then(ret => {
  var p = Promise.resolve();
  if (ret) p = p.then(() =>hoge2());
  return p.then(() => hoge3());
 });

297 :Name_Not_Found:2016/07/29(金) 21:52:43.73 ID:???
>>293

 .then(function(ret) {

この ret はhoge1()の戻り値なの? promiseオブジェクトじゃなかった?

298 :Name_Not_Found:2016/07/29(金) 21:58:36.93 ID:???
>>297
> この ret はhoge1()の戻り値なの? promiseオブジェクトじゃなかった?

違う。Promiseの実行結果。

hoge1()の中身を書くとこうなる。

function hoge1() {
 retrun new Promise(resolve, reject) {
  resolve(123);
 }
}

hoge1()が返すものはPromiseオブジェクトであるが、
then(function(ret) の retはPromiseが解決(resolve)したときの値である123になる。

299 :Name_Not_Found:2016/07/29(金) 22:05:20.17 ID:???
そうそう。hoge1〜hoge3はPromiseオブジェクトを返すと言ったけど
実は(最初を除いて)単なる値を返しても良い。

return hoge1()
 .then(ret1 => hoge2(ret1))
 .then(ret2 => hoge3(ret2));

例えばPromiseオブジェクトを返すhoge2()関数の中で
resolve(123)としたときret2は123になるが、

hoge2()関数が123という値を返してもret2は123となる。
これによってPromiseを使ったチェーンの中に従来の関数を混ぜることも出来る。

これは、実際のhoge2()は内部でAjaxで非同期で通信するんだけど、
デバッグとして配列をそのまま返しちゃえ。なんてことができるということを意味する。

300 :Name_Not_Found:2016/07/29(金) 22:15:52.38 ID:???
>>298
ほぇーなるほど
この仕組み考えるの大変だっただろうな

301 :275:2016/07/29(金) 23:31:05.56 ID:???
なんとなく動きは追えてきたかも

$.ajax()の戻り値はだいたいpromiseみたいなもので
このpromiseが resolved() になってると done()が実行されて
rejected() になってると fail()が実行されるのか

ほんとうはこの辺自分でやんなきゃだけど、 $.ajax()は
勝手にやってくれてるイメージでいいのかな

302 :Name_Not_Found:2016/07/29(金) 23:50:40.98 ID:???
>>301
$.ajaxの戻り値はDeferredオブジェクトで
これはJavaScriptで標準化されたPromiseが登場するよりも
前にjQueryに実装されたもの。

互換性を持たせるためにPromiseのthenとcatchも使えるようになっている。

303 :Name_Not_Found:2016/07/29(金) 23:59:23.21 ID:???
$.ajax(obj).done(success).fail(shippai);

ajaxが成功したら .done() に行くけど、
.done() の中でエラー検知したときに .fail()に向かわせることはできる?

304 :303:2016/07/30(土) 00:16:50.20 ID:???
そういうときは done じゃなくて then でやるのか
done()やfail()の 中で呼んでる関数の戻り値は無視されるのね

305 :Name_Not_Found:2016/07/30(土) 09:55:18.76 ID:???
$.ajax().then(success, shipper);

306 :Name_Not_Found:2016/07/30(土) 17:07:48.08 ID:???
promiseを何個か順番に実行する場合に
それぞれの関数の引数に特定の値を
与えたいんですがどうすればいいの?

307 :Name_Not_Found:2016/07/30(土) 18:33:55.83 ID:???
>>306
hoge?() の戻り値を $.ajax() にしているときは

hoge1( obj )
.done( function(){ hoge2( obj ); } )
.done( function(){ hoge3( obj ); } );

みたいに定義して渡していくしかなさそう?

308 :Name_Not_Found:2016/07/30(土) 18:50:28.55 ID:???
>>307
hoge1にはobj1
hoge2にはobj2
hoge3にはobj3
を与えたいんです。

309 :Name_Not_Found:2016/07/30(土) 19:05:24.70 ID:???
>>308
hoge1( obj1 )
.done( function(){ hoge2( obj2 ); } )
.done( function(){ hoge3( obj3 ); } );
ってやるしかなさそう?

おれもこれ知りたい
failにも変数渡したいけどどうしたらいいのか
$.ajaxの引数のオブジェクトにこっそり入れても駄目だったんだよな

310 :Name_Not_Found:2016/07/30(土) 19:14:51.08 ID:???
意味が全くわからんねw

何したいか知らんけど、
これでヒントになるだろ?

var a = 1;
hoge1( obj )
.then( function(){
 a++;
 return hoge2(obj);
})
.then(function(){
 a++;
 return hoge3( obj );
});

311 :Name_Not_Found:2016/07/30(土) 19:18:51.08 ID:???
ajaxのdoneの中で改めてPromiseを作ってresolveかrejectして、そのPromiseをreturn

312 :Name_Not_Found:2016/07/30(土) 20:04:44.21 ID:???
>>310
例えばpromiseが三つ有って
p1、p2、p3
としてそれぞれの引数に
obj1、obj2、obj3
を与えて実行したい。
p1、p2、p3の順に実行したいのでpromise.allは使えない?と思うんですが、
こういう場合です。

313 :Name_Not_Found:2016/07/30(土) 22:09:54.49 ID:???
>>312
promiseが三つ有って、
p1 = hoge(obj1)
p2 = hoge(obj2)
p3 = hoge(obj3)
ってやればいいだけだろ?

314 :Name_Not_Found:2016/07/30(土) 22:14:38.45 ID:???
>>313
あれ?
それってp1に何十秒かかってもp1が終わってからp2が実行されるんでしたか?

315 :Name_Not_Found:2016/07/30(土) 22:16:35.65 ID:???
>>314
p1が終わってからp2を実行したいなら、
p1のthenの中に書けばいいじゃん。
そのための非同期なんだから。
何を言ってるのか全くわからん。

316 :Name_Not_Found:2016/07/30(土) 22:22:45.04 ID:???
>>315
入れ子にすれば出来るのは分かってるんですが、実際はp1〜p9くらいまであるので入れ子にはしたくない

317 :Name_Not_Found:2016/07/30(土) 22:26:51.35 ID:???
>>316
だからthenで繋いでいくんだろ。

hoge1(obj1)
 .then(function(ret1) {
  return hoge2(obj2);
 })
 .then(function(ret2) {
  return hoge3(obj3);
 })
 .then(function(ret3) {
  return hoge4(obj4);
 })
 .then(function(ret4) {
  return hoge5(obj5);
 })

318 :Name_Not_Found:2016/07/30(土) 23:49:38.24 ID:???
>>317
サンキュウ、
上手く行ったよ。君優秀だな。
助かったよ!

319 :Name_Not_Found:2016/07/31(日) 01:39:35.34 ID:???
JSONの仕様って拡張されないの?
最後にカンマつけさせろよ!

320 :Name_Not_Found:2016/07/31(日) 02:34:02.27 ID:???
美しくない。俺の美意識が許さない。

321 :Name_Not_Found:2016/07/31(日) 05:48:47.13 ID:???
一つ質問なんだけど
>  return hoge2(obj2);
を実行しなくても次のthenに行くんだが
それは何でよ?

322 :Name_Not_Found:2016/07/31(日) 13:00:53.35 ID:???
<div>
文字
<button>ボタン</button>
</div>
の場合JQueryのchildren()では '文字' は取れないのでしょうか?

323 :Name_Not_Found:2016/07/31(日) 13:02:59.01 ID:???
>>322
文字を取るならばtext()だよ。

324 :Name_Not_Found:2016/07/31(日) 13:16:40.33 ID:???
>>323
このdivの中身を全部他のdivに移動したいんですが、どういう方法がお勧めですか?

325 :Name_Not_Found:2016/07/31(日) 13:24:15.33 ID:???
>>324
$('#div2').append($('#div1').contents());
または
$('#div1').contents().appendTo('#div2');

326 :Name_Not_Found:2016/07/31(日) 13:59:05.45 ID:???
>>325
.html()は?

327 :Name_Not_Found:2016/07/31(日) 14:39:48.92 ID:???
>>326
HTMLの文字列にするのが無駄だし
イベントハンドラなどのHTMLで表現できない情報が
抜け落ちるので、要素の移動のときにそんなもの使わない。

328 :Name_Not_Found:2016/07/31(日) 14:48:54.79 ID:???
$.ajax でエラーが返ってきた時、
エラーだけど本文があるとき がたまにあるんだけど
エラーの時の本文ってどうやって取得すればいいですかね

329 :Name_Not_Found:2016/07/31(日) 14:53:30.51 ID:???
errorハンドラ、もしくはfailなどでjqXHR(≒XMLHttpRequest)を
取得できるんだから、そこから取得すればいい

330 :Name_Not_Found:2016/08/01(月) 00:56:52.55 ID:???
var objSet = {
'price': "100",
'name': '文字1',
'color': 'aka'
};

$('#hoge').attr('obj', objSet);

で値を設定した場合、#hogeからpriceやnameなどの値を
取得するにはどうしたらいいでしょうか?

331 :Name_Not_Found:2016/08/01(月) 01:02:36.88 ID:???
>>330
使い方が間違っている。
attrはHTML要素の属性を変えるもの
<div id="hoge" obj="ここ"> にオブジェクトなんか入れられないだろう?

そういうときにはdataを使うんだよ。

$('#hoge').data('obj', objSet);
console.log($('#hoge').data('obj'));

参考までに、こうやる方法もある。
$('#hoge').data(objSet);
console.log($('#hoge').data('price'));

332 :Name_Not_Found:2016/08/01(月) 14:10:05.99 ID:???
http://js.studio-kingdom.com/jquery/data/data

333 :Name_Not_Found:2016/08/01(月) 15:08:53.71 ID:???
$('<p>1</p>').insertAfter('table');
$('<p>2</p>').insertAfter('table');
$('<p>3</p>').insertAfter('table');

table タグの直後に、p タグを、1,2,3の順に挿入したら、
3,2,1の順になったのだが、1,2,3の順番にするには、どうすればいい?

新たに、<div>でも作って、そこに入れればいいのかな?

334 :Name_Not_Found:2016/08/01(月) 15:43:55.49 ID:???
$('<p>1</p><p>2</p><p>3</p>').insertAfter('table');
DOMの操作は出来るだけまとめて少なくする方がいいよ

335 :333:2016/08/01(月) 16:37:18.40 ID:???
何を挿入するか、事前には決められない場合の話です。
条件判定などをして、動的に決まる場合

insertAfter で追加していくと、逆順になってしまうので、
皆さん、どうしているのかなと思って

336 :Name_Not_Found:2016/08/01(月) 17:23:10.44 ID:???
append

337 :Name_Not_Found:2016/08/01(月) 18:01:23.38 ID:???
>>335
tableの次に固定の要素あればそれにinsertBefore
或いは、$('<p class="hoge">1</p>').insertAfter($('p. hoge').last());

338 :Name_Not_Found:2016/08/01(月) 18:13:20.46 ID:???
$('<p class="hoge">x</p>')
.insertAfter($('p. hoge').length ? $('p. hoge').last() : $('table'));

339 :Name_Not_Found:2016/08/01(月) 19:30:01.67 ID:???
>>331
F12で見るとその要素に「object」と表示されて
入ってるようには見えますが違うのでしょうか?

dataだとキャッシュ使われて古い値が取得されてしまいます。
値は動的に変わるので機能しないのです。
以前それ知らなくて、data使ってて取得できずattrならできるので
聞いたらattrで正しいとの回答でした(確かここだったような)。

$.each辺りでできそうな気がするのですが(根拠なし)やはりダメですかね。

340 :Name_Not_Found:2016/08/01(月) 20:43:54.96 ID:???
>>339
> F12で見るとその要素に「object」と表示されて
> 入ってるようには見えますが違うのでしょうか?
違います

> dataだとキャッシュ使われて古い値が取得されてしまいます。
そんなことはありません。

> 値は動的に変わるので機能しないのです。
意味がわかりませんが、正しく書けば機能します。

> 以前それ知らなくて、data使ってて取得できずattrならできるので
> 聞いたらattrで正しいとの回答でした(確かここだったような)。
それは違う話です。

> $.each辺りでできそうな気がするのですが(根拠なし)やはりダメですかね。
関係ありません。


えとな、まずコード書け、
そして問題があることをコードで示せ

341 :Name_Not_Found:2016/08/01(月) 20:52:10.02 ID:???
>そんなことはありません。

そんなことはあるよw

342 :Name_Not_Found:2016/08/01(月) 20:54:55.63 ID:???
>>341
えとな、コード書けって言ったよね?

343 :Name_Not_Found:2016/08/01(月) 20:57:31.90 ID:???
data()で動きました。

344 :Name_Not_Found:2016/08/01(月) 21:09:19.37 ID:???
「attrでオブジェクトを入れられる」とは
「attrで、オブジェクト形式で複数の値をまとめて入れられる」とのことなのですね。
失礼しました。

>>340
dataのキャッシュについては検証済みなのでもういいです。
>>331のような基本的な記述でも途中に動的要素がからむとすでに書いた通りです。
ajaxみたいにキャッシュ無効にできるのなら別ですが。

345 :Name_Not_Found:2016/08/01(月) 21:14:22.00 ID:???
$.each(objSet, function(key, value) {
console.log(key + ':' + value);
});

惜しい、もうちょっとなのに。

346 :Name_Not_Found:2016/08/01(月) 21:16:28.39 ID:???
ですから>>331のコードで
data()で動きましたって。

347 :Name_Not_Found:2016/08/01(月) 21:19:13.87 ID:???
動的要素ってなんでしょうね?w
data()で動きましたって言ってるのに
これ以上何の話がしたいのでしょうか?

348 :Name_Not_Found:2016/08/01(月) 21:42:15.08 ID:???
http://qiita.com/Kta-M/items/2eda39750abd10df9801
http://qiita.com/toshiharu-irie/items/e7f803085000c4008f51
https://w3g.jp/blog/jquery-data-attr-cache

ブラウザの問題とか、ライブラリがからむと
そう簡単にはいかなくなる場合もある。

349 :Name_Not_Found:2016/08/01(月) 21:46:18.87 ID:???
http://xirasaya.com/?m=detail&hid=428

varとかも。コードが複雑になってくると面倒なことは確か。
動きましたとか言ってるのはちょこっと書いてるだけだろ。

350 :Name_Not_Found:2016/08/01(月) 22:01:42.17 ID:???
まあ動かないコードがないから
動くってことでいいんじゃね?w
>>331のコードは動いてるしね。

351 :Name_Not_Found:2016/08/01(月) 22:03:47.34 ID:???
>>348-349はちょっとなぁw
そもそもdataで代入する時の話じゃないし、
attrでdata-*触るのはご法度だし、
無理やり問題を見つけてくればあるけど、
今回には全く関係ない話だ

352 :Name_Not_Found:2016/08/01(月) 22:06:39.92 ID:???
>>340
「正しく書けば」とは?



「dataメソッドは〜jQuery内のキャッシュ(jQuery.cache)に保存したり、保存した値を取得したりするメソッドです。」

by 改訂新版 jQuery本格入門

353 :Name_Not_Found:2016/08/01(月) 22:08:08.57 ID:???
>>352
いや、だからなんだとw

「dataメソッドは〜jQuery内のキャッシュ(jQuery.cache)に保存したり、保存した値を取得したりするメソッドです。」
↑もちろんここに書いてあるとおり、正しく動きます。

354 :Name_Not_Found:2016/08/01(月) 22:10:53.40 ID:???
もう答え出てるでしょw
動かないコード例がないんだから
動くってことだよ。

355 :Name_Not_Found:2016/08/01(月) 22:14:22.39 ID:???
>>351
無理やりですかね?記事通りそのままでそうは思えませんが。
そもそもdataでだめだったから強引にattrでやってみて
というのが発端で、それが元の質問に至ったのです。
裏技的な(?)何かないかなと。

今回はあきらめます。みなさんありがとうございました。

356 :Name_Not_Found:2016/08/01(月) 22:14:52.09 ID:???
>>354
その論理はおかしいw

357 :Name_Not_Found:2016/08/01(月) 22:17:28.24 ID:???
>>355
> そもそもdataでだめだったから強引にattrでやってみて

それが間違いだからね。それはやったらだめな行為。
原則として data-* には attrでアクセスしてはいけない。

自分でだめなやり方をやって、動きがおかしくなって、
jQueryがバグってるんだーっていうのは素人の行為

>>356
動かない例を出せばいいだけだよ。
そうすれば、動かない理由が、コード書いたやつの
バグだって明らかになるからさw

358 :Name_Not_Found:2016/08/01(月) 22:18:01.00 ID:???
>>355

おかしいね。
なんで>>331で動くって言ってるのに、
諦めるっていうの?動いているよね。どう見ても。

359 :Name_Not_Found:2016/08/01(月) 22:20:15.30 ID:???
たしかに>>331は動いているよ。
だけど気に入らないんだよね。
動くことが気に入らない

360 :Name_Not_Found:2016/08/01(月) 22:22:19.75 ID:???
>>357
>原則として data-* には attrでアクセスしてはいけない。

してません。data-* にはdata()でアクセスしてました。
例は面倒です。

361 :Name_Not_Found:2016/08/01(月) 22:24:29.77 ID:???
例は>>331にありますよw
動いています。

362 :Name_Not_Found:2016/08/01(月) 22:24:45.77 ID:???
記事無視ワロタ
IE11以上ってちとな

363 :Name_Not_Found:2016/08/01(月) 22:25:14.31 ID:???
>>331が動いていたら
困る理由でもあるのかね?

364 :Name_Not_Found:2016/08/01(月) 22:26:06.73 ID:???
IE11以上ってなんだ???

jQueryは1系使えばIE6以上で
同じ動きをしたはずだが。

365 :Name_Not_Found:2016/08/01(月) 22:26:21.79 ID:???
2行書きました!
動きました!




平和でいいね

366 :Name_Not_Found:2016/08/01(月) 22:27:24.99 ID:???
やっぱり使い方が間違っているだけのようだね。
現に>>331で動いているしね。

367 :Name_Not_Found:2016/08/01(月) 22:27:50.11 ID:???
>>364
なんで1系限定なのさ

368 :Name_Not_Found:2016/08/01(月) 22:28:58.43 ID:???
記事無視ワロタ
>>331必死杉

369 :Name_Not_Found:2016/08/01(月) 22:29:10.84 ID:???
>>367
IE6に対応しているのが1系だからだよ?
もちろん2系も3系も同じ動きをする。
対応ブラウザが違うだけ。

370 :Name_Not_Found:2016/08/01(月) 22:29:43.94 ID:???
>>368
記事の内容は今回関係ないでしょw

>>331が動くかどうかの話なんだから。
そしてもちろん動いている。

371 :Name_Not_Found:2016/08/01(月) 22:37:26.65 ID:???
>>370
記事のことそのまんまなんだが
2行だけで動的要素もなけりゃそりゃ動くだろ
だから何としか

372 :Name_Not_Found:2016/08/01(月) 22:39:55.04 ID:???
はい。だから動くんですよ。

373 :Name_Not_Found:2016/08/02(火) 10:53:53.89 ID:???
グローバル変数の代わりに、そのページ内に
適当なFORMオブジェクトをこっそり作って
それにいろいろ情報を持たせているんだけど
これってあまり褒められた手法ではないよね?
それともみんなやってる?

374 :Name_Not_Found:2016/08/02(火) 19:15:35.01 ID:???
話逸らすは、スルーするは
なんか途中から変だと感じてはいたがいつもの人か

jQueryに不利なカキコは許さないからね!

の人

375 :Name_Not_Found:2016/08/02(火) 21:05:20.90 ID:???
>>373
やってない。

>>374
そっち方面に話持っていかなくていいから

376 :Name_Not_Found:2016/08/03(水) 07:16:00.09 ID:???
皆、Formのhidden に、色々なものを入れたりして、使っているだろ

377 :Name_Not_Found:2016/08/03(水) 20:49:29.42 ID:???
formのhiddenに入れるのは、フォームのサブミットで
使う必要が有るときだけだな。
JavaScriptから読み書きはしない。

378 :Name_Not_Found:2016/08/04(木) 12:13:42.14 ID:???
数秒おきに同じファイルを取得するような場面で
If-Modified-Since を有効活用したいんだけど

ajaxで取得した Last-Modified: を取っておいて
次回リクエスト時に If-Modified-Since: をセットして
というのを手動でやればよさそうなんだけど

なんかこの辺を自動でやってくれるオプションとかある?

379 :Name_Not_Found:2016/08/04(木) 22:45:09.90 ID:???
>>376
例えば何を?

380 :Name_Not_Found:2016/08/05(金) 10:48:54.65 ID:???
>>379
処理中のフラグとか

381 :Name_Not_Found:2016/08/05(金) 15:29:23.30 ID:VZIOEnT6
$.ajax というか defferedの always で呼ばれる関数
に渡される引数 ってなに?

382 :Name_Not_Found:2016/08/05(金) 21:05:03.69 ID:???
https://api.jquery.com/jquery.ajax/

383 :Name_Not_Found:2016/08/05(金) 22:08:02.28 ID:???
>>380
わざわざ入れるメリットは?
気持ち悪くないか?

384 :Name_Not_Found:2016/08/06(土) 00:04:13.90 ID:???
>>382
わからないならROMってろやカスが

385 :Name_Not_Found:2016/08/06(土) 00:44:52.14 ID:???
分かる人が答えないんだから、
やっぱり他の人は、そんなものはないと
判断せざるを得ないなw

386 :Name_Not_Found:2016/08/06(土) 23:28:25.56 ID:???
ここ回答者より質問者のほうがわかってるな

387 :Name_Not_Found:2016/08/07(日) 12:36:07.09 ID:???
所詮、荒らしのたてたスレ
自分の知らないテクニックには御法度で追い出す程度のレベル

388 :Name_Not_Found:2016/08/07(日) 13:10:16.03 ID:???
わかったわかった。
そういう方向にしようとしなくていいからw

389 :Name_Not_Found:2016/08/08(月) 09:25:40.79 ID:???
>>383
グローバル変数よりはマシよ

390 :Name_Not_Found:2016/08/09(火) 07:14:24.38 ID:???
var array = test.split('@');
var hoge = array[0];
var fuge = array[1];
とやってるのですがこれをもっとすっきりする方法はありませんか?

var hoge+fuge = test.split('@');
みたいに書く方法があれば嬉しいのですが

391 :Name_Not_Found:2016/08/09(火) 09:38:04.86 ID:???
>>390
var [hoge,fuge] = test.split('@');

ただし、対応していないブラウザ(IEとか)も一部あるので注意。
すべてのブラウザを考えるなら愚直に3行で書くしかない。

392 :Name_Not_Found:2016/08/09(火) 23:32:11.14 ID:???
>>387
なるほど、それで話に関係ない聞かれてもいないver1/2の違いなんて説明しちゃうわけだな

393 :Name_Not_Found:2016/08/18(木) 22:48:13.60 ID:???
JQueryを勉強し始めて間もないのですが、
表の列ごとの集計値を求めるプラグインを
作成しようとしております。
この表にはヘッダーのフィルタープラグインを
入れており、フィルターするごとに対象となった
行のみを集計対象としたいと思っています。(最大10行)
以下のようなコードを書いたのですが、
常に変数aaaにはフィルター前の集計値が表示され、
フィルタの抽出結果に対応できません。
どこを直せば、抽出結果のみの集計となるのでしょうか。

<script type="text/javascript">
var val = 0;
$(function() {
$("#shukei tr:gt(0):lt(10)").each(function() {
val に各行の列の値を加算する処理
});
$("#aaa").html(val)
});
</script>

394 :Name_Not_Found:2016/08/19(金) 00:12:31.75 ID:???
>>393
$("#shukei tr").slice(0, 11).each(function() {

395 :Name_Not_Found:2016/08/19(金) 00:29:03.42 ID:???
> (最大10行)
.slice(0, 10)
だな

396 :Name_Not_Found:2016/08/19(金) 07:57:33.35 ID:???
ありがとうございます!
早速
<script type=

397 :Name_Not_Found:2016/08/19(金) 07:58:57.43 ID:???
すみません、きれていまいました
<script type="text/javascript">
var val = 0;
$(function() {
$("#shukei tr").slice(0,19).each(function() {
val に各行の列の値を加算する処理;
});
$("#aaa").html(val)
});
</script>

とやったのですが、テーブルヘッダーでフィルタをかけても
フィルタ結果が反映されず、最大値である10行の時の列集計が
表示されます。
「フィルタをかけたとき」というアクションの受け方が
誤っているのでしょうか。

398 :Name_Not_Found:2016/08/19(金) 08:40:08.62 ID:???
不可視でフィルターされているなら
表示されている行のみ対象
$("#shukei tr:visible").slice(0,19)

どのような状態でフィルターされているかで対処は変わる

399 :Name_Not_Found:2016/08/19(金) 14:05:27.47 ID:???
質問です。tableditの設置方法が分かりません。demoサイトからjsとcssを引っ張ってきましたが詳しくかいてあるサイトもなく表示できませんでした。

400 :Name_Not_Found:2016/08/19(金) 19:31:10.57 ID:???
例えば
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
が有る場合に
$('#btn1').on('click', function(){...});
$('#btn2').on('click', function(){...});
でclickイベントの処理が出来ますが、これをまとめて、
$('#btn1', '#btn2').on('click', function(){...}); // ?
みたいな書き方は出来ませんか?
要するに二つのボタンに同じ関数を割り当てたいのです。

401 :Name_Not_Found:2016/08/19(金) 19:40:30.27 ID:???
$('#btn1, #btn2').on()

402 :Name_Not_Found:2016/08/19(金) 19:43:19.41 ID:???
$('button[id^="btw"]').on()

403 :Name_Not_Found:2016/08/19(金) 19:44:38.75 ID:???
btw → btn

404 :Name_Not_Found:2016/08/19(金) 19:52:18.89 ID:???
ありがとうございました。
実際は、buttonにはidが付いていなくて、他のdivに
var $btn1 = $('<button>1</button>').appendTo($div);
var $btn2 = $('<button>2</button>').appendTo($div);
こんなふうに追加しています。
この場合に on('click' を一つにまとめるにはどう書けば良いでしょうか?

405 :Name_Not_Found:2016/08/19(金) 21:03:53.27 ID:???
classつければいいだけじゃないの?

406 :Name_Not_Found:2016/08/19(金) 22:18:47.05 ID:???
>>400
同じクラスを割り当てるべき。


以下は推奨しない

CSSの書き方を勉強しろ。複数の要素にスタイルを適用する場合の書き方だ。
$('#btn1, #btn2').on('click', function(){...});

変数に入っているならこれでできるが、
$btn1.add($btn2).on('click', function(){...});
$([$btn1[0], $btn2[0]]).on('click', function(){...});

作成した "1つの" 要素を変数に入れるならばjQueryオブジェクトではなく
DOM要素を入れたほうが使い勝手がよい。

var $div = $('div');
var btn1 = $('<button>1</button>')[0];
var btn2 = $('<button>2</button>')[0];
$div.append([btn1, btn2]);
$([btn1, btn2]).on('click', function(){...});

それから、$divの中にあるbutton全部であれば以下のように書くこともできる

var $div = $('div');
var $btn1 = $('<button>1</button>').appendTo($div);
var $btn2 = $('<button>2</button>').appendTo($div);
$div.find('button').on('click', function(){...});

407 :Name_Not_Found:2016/08/19(金) 23:07:17.00 ID:???
>>397です
>>398
できました!ありがとうございました!
フィルターのかけ方も考慮に入れないといけなかったのですね。勉強になりました。
現在'#category-filter_task_id'というIDのテキストボックスの中身が変更となった場合の
アクションを受け取り、集計を行っているのですが、実はアクションの
トリガーとなるテキストボックスが他に複数あり、できれば
「それぞれのテキストボックスの値が変更されたら」(change)ではなく、
「フィルターがかかり表の内容が変更となったら」を集計のトリガーと
したいのですが、そのような記述の方法はあるのでしょうか。

  <script type="text/javascript">
  $('#category-filter_task_id').change(function(e) {
  $("#myTable tr:visible").slice(0).each(function() {
     集計処理
  });
  </script>

408 :Name_Not_Found:2016/08/19(金) 23:25:07.91 ID:???
同じscript内で記述しているのなら
1. $('#category-filter_task_id').change(func);
2. $("#myTable tr:visible").slice(0).each(func);
1の処理が完了してから2の処理になるよ

よく解らないけど、フィルターの処理が非同期?などで完了のタイミンが掴めないなら
setTimeout(function(){
$("#myTable tr:visible").slice(0).each(func);
}, 300);
300(ミリ秒)を適当な数値にして予測して処理するってこともできるよ

409 :Name_Not_Found:2016/08/20(土) 20:59:25.32 ID:???
>>408
ありがとうございます!
試してみます!

410 :Name_Not_Found:2016/08/21(日) 20:08:39.62 ID:???
>>330ですが、JSON.stringifyでできました。
ちと変に手間だけど行数も速度も変わらないしよしとします。
data-よりマシですので。

411 :Name_Not_Found:2016/08/21(日) 20:29:26.99 ID:???
>>410
うざい

412 :Name_Not_Found:2016/08/21(日) 22:25:26.63 ID:???
jqueryの表操作について教えてください。
例えば10行4列の票があるとして、3行目〜6行目の2列が同じであった場合、
セルを結合させたいと思っているのですが、Jqueryで可能なのでしょうか。
htmlではrowspanにてあらかじめ結合する数がわかっていないと結合できなかったと思います。
「4行目の2列を参照する際に前行の2列を比較し、内容が同一であれば結合する」と
いったように、後付けでのセル結合操作は可能なのでしょうか。

413 :Name_Not_Found:2016/08/21(日) 22:30:34.30 ID:???
できるけどセル統合ならスプレットシートでやったら?w

414 :Name_Not_Found:2016/08/22(月) 02:13:20.56 ID:???
jqueryのファイル(jquery.js)の読み込み
が完了してから関数を実行したいんだけど
どうしたらいいかな

415 :Name_Not_Found:2016/08/22(月) 03:34:24.63 ID:???
>>414
<script src="jquery.js"></script>
<script>
function foo() {
  alert( "You are running jQuery version: " + $.fn.jquery );
}
foo();
</script>

これが動くのが、jQueryのファイル読み込みが完了してから
関数が実行されていることの証拠

416 :Name_Not_Found:2016/08/22(月) 19:36:18.29 ID:???
>>411
お前がうざい
参考になる人もいるかもしれんだろ

417 :Name_Not_Found:2016/08/22(月) 19:50:13.32 ID:???
>>412
下と比較して同じならheightを2倍にし、下をvisibility:hidden
でできそうな気がしないでもない
結合でなく単に表示を消してるだけだがw

俺なら<table>タグ使わずに<div>をfloatで表のように組む

418 :Name_Not_Found:2016/08/22(月) 21:33:26.21 ID:???
>>417
CSS3時代の今において、
tableとdivの違いは、displayのデフォルトが違うだけだよ。

だからdivをfloatで表のように組んで作れるのであれば、
そのdivをtableに置き換えれば、tableタグのまま同じことができる。

419 :Name_Not_Found:2016/08/22(月) 21:44:38.57 ID:???
>>412
前スレ896を参考にしろ
jQuery版は作る奴がさじを投げたのでない
https://jsfiddle.net/eoxzjqwu/43/

420 :Name_Not_Found:2016/08/22(月) 21:51:26.92 ID:???
>>419
その先にjQuery版があったよ。
https://jsfiddle.net/eoxzjqwu/46/

421 :Name_Not_Found:2016/08/22(月) 21:57:59.83 ID:???
あ、ほんとですね。

422 :Name_Not_Found:2016/08/22(月) 23:11:19.87 ID:???
すみません、教えてください。
<input size="9" id="test1"/>
<input size="9" id="test2"/>
<input size="9" id="test3"/>
<input size="9" id="test4"/>

といった4つのテキストボックスがあったとして、
「テキストボックスの値が変更となったら」という
処理をすべてのテキストボックスに与えたい場合、
$('#test1').change.function(e) {
  処理
 }
$('#test2').change.function(e) {
  処理
 }
$('#test3').change.function(e) {
  処理
 }
$('#test4').change.function(e) {
  処理
 }
と繰り替えすしかないのでしょうか。

423 :Name_Not_Found:2016/08/22(月) 23:23:32.85 ID:???
>>420
それは縦横の複合連結に対応してないんじゃないか?

424 :Name_Not_Found:2016/08/22(月) 23:26:46.51 ID:???
>>423

それは>>412が仕様を決めないと
どうしようもない。

4 4 4
4 2 4
4 4 4

をどうするのが正解かなんてわからない。

425 :Name_Not_Found:2016/08/22(月) 23:29:49.10 ID:???
$('input[id^="test"]').chang(function(e) {...
or
$('#test1, #test2, #test3, #test4').chang(function(e) {...

426 :Name_Not_Found:2016/08/22(月) 23:31:50.48 ID:???
>>422
その繰り返しと等価の書き方は

$('#test1, #test2, #test3, #test4').change.function(e) {
  処理
}

だけどこの場合は、

<input size="9" id="test1" class="test />
<input size="9" id="test2" class="test />
<input size="9" id="test3" class="test />
<input size="9" id="test4" class="test />

$('.test').change.function(e) {
  処理
}

とするのが好ましい。

idは必要ない限り使わないほうが良いよ。

同一のクラスに対して同一の処理をいっぺんに適用させることができるの
がjQueryの大きな特徴なんだから。
これは特定のクラスを持つものは同一のスタイルを適用させるCSSと同じ考えで、
それを同一の処理にまで発展させたのがjQueryだと思えばいい。

427 :Name_Not_Found:2016/08/22(月) 23:32:04.81 ID:???
>>418
ところがレスポンシブとなると無理が出てくる、または面倒になる場合がある
っても>>412くらいなら問題ないだろうが
幅やらコンテンツ量が不明なので何とも言えず

428 :Name_Not_Found:2016/08/23(火) 01:07:11.55 ID:???
>>426
問題点はそこじゃない(その例でも>>420は縦⇒横連結の連続処理でレイアウトが崩れるだろうが)
>>420はcolspan属性またはrowspan属性が2以上のセルを結合できない
https://jsfiddle.net/eoxzjqwu/49/

429 :Name_Not_Found:2016/08/23(火) 01:47:28.96 ID:???
https://jsfiddle.net/eoxzjqwu/46/
は動いているみたいだけど?

430 :Name_Not_Found:2016/08/23(火) 01:50:21.19 ID:???
>>428
すいません。縦の結合しかしないので
横は考えなくていいです。

431 :Name_Not_Found:2016/08/23(火) 04:17:32.97 ID:???
>>430
結合された要素も縦に結合出来ない

432 :Name_Not_Found:2016/08/23(火) 04:24:38.88 ID:???
>>429
それは問題が発生しないHTMLなだけ
問題点を理解してくれ

433 :Name_Not_Found:2016/08/23(火) 09:13:40.89 ID:???
質問者が問題ないって言ってるのに、
なんなんだこいつ?

434 :Name_Not_Found:2016/08/23(火) 11:43:32.71 ID:???
レイアウトが崩れる条件を正しく理解してない人に説明する事は無駄ではないかと
条件によって崩れるのは致命的なので https://jsfiddle.net/eoxzjqwu/46/ が汎用性で大きく劣るのは事実だろうね

435 :Name_Not_Found:2016/08/23(火) 12:04:02.97 ID:???
ああ、なるほど
初めから<td colspan="2">や<td rowspan="2">が存在している場合にjQuery版は正しく処理できないのか

436 :Name_Not_Found:2016/08/23(火) 12:30:30.84 ID:???
値を配列に格納しておいて、行/列のindexで比較、フラグを切り替えてhtml化する
何も難しいことではないと思うけど
部分的に書き換えようとするからややこしくなるじゃないかな?

437 :Name_Not_Found:2016/08/23(火) 18:08:51.61 ID:???
>>436
それに加えてcolspan,rowspanの値も比較する必要があるかと
いずれにしてもサンプルコードは出ているのだから質問者が好きなように取り込めば解決するでしょう

438 :Name_Not_Found:2016/08/23(火) 20:41:32.44 ID:???
結局、左上から順番に走査しないとセル位置が計算出来ないんだよね

439 :Name_Not_Found:2016/08/23(火) 22:01:35.91 ID:???
まあ最初にcolspanがあるかどうかなんて最初の条件に明示されてないので、
質問者が仕様をいうまでは放置でいいんじゃない。

jQueryじゃない方も、rowspanが存在していてかつ同じ値が入っているとき
それをマージすることは出来てないし、仕様にはなかったけど、
面白そうなので中途半端に対応してみました。程度の意味でしか無い。

例えばこれを横につなげるときどうするの?ッて話。

1 1 3
↑ ↑  3
↑ 2 3

(↑は上のセルのrowspan)

440 :Name_Not_Found:2016/08/23(火) 22:02:58.52 ID:???
あとどちらもcolspanとrowspanの両方が
入っていたときも考慮されてないね。

441 :422:2016/08/23(火) 22:28:55.50 ID:???
>>425,426
ありがとうございます!
色々記述の仕方があるんですね、勉強になりました。

今回は>>426の方法を使ってみたところ、無事動作しました!
本当にありがとうございました。

442 :Name_Not_Found:2016/08/23(火) 23:08:45.98 ID:???
tablesortというヘッダー項目にてソートのできるプラグインを使用して
表をつくったのですが、プラグインを利用したソートを実行後に
自作のプラグインを実行することは可能でしょうか。
具体的には、

<table class="tablesorter" border="1" id="myTable" >
  〜省略〜
<script>
$(document).ready(function()
{
$("#myTable").tablesorter(); ←組み込みプラグイン
}
);
</script>

というコードになっていて、表上のヘッダーを押下→ソートは
プラグインにすべてお任せになっています。
この後、ある列について同一のレコードが続く場合は色を変更するという
以下の自作の関数を実行したいのですが、
$("#myTable").tablesorter();が実行された後に自動で実行されるような
処理は可能なのでしょうか。

<script type="text/javascript">
$(document).ready(function() {
$('#myTable').each(function() {
        〜同一レコード文字色変更〜

443 :Name_Not_Found:2016/08/23(火) 23:32:56.01 ID:???
>>442
プラグインの質問はこのスレの対象外。
そんなもの作ったところしかわからないからね。
知らないことをわざわざ代わりに調べるほど暇じゃない

それが良く出来たプラグインなら、
ソートを実行したあとに発生するイベントぐらいあるでしょう。

444 :Name_Not_Found:2016/08/23(火) 23:34:40.75 ID:???
$("#myTable").tablesorter().end()
.each(function(){});

445 :Name_Not_Found:2016/08/24(水) 18:55:45.88 ID:???
ドキュメントないでリンクを解除,つまりa要素を全部削除したいのですが、
どうしたらいいでしょうか?a要素の子ノード(テキストノードや要素ノードなど)は残します。

446 :Name_Not_Found:2016/08/24(水) 19:17:01.43 ID:???
$('a').each(function(){
$(this).replaceWith($(this).html());
});

447 :Name_Not_Found:2016/08/24(水) 19:25:57.36 ID:???
>>446
なるほど・・それは思いつきませんでした。
ありがとうございます。

448 :Name_Not_Found:2016/08/24(水) 21:51:48.80 ID:???
この書き方(引数に関数を渡す)便利なのに
ほんと普及しないよなw


$('a').replaceWith(function(i, e){
 return e;
});

ES6で書けば一行
$('a').replaceWith((i, e) => e)

449 :Name_Not_Found:2016/08/24(水) 22:14:35.27 ID:???
変数名はeじゃなくてhtmlの方が良かったな。

450 :Name_Not_Found:2016/08/25(木) 07:16:51.64 ID:???
>>443、444
回答ありがとうございます。
返事が遅くなりもうしわけありません。

すみません、書き方があいまいでした。
プラグインを使用してでも使用しなくてでもいいのですが、
テーブルがソートやフィルタ等により変更となった際に、
「テーブルの表示が切り替わったら」というステータスを検知する
ことは可能なのでしょうか。

>>444で教えていただいたやり方を試してみたのですが、思うようにできませんでした。
.endは一つ前の状態にもどすとのことなのですが、サンプルの趣旨を理解できませんでした。orz

451 :Name_Not_Found:2016/08/25(木) 09:40:36.22 ID:???
>>444はゴミ。考えるだけ無駄。
荒らしがわざと変な答えを書いたと思えばいいよ。

452 :Name_Not_Found:2016/08/25(木) 12:25:09.78 ID:???
>>450
プラグインに書き加えることが理想的(スレ違いなのでここでは質問しない)
そうでないなら表上のヘッダーにイベントを与えておいてsetTimeoutで
処理後、適当な時間で処理を開始するような感じでいいんじゃないの?

$('body').on('click', 'ヘッダーの要素', function() {
setTimeout(function() {
$('#myTable').each(function(){処理});
}, 500);
});

453 :Name_Not_Found:2016/08/25(木) 21:16:33.39 ID:???
>>450
並び替え機能はプラグインが提供しているのだから、
プラグインを使用しない方法はない。

もしくは>>452のような効率の悪い方法だけ

だからプラグインの使い方を自分で調べるしか無いよ。
もしくはそのマイナーなプラグインの使い方を知っている人や
調べてくれる人が登場するのを待つしかない。

454 :Name_Not_Found:2016/08/27(土) 15:07:59.10 ID:???
あるページを表示した時にredirectされる場合があるじゃない。
それを事前に知る方法はあるの?

455 :Name_Not_Found:2016/08/27(土) 17:09:27.83 ID:???
>>454
ブラウザを使わなければいい

456 :Name_Not_Found:2016/08/27(土) 17:31:26.98 ID:???
波田陽区を思い出した

457 :Name_Not_Found:2016/08/27(土) 19:00:41.68 ID:???
>>454
location header
meta element
window.location

458 :Name_Not_Found:2016/08/28(日) 22:58:24.00 ID:u6QMQtDg
x.htmlにjquery cycleスライドショーを載せています。
このクラス下にdiv要素で囲ったものを順に流していますが、、
<div class="jquery_cycle">
<div><img src="1.jpg../></div>
<div><img src="2.jpg../></div>
<div><table>...</div>
...
</div>
この個々、例えば2.jpgの<div>要素にnameやh3などを付加して
x.html#2等から直リンでジャンプさせる方法ないでしょうか?
htmlが読み込まれて時点で全てのスライドショー画像が読み込まれてるので
個々にアンカーを設けても直リンで飛べるかと思ったんですが、
nameやh3を書いてもどうしてもスライドの1枚目のままになります。。
どなたかご教授ください。

459 :Name_Not_Found:2016/08/28(日) 23:12:23.26 ID:???
>>458
jsを覚えないとかなりしんどい

こういうのは公式を見ればfunctionだのapiだのがあるので、そこを参考にする
そして多分cycle2じゃないとapiはない
http://malsup.com/jquery/cycle2/api/#commands

大体こんなコードで動く
$(function(){
if("URL内に#の有無"){
for(i=0;i<"#以降の数値";i++){
$('.cycle-slideshow').cycle('next');
}
}
})

460 :458:2016/08/28(日) 23:33:46.70 ID:u6QMQtDg
>>459
やはり私には難しそうです。。
素直にスライドの何番目を見てね、と伝えるしかないのか。。

461 :Name_Not_Found:2016/08/29(月) 09:15:14.91 ID:PeMMkN2g
質問です

var obj = {};;
obj.prototype.a = function(str) {
return '#'+str;
};
obj.prototype.b = function(data) {

var func = function (str) {
return this.a(str)+'#';  
};
return func(data);
};

と内部関数で親のメソッドを利用したい場合はどうすればいいんでしょうか?
この場合ですとthis.aでobj.aは取得できませんでした

462 :Name_Not_Found:2016/08/29(月) 10:00:22.71 ID:???
>>461
何が目的なのか解らないんだけど
こういう事かな?
var obj = {};
obj.a = function (str) {
return '#' + str;
};
obj.b = function (str) {
return str + '#';
}
obj.c = function (data) {
return this.b(data);
};

463 :Name_Not_Found:2016/08/29(月) 11:08:18.89 ID:???
>>462
例えですので内部関数で親関数を利用したいという感じです

464 :Name_Not_Found:2016/08/29(月) 12:22:25.90 ID:???
>>463
これじゃ駄目なの?
var obj = function (str) {
this.str = '#' + str;
};
obj.prototype.func = function() {
return this.str + '#';
};
var Obj = new obj('文字列');
alert(Obj.func());

465 :Name_Not_Found:2016/08/29(月) 12:29:49.63 ID:???
>>463
thisとprototypeの関係性を理解してないので勉強すべし
>>462のようにインスタンスを作らない形にするか、>>464のようにインスタンスを作るか、Object.createでインスタンスを作るか
親関数というオレオレ用語を使ってるのも直した方がいいよ

466 :Name_Not_Found:2016/08/30(火) 02:36:11.05 ID:???
1つ外側のスコープにアクセスしたいのなら、クロージャ・クラスとか、

外側のスコープで、that = this; のように、thisをthatに代入しておくとか?

467 :Name_Not_Found:2016/08/31(水) 09:58:37.04 ID:???
コーダーやってる者ですが、jsを近々覚えようと思いまして。
そこで質問なのですが、jsはどのぐらいの範囲を覚えればいいんでしょうか?
とりあえずjs入門書を買って基礎を学ぼうと思ってます。

カレンダーの作り方、電卓の作り方、フォーム自動計算入力とか作れれば十分ですか?

コーダーなので、なんたら.jsとかjsファイルの開発系までの能力は求めてないです。

468 :Name_Not_Found:2016/08/31(水) 13:55:12.95 ID:???
十分じゃないかな
後は覚えた基本の応用力と発想力だ
しいて言えば、アニメーションのさせ方やjson辺り少し知っておいた方が発想は膨らむ

469 :Name_Not_Found:2016/08/31(水) 13:57:51.52 ID:???
ごめ、jsonもだけどajax辺りの方がいいか
jqueryも使われる頻度高いのでどういうものか知っておくといいかな

470 :Name_Not_Found:2016/08/31(水) 16:39:12.23 ID:???
なるほど、ちなみにどう言ったテクニックを覚えておくと現場で役に立ちますか?

471 :Name_Not_Found:2016/08/31(水) 17:57:57.97 ID:???
コーダー作業でJavaScript(jqueryも)使う時の殆どがDOMやCSSの操作かな
大抵はCSSで問題ないのだけど
例えば、クリックしたらCSSクラスを追加したりパラメータ弄ったりとかだね
ラジオボタンをクリックしたら何かが開くとかタブ表示みたいなことしたいとか
ブラウザによって挙動が変わるからそこをカバーするとか
CSSだけじゃ辛いものがあるのをカバーする使い方が多い
あとサイトのトップによくあるスライダーとかをカスタマイズする際に知識が役立つ
ajax辺りはこんなことできるんだ程度で知っていればいいかな

472 :Name_Not_Found:2016/08/31(水) 19:03:06.31 ID:???
>>471
どうもありがとうございます。

473 :Name_Not_Found:2016/08/31(水) 19:31:11.75 ID:???
すごい、こんな実用的なjavascriptの使い方を始めて見た

comic loスレより転載

パス:sage
ttp://www1.axfc.net/u/3712796

474 :Name_Not_Found:2016/08/31(水) 20:15:38.23 ID:???
コーダーって正社員になれない派遣社員が正社員の設計通りに
チマチマと手を動かすだけのお仕事でしょ。
そんなのに応用力とか発想力とかいらない。
設計書に忠実にシンプルに納期を守ってコードを書けば良い。
余計な処理とかテクニックとかまったくイランから。

475 :Name_Not_Found:2016/08/31(水) 20:40:58.84 ID:???
正社員は給与低いからなりたくない

476 :Name_Not_Found:2016/08/31(水) 22:42:25.26 ID:???
>>473
ソースコードが冗長すぎだな
240行程あるが、50行程度で書けるだろう。

このコードを無駄が無いコードに修正しなさいと言う
初心者向けの課題として使えそうだw

477 :Name_Not_Found:2016/09/01(木) 01:22:36.11 ID:???
コーダーなら、Sass の本も読んだ方が良さそう

478 :473:2016/09/01(木) 06:37:09.22 ID:???
>>476
ソースコードが冗長よりも
作者とタイトルとかのデータの部分をjsonデータにして
テキストに別に書いて読み込んで使うべき

479 :Name_Not_Found:2016/09/01(木) 08:58:01.41 ID:???
>>478
そこは切り出せばいいだけだし、
ファイル1つにすればそうなるのは当然だから
どうでもいい。

480 :Name_Not_Found:2016/09/01(木) 13:36:01.59 ID:???
>>474
コーディングでそんな的確な指示書なんてあるか??
仕様書という名のワイヤー兼原稿とデザインが殆どだろ
そこに吹き出しでここはクリックするとメニューが開くとか書いてあるだけだろw

481 :Name_Not_Found:2016/09/01(木) 21:51:45.93 ID:???
php+jqueryでWEB版ツイッターのメッセージ機能のようなものを作成しようと考えています。
https://twitter.com/

ですが上メニューにあるメッセージを押すとモーダルが開き、そして画面遷移できるという仕組みについていまいち分かりません。
ソースを見たところiframeなどは使用していないみたいです。

私の考えられる手法では、
buttonからdisplay:noneなどの操作を呼び出して、あたかも遷移しているように見せている、
そしてメッセージ投稿などはajaxで、受信はpusherなどを利用している、というような仕組みです。


どなたかtwitterのメッセージモーダルがどのような仕組みになっているか教えてください;;

482 :Name_Not_Found:2016/09/02(金) 02:51:47.02 ID:???
特定のタグの位置を、-10,000 とかに出来ないの?

F12 開発者ツールを使うか、右クリックメニューから要素の検索でもすれば?

483 :Name_Not_Found:2016/09/02(金) 08:26:36.58 ID:???
>>482
自己完結するなら何も書かなくていいと思うよ

484 :Name_Not_Found:2016/09/02(金) 08:42:10.05 ID:???
仕組みというなら>>482の言う通り検証する以外ない

485 :Name_Not_Found:2016/09/02(金) 10:55:11.22 ID:???
jQueryの1.xx ってもうないの?

ちょっと古いブラウザ用には最新のjQuery+Migrateってやるのが今風なの?

486 :Name_Not_Found:2016/09/02(金) 12:10:13.27 ID:MS+VyVRI
jqueryでheight()を使うと要素の高さを知れるけど
要素にスクロールバーがついているとき
要素の長さを知る方法を教えて

487 :Name_Not_Found:2016/09/02(金) 12:33:39.90 ID:???
スクロールバーが付いていようが数値は同じだけどね

488 :Name_Not_Found:2016/09/02(金) 22:17:36.01 ID:???
>>485
http://jquery.com/download/ jQueryダウンロードページの
中ほどに書いてあるでしょ。

To see all available files and versions, visit https://code.jquery.com

ここに全部あるよ。

jQuery Migrate Pluginは3.0で変更した挙動を
昔の仕様に合わせるもので、一旦昔の仕様にしてから
少しずつ新しくしていくためのものだよ。
そのためのAPIが備わってる。
Migrate Pluginは最終的には消すために存在している。

489 :Name_Not_Found:2016/09/02(金) 23:02:49.59 ID:???
DBから取得した番号に「01月」「02月」〜「12月」までの
文言をくっつけ、3列表示で出力する表を作っております。
例えば、番号が20から始まる場合、
2001月、2002月、2003月
2004月、2005月、2006月
2007月、2008月、2009月
・・・・・・

といった感じです。
この後、番号が99まで続いていくわけですが、
JQUERYにて、月でフィルタをかけ、
例えば04月のデータだけ引っ張ってこれるような
プラグインを作成したいと思っています。

この場合、
2004月、2104月、2204月
2304月、2404月、2504月
2604月、2704月、2804月
・・・・・
となります。

参考にできるサイトはないかと思い調べてみたのですが、
列のフィルタばかりで参考になりそうなサイトは
ありませんでした。
そもそも実現可能なのでしょうか。

490 :Name_Not_Found:2016/09/02(金) 23:09:57.70 ID:???
> 例えば04月のデータだけ引っ張ってこれるような
> プラグインを作成したいと思っています。

間違い。
これはプラグインを作成するようなものじゃない。
単にjQueryを使ってコードを書くだけの話だ。

491 :Name_Not_Found:2016/09/02(金) 23:32:25.08 ID:???
>>489
番号をkeyにして、objectに格納
keyでhtmlを書き出せば良いんじゃないの?

492 :Name_Not_Found:2016/09/03(土) 04:44:57.92 ID:???
>>481-482
twitterなら、bootstrapだから、LESS, SASS で書いている

SASSなら、Compass, Bourbon など、様々なフレームワーク・APIがある。
モーダル画面の機能もあるはず

マルチポストはしないように。1つのスレにだけ書き込んで!

>>489-491
(function(){
var ary = ['2001', '2004', '2511', '2804'];

var ary2 = ary.filter( function(x){ return (/..04/.test(x)); });

console.log(ary2);
})();

任意の2文字の後に、04 が続くのは、正規表現で「..04」でマッチするので、
これで、2004, 2804 だけが取り出せる

493 :Name_Not_Found:2016/09/03(土) 09:11:50.21 ID:???
>>489
DB(?)から抽出してhtmlを生成するのか、
htmlから抽出するのかで違ってくる
そのDBがどんな形式なのかも提示しないとな

494 :Name_Not_Found:2016/09/03(土) 09:15:59.44 ID:???
>>490,491,492
ありがとうございます。
可能なんですね、なんとなくイメージができました!

プラグイン化はせずjqueryで実装してみます。

今回の表はもう少し詳しく書くと、<td>の中に、番号ごとの
各月の作業明細を記載した表(table)を組み込んでいます。
月を選択するボタンを設置して、選択された以外の月の
セルについては、<td>内の表も含め削除して表示しようと
考えております。

各<td>に対してIDかKEYを割り振り、あとは>>492で記載して
いただいたようなフィルタを実装するイメージで可能でしょうか。

495 :Name_Not_Found:2016/09/03(土) 12:13:01.32 ID:???
>>494
フィルタなんて適当に条件にマッチするかどうか?の
フィルタ関数作ればいいだけ。

あとはそのフィルタ関数をどこで使うかって話。

方針としては二通りある。

1. JavaScript側で全データを持って条件が変わるごとにテーブルを一から生成するか
(初期化時にHTMLからデータをかき集めてJavaScriptに持たせて以降はすべてこのデータを使う場合もこっち))
2. HTML側で全データを持って表示非表示の切り替えだけで対応するか

1の方針だとテーブルの中身を消してから作り直すことになるので、
例えばテーブルの中に<input>が有ったりしたらその中身は消えてしまうし、
それ以外の情報があったりしたら消えるか同期が取るのが難しくなる。

2だとそんなことはないが、仕様によっては表示非表示の切り替えだけでは
大変になる可能性がある。

なおフィルタ関数は1, 2のどちらでも同じものが使えるはず。


あと、そもそもテーブルを使うのが間違じゃないか?
テーブル使わなくてもdivでも使って、3列で折り返せばいいだろ?
JavaScriptを使うときにHTMLとCSSの知識は必須。
これを疎かにすると必要ないコードを書かなければならなくなる。

496 :Name_Not_Found:2016/09/03(土) 14:49:13.29 ID:???
何回も処理するのなら、最初から、JSの配列・辞書などに、データを持っておけばいい

497 :Name_Not_Found:2016/09/03(土) 15:02:45.43 ID:???
すべての月のデータから、選択された月のデータだけを抜き出すよりも、
月が選択されるたびに、表示するデータを、作った方がよいかも

JSの配列・辞書に、その月のデータを作る、素になるデータを持っておく

498 :495:2016/09/03(土) 15:14:17.13 ID:???
> JSの配列・辞書に、その月のデータを作る、素になるデータを持っておく

そしてそこからtableを生成する。
しかしそのデータに直接紐付かない情報は生成できない。
(例えば特定のセルに付けたclickイベントハンドラとかね)

ならばそれらの情報をすべてJSのの変数にもたせばいいではないか?
そこからtableを生成すればいい。だがそうするとパフォーマンスが悪くなるではないか?
そうだ変更したところだけ更新するようにしよう。

という考えで作られたのがReactなどのVirtual DOMと呼ばれるもの。

Reactなどのフレームワークを使ったら簡単にできるかもしれない。
だがそれを勉強するのにも導入するにもコストがかかるんだねw

499 :Name_Not_Found:2016/09/03(土) 22:13:30.20 ID:CIbOZ5K6
Encoding.jsを使ってSJISをUTF8に変換する方法を教えてください。
下記のコードではまだ文字化けします。
$(

500 :Name_Not_Found:2016/09/03(土) 22:15:56.41 ID:???
var sjisArray = e.target.result;
var uniArray = Encoding.convert(sjisArray, 'UTF8', 'SJIS');
var result = Encoding.codeToString(uniArray);

501 :Name_Not_Found:2016/09/03(土) 22:27:48.70 ID:???
>>499
そのコードでおかしくなるとは思えない!!!

502 :Name_Not_Found:2016/09/03(土) 23:19:09.96 ID:???
SJISは方言があるからその辺に引っかかる文字何じゃないの?
いや、そもそも e.target.result って配列なの?

503 :Name_Not_Found:2016/09/04(日) 11:41:41.34 ID:???
>>499
>$(
2chのバグだろ

書き込み確認画面が出る際、" を使うと、そこで文字列の終了と解釈される。
\" とエスケープすると、書き込めないか?

$(\" 〜 \")

504 :Name_Not_Found:2016/09/04(日) 11:46:59.46 ID:???
$('hage');

505 :Name_Not_Found:2016/09/04(日) 11:48:30.89 ID:???
$("お前がhage")

506 :Name_Not_Found:2016/09/04(日) 19:20:36.45 ID:???
とにかくUTFをSJISにしてダウンロードさせるサンプルコードはネットでたくさん転がってるんですがSJISのcsvを読み込んでWebで表示するサンプルがないんですよ。お願いします。参考サイトとかあればそれでもかまいません。

507 :Name_Not_Found:2016/09/04(日) 22:22:54.66 ID:???
>>495
ありがとうございます!
2の方法でやってみます!

508 :Name_Not_Found:2016/09/05(月) 02:00:28.13 ID:???
>SJISのcsvを読み込んで、Webで表示する
文字化けするから、これは無理

UTF-8しか、ブラウザが対応していない

509 :Name_Not_Found:2016/09/05(月) 09:38:36.97 ID:???
>>508
読み込む時点で、sjisだと言っておけば、適当にちゃんとした文字列にかわらんかったっけ?
XHRのoverride系のやつ。

510 :Name_Not_Found:2016/09/05(月) 12:29:09.82 ID:???
>>506
Content-Typeでcharsetを指定すればいいのでは?
https://www.google.co.jp/search?q=content-type+charset+header+apache

511 :Name_Not_Found:2016/09/05(月) 17:45:40.95 ID:???
>>509, 510
XMLHttpRequest.setRequestHeader("Content-Type", "text/plain;charset=SHIFT_JIS”);

だね。
サポートするブラウザは限られてるようだが
TextDecoder.decode() メソッドもある

512 :Name_Not_Found:2016/09/05(月) 23:26:02.34 ID:???
>>511
そうではなく、サーバのレスポンスヘッダをしていするのが正規な方法かと
あと、text/plainではなく、text/csvですね

513 :Name_Not_Found:2016/09/06(火) 00:48:15.00 ID:???
Shift-jis を使うのは、MSだけだから、使うとややこしい

CSVファイルを、TeraPad で、UTF-8に変換すればいい

514 :Name_Not_Found:2016/09/07(水) 20:27:37.99 ID:???
皆さんいろいろなご意見ありがとうございます。Filereaderの引数に文字エンード指定でいけました。面白いですねFileAPI。OSに依存しないので無敵です。

515 :Name_Not_Found:2016/09/08(木) 21:18:19.51 ID:???
お問い合わせ入力フォームなどで

<(".*?"|'.*?'|[^'"])*?>
<("[^"]*"|'[^']*'|[^'">])*>
などの正規表現使ってreplaceで""に置き換えるのと

text()使うのと

どちらがスクリプトやらに対して安全でしょうか?

516 :Name_Not_Found:2016/09/11(日) 19:47:05.10 ID:???
フロントエンドエンジニアってデザイン(フォトショ、イラレ)覚えなくてもなれる?

517 :Name_Not_Found:2016/09/12(月) 08:02:43.13 ID:???
どなたか、Netflixを利用しているかたいませんか?
Netflixを利用しているかたにしか分からないのですが、
コンテンツのサムネイルが並んでいいてマウスカーソルをサムネイルに重ねると
サムネイルが大きくなって説明文が見えますが、
ページをスクロールするだけなのに、サムネイルの上にカーソルが乗るだけで
サムネイルが大きくなってとてもうっとうしいのです。

これを大きくさせないようにしたいのですが、どなたか方法をわかりませんか?

518 :Name_Not_Found:2016/09/12(月) 14:10:24.63 ID:???
>>517
(1) サムネイルに利用されている CSS を調べる(ブラウザの開発ツールで可能)
(2) その CSS の :hover 擬似クラスのスタイルを UA スタイルシートで上書きする( UA スタイルシート機能は、最初から組み込まれているブラウザもあるが、ブラウザアドオンがいることもある)

とうまくいく可能性がある(その反応が :hover でなく js で実装されている場合は、 js のふるまいを上書きする必要があるが以下省略)。

単に :hover 擬似クラスのスタイルを無効化するだけだと、普通にマウスを重ねたときも反応しなくなるが、 CSS transition を利用すれば、マウスが 1 秒以上 hover したら起動するように設定できる可能性もある

519 :Name_Not_Found:2016/09/12(月) 23:28:46.39 ID:???
3列N行のテーブルの各<td>内に別の表(小表)を入れるhtmlを作成しています。
各<td>内の表にはIDを社員番号_連番で付番し、
ページ上部のボタンを押下すると、各ボタンに
表示されている連番がIDに含まれている表のみを表示しようとしています。
作成したスクリプトは以下の通りです。
(サンプルのため、非表示とするIDの連番は05固定でやっています)

<script>
$(function() {
$('#btn').click(function(e) {
$(

520 :Name_Not_Found:2016/09/12(月) 23:29:32.03 ID:???
すみません、途中できれてしまいました。

<script>
$(function() {
$('#btn').click(function(e) {
$("#table_test [id $= '05']").hide();
});
});
</script>

同一行内で3つある表の内1つが非表示となった場合、ボタンを押下すると
非表示の<td>を詰めて、左詰めで表示されるのですが、
その際空いた一番右側の<td>にはその下の行にある
一番左側の<td>内の表を1段上の右に移動させたいと考えております。
しかし、実際には行間の移動はされず、右の<td>は空欄となり、
その下の行は左から開始されています。

この現象を解消するには、ボタン押下時に非該当<td>の非表示だけではなく
表自体の整形までスクリプトで行う以外に方法はないでしょうか。

521 :Name_Not_Found:2016/09/13(火) 02:09:31.52 ID:???
ないよ。スクリプトで頑張りな

522 :Name_Not_Found:2016/09/13(火) 02:15:15.77 ID:???
>>520
それ table にする意味あるの?
table 使わずに display: inline-block か flex 使うほうが楽できると思うよ

523 :Name_Not_Found:2016/09/13(火) 06:44:09.62 ID:???
>>519-520
2chの書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
これは、2chのバグだろう

" を、\" とエスケープすれば良いかも

524 :Name_Not_Found:2016/09/13(火) 11:57:24.76 ID:???
>>520
無い。なぜかというと、そういう動作をするものは、表じゃない。
(行と列に意味があるものではない)
3つずつ並んだ社員番号でしかない。
>>522の言うように、inline-blockな要素として並べるのが一番まともだと思うよ。
divで作った3つ分の幅持たせた枠に、
inline-blockなspanを並べるのが一番きれいだと思う。

525 :Name_Not_Found:2016/09/14(水) 13:22:26.04 ID:???
>>521〜524
ありがとうございました、できました!

いまボタンをさくせいしており、4月というボタンを押した場合、
IDの最後に04が設定されているdivを非表示にし、
「IDの最後に04が設定されていないdivを表示」にしようと
しております。

以下のスクリプトを作成した場合、「04を非表示」は
正常に行えるのですが、「04以外を表示」が動作しません。
スクリプトは参考サイトから取得したものであり、
id判定に恐らく正規表現を使っているのだと思うのですが、
jqueryで「04以外」といった表現をする場合、
どのような記述になるのでしょうか。

<script>
$(function() {
$('#btn2').click(function(e) {
$("#table_test [id $= '04']").hide();
$("#table_test [id ?!$= '04']").show();
});
});
</script>

526 :Name_Not_Found:2016/09/14(水) 16:12:14.52 ID:???
>>525
$('#btn2').click(function(e) {
$("#table_test")
.find("div").show().end()
.find("div[id $= '04']").hide();
});

527 :Name_Not_Found:2016/09/14(水) 19:00:17.41 ID:???
>>525

div[id$=“04”] {
display: none;
}
というスタイルを追加する方がスマートかな

528 :Name_Not_Found:2016/09/14(水) 22:47:02.99 ID:???
>>526,527
ありがとうございます!
色々なやり方があるのですね、勉強になりました。

「04を非表示」は、なんとか色々参考にしながらできたのですが、
「04“以外”を表示」がどうしてもできないのです。
いただいたサンプルのように、シンプルに1行で実現できる式はあるのでしょうか。

529 :Name_Not_Found:2016/09/14(水) 23:36:55.84 ID:???
>>528
04以外を表示って、
全部表示して04隠すのと何か違うの?

530 :Name_Not_Found:2016/09/14(水) 23:53:42.31 ID:???
>>528
function a(num) { // 引数numからhtmlを生成 }
a(num);
$(btn).click(function() { a(num); });
こんな感じが理想的
自分で作れ

531 :Name_Not_Found:2016/09/15(木) 00:16:37.52 ID:???
$('#btn2').click(function(e) {
$("#table_test")
.find("div").show().end()
.find("div[id $= '04']").hide();
});
ID:???(506/507)
0527 Name_Not_Found 2016/09/14 19:00:17
>>529

div[id$=“04”] {
display: none;
}
というスタイルを追加する方がスマートかな

532 :Name_Not_Found:2016/09/15(木) 00:20:06.62 ID:???
>>529
すみません、自分の記載があやまっていました、、、
正しくは04以外を非表示です。
もうしわけありません

533 :Name_Not_Found:2016/09/15(木) 01:42:58.84 ID:???
>>532です
何度も投稿、もうしわけありません。

529さんの内容で問題ありませんでした。
お手数をお掛けしてすみませんでした。

この場合、最初にすべて隠してから特定のidだけを表示するという方法ですが、2段階にすることなく、「04以外のid」を指定する記述の方法はないものでしょうか。
伝わりづらくてすみません

534 :Name_Not_Found:2016/09/15(木) 01:58:58.60 ID:???
>>533
やる意味があんまり感じられないけど、$('#table_test div:not(#04)')
が1番見た目わかりやすいかな。
ただ、そのdivのon('click')で自分だけを表示させるなら、
$('#table_test div').on('click',function(){
$('#table_test div').hide()
$(this).show()
})
の方が楽そう。

535 :Name_Not_Found:2016/09/15(木) 15:07:45.79 ID:???
>>533
初歩的な方法
ifで04じゃないのに対して非表示

536 :Name_Not_Found:2016/09/15(木) 16:34:29.17 ID:???
>>533
$("#btn2").on("click", function(e) {
var num = '04';
$("#table_test td").each(function() {
var id_num = $(this).attr("id");
num == id_num.slice(id_num.length - num.length) ? $(this).hide() : $(this).show();
});
});

537 :Name_Not_Found:2016/09/15(木) 16:35:43.93 ID:???
$("#table_test td") は、$("#table_test div") だね

538 :Name_Not_Found:2016/09/15(木) 21:40:41.43 ID:???
ちょっといい加減イライラしてきたな。
クソなやり取りしてるんじゃないよ。

まずJavaScriptだけでどうにかしようとするな。
ユーザーインターフェースは、JavaScriptとHTMLとCSSを
組み合わせてやるもんだ。組み合わせると言っても密な状態にはしないが。

まず、showとかhideをするものたち。これに共通の名前がついてないのが悪い。
前提として名前を正しくつけろ。

そうすりゃ、わかりやすいコードで実現できる。

https://jsfiddle.net/71s545Lu/

$(function() {
 $('#buttons').on('click', 'button', function(e) {
  $(".month").hide().filter('#month' + $(this).val()).show();
 });
});

539 :Name_Not_Found:2016/09/15(木) 22:01:12.22 ID:???
これはCSSがちょっと冗長になるが、JavaScriptと見た目を完全に分離したパターンだ

https://jsfiddle.net/71s545Lu/1/

本来はJavaScriptは状態だけを管理しするもので、
その状態でどう表示するかっていうのはCSSの責務。

今回の例は状態に対応する表示のパターンが少ないからあまりメリットは
感じられないだろうけど、状態によってあちこちのブロックを表示したり
非表示にしたりする場合は、このパターンが便利。

なおCSSが冗長になる問題はSCSSを使えば解決できる。

https://jsfiddle.net/71s545Lu/2/

540 :Name_Not_Found:2016/09/15(木) 22:09:39.67 ID:???
これもCSSに分離したパターン。
大抵はこっちのほうが良いだろう。
>>539はデザインがもっと複雑になった場合に使う。

https://jsfiddle.net/71s545Lu/3/

541 :Name_Not_Found:2016/09/15(木) 23:38:36.75 ID:???
>>534-537
皆さん、いろいろとありがとうございました!
教えていただいたパターンを色々試し、希望する形ができました。

>>538-540
最近jqueryを試し始めて、基礎がわかっていなくてすみません。
色々サンプルありがとうございました。
教えていただいた内容を取り入れてやってみます!

542 :Name_Not_Found:2016/09/16(金) 23:53:56.32 ID:???
$('[name^=unko]')
などとしたときに unkoではじまるnameを持つ要素一覧が取得できますが
そのときの nameの種類の一覧は どうしたら取得できますか?

543 :Name_Not_Found:2016/09/17(土) 00:03:41.38 ID:???
>>542
こんな感じかな
$.unique($("[name^=unko]").map(function(){return this.name}))

544 :Name_Not_Found:2016/09/17(土) 00:05:44.93 ID:???
惜しいw

$.unique($.map($('[name^=unkno]'), function(e) { return e.name }));

545 :Name_Not_Found:2016/09/17(土) 00:44:01.98 ID:???
あれ、>>543だと動かない?
バージョンによっては動かないのかな

546 :Name_Not_Found:2016/09/17(土) 00:48:43.42 ID:???
>>541
漏れなぞ、あれこれと、jquery-ui のデザインのテーマを決めて、
ダウンロードするだけで達成感を得たわw

もう、お腹いっぱい。コーディングは、せんでもええ

547 :Name_Not_Found:2016/09/17(土) 01:04:11.18 ID:???
>>543
もしくは最後にget()が必要。

$.unique($("[name^=unko]").map(function(){return this.name})).get()

普通はjQueryオブジェクトはDOM要素が入った配列なんだが、
mapを使った場合は、returnした要素が入っているjQueryオブジェクトになってる。

jQueryオブジェクトのままでその後の処理ができるならこれでもいいけどね。
でもなかなか扱いが難しい。どういうときに便利なんだろうかね。

548 :Name_Not_Found:2016/09/17(土) 07:56:52.89 ID:???
jQuery内で完結しているならjQueryオブジェクトのままでも問題ないと思うがな
jQuery#forEachやjQuery#filterが普通に使えるし

あと、>>544は重複削除してほしいといわれているわけでもないのに jQuery.unique を使うのが意味不明
継続処理で重複検出時に例外を返す仕様だったらどうする?
もしくは、重複を許容する仕様だったらどうする?

549 :548:2016/09/17(土) 08:19:28.61 ID:???
訂正
× jQuery#forEach
○ jQuery#each

550 :Name_Not_Found:2016/09/17(土) 09:51:36.01 ID:???
>>548
> あと、>>544は重複削除してほしいといわれているわけでもないのに jQuery.unique を使うのが意味不明

それこそ>>543に言うべきでは?w

551 :Name_Not_Found:2016/09/17(土) 10:01:13.66 ID:???
種類の一覧って言ってるから、重複はなしじゃない?
どっちにしろそれくらい質問者が調節すればいい

552 :Name_Not_Found:2016/09/17(土) 10:27:09.09 ID:???
>>550

>>543がやってたから真似しただけw
すべては>>543が悪い。

553 :Name_Not_Found:2016/09/17(土) 10:43:56.39 ID:???
そうだな543が全て悪い。
544は実に聡明。何も悪くない。

554 :Name_Not_Found:2016/09/17(土) 10:46:30.95 ID:???
543の謝罪はよ

555 :Name_Not_Found:2016/09/17(土) 12:40:25.94 ID:???
>>543みたいな回答はこのスレの質を下げる原因になる。
そんな回答するくらいなら回答しない方がマシだからレスするな。

556 :548:2016/09/17(土) 14:30:20.76 ID:???
>>550-555
>543を見過ごしたのは自分だが、真似しただけで>543に責任を押しつけはないだろ
それでは「質問の要件は全く見ていません」「回答者に文句言いたかっただけ」と白状しているようなものだ
言いがかりをつけたいだけにしか読めないぞ
jQuery.uniqueに関しては>543-544は同等に悪い

557 :Name_Not_Found:2016/09/17(土) 14:55:05.06 ID:???
>>556
要件は種類の一覧なんだから重複なしだろ。

↓お前このクイズに正解してみw

オセロのコマは何種類あるでしょうか?
http://nazo-nazo.com/sp/cat398/post-73.html

558 :Name_Not_Found:2016/09/17(土) 14:58:55.39 ID:???
>>548

要件を見てないお前が悪い。

559 :Name_Not_Found:2016/09/17(土) 15:04:17.30 ID:???
> nameの種類bフ一覧
bフが鍵だなw

560 :Name_Not_Found:2016/09/17(土) 15:17:27.68 ID:???
お前のブラウザ壊れてるんじゃね?

561 :Name_Not_Found:2016/09/17(土) 16:06:07.41 ID:???
bフ一覧 って何?

562 :Name_Not_Found:2016/09/17(土) 17:04:59.85 ID:???
ほんとだブラウザで見ると化けてるわ

563 :Name_Not_Found:2016/09/17(土) 17:23:24.42 ID:???
種類bフ一覧

564 :Name_Not_Found:2016/09/17(土) 18:21:48.26 ID:???
(^_^)bフ

565 :Name_Not_Found:2016/09/17(土) 18:25:48.97 ID:???
>>556
要件は種類ですよ?

566 :548:2016/09/17(土) 18:44:10.28 ID:???
>>557,565
なるほど、「種類」は見てなかったな
しかし、「種類 = 重複削除」となる発想がよく分からん…
例えば、次の名前一覧があるとする

・田中太郎
・田中咲夜
・山本祐一
・榊原加奈子
・Ken
・Julia
・カカロット

「名前の種類を出して下さい」という問に対して名前を重複削除して上のリストをそのまま出す人がいるか?
普通は「性別」「人種」「国籍」「姓」などのカテゴライズする基準を決めて分類すると思うが

>>542の分類法が分からんと「nameの種類」を出すことは出来ない
つまり、相変わらず、jQuery.uniqueを使う理由が分からん

567 :Name_Not_Found:2016/09/17(土) 18:55:04.15 ID:???
>>566
> 「名前の種類を出して下さい」という問に対して名前を重複削除して上のリストをそのまま出す人がいるか?
いるだろw

> 普通は「性別」「人種」「国籍」「姓」などのカテゴライズする基準を決めて分類すると思うが
いつ分類の話になったんだよw

今は「名前の種類」の話だろ。

568 :548:2016/09/17(土) 19:10:51.86 ID:???
>>567
だから、「名前の種類」とは何だ?
名前そのものが種類ならそれは種類ではないだろ
「名前の一覧」と「名前の種類の一覧」がどうして同じ結果になるんだ?

569 :Name_Not_Found:2016/09/17(土) 19:34:48.30 ID:???
>>568
> だから、「名前の種類」とは何だ?

種類っていうのは同じもの(名前の場合は、その文字)を
一つとして数えた場合の数のことでしょ?

> 「名前の一覧」と「名前の種類の一覧」がどうして同じ結果になるんだ?
同じじゃないよ。種類は同じ名前があった場合は一つとして数える。
「名前の一覧」と「名前の種類の一覧」が同じ結果になるのは
すべての名前が違う場合のみ。

570 :Name_Not_Found:2016/09/17(土) 19:54:02.17 ID:???
> nameの種類bフ一覧
nameの基準で見て、bフが共通するものに於いて、
その全体の内容をわかるようにしたものなんだよ
「bフ」の形態が不明なら「種類」は定義できないんだよw

571 :Name_Not_Found:2016/09/17(土) 21:12:08.54 ID:???
ビーフ?

572 :Name_Not_Found:2016/09/18(日) 16:20:54.05 ID:???
要素の表示、非表示、end()の使い方について教えてください。
以下のスクリプトにて、div要素の内、
 @idが'1G'から始まる要素以外を隠す
 A最後が'05'で終わる要素以外を隠す
としたいのですが、実行してみると
@は実行されるのですがAが実行されません。
コード上でどこかおかしなところがあるのでしょうか。


$("#tasktable")
.find("div").show().end()
.find("div").not("#tasktable [id ^= '1G']").hide().end()
.find("div").not("#tasktable [id $= '05']").hide().end()

573 :Name_Not_Found:2016/09/18(日) 16:24:00.48 ID:???
なんでわざわざ読むのが大変なコードを
書こうとするんだろうね。

574 :Name_Not_Found:2016/09/18(日) 16:44:29.22 ID:???
すみません、やっぱり読み込みやすいコード、読込づらいコードで、
読込速度とか変わってくるものなのでしょうか

575 :Name_Not_Found:2016/09/18(日) 17:01:29.98 ID:???
>>572
.find("div").not("#tasktable [id ^= '1G']").hide().end()
ここでnot("#tasktable [id ^= '1G']")以外はすでに不可視状態

.find("div").not("#tasktable [id ^= '1G'], #tasktable [id $= '05']").hide()

576 :Name_Not_Found:2016/09/18(日) 17:15:31.47 ID:???
>>574
読み込み速度なんて、0.1ミリ秒レベルの世界の違いだよw
気にするだけ無駄。

それよりも、開発速度の方を気にした方がいい。
読みやすいコードと読みにくいコードで数時間の差は簡単にでる思ったほうが良い。
ちょっとの違いで数万円の違いだよ。バグの修正で数日かかったりしたら・・・?

読み込み速度を考えるのは、コードの可読性に満足できるようになってからでいい。

577 :Name_Not_Found:2016/09/18(日) 17:28:44.31 ID:???
>>572
$("#tasktable")
.find("div").show().end()
.find("div").not("#tasktable [id ^= '1G'], #tasktable [id $= '05']").hide();

$("#tasktable")に対する処理をend()で終了(区切るので)最後のend()は不要
; で完了とする

var $tasktable = $("#tasktable");
$tasktable.find("div").show();
$tasktable.find("div").not("#tasktable [id ^= '1G'], #tasktable [id $= '05']").hide();
と同じ事

578 :Name_Not_Found:2016/09/18(日) 17:32:49.05 ID:???
>>575
ありがとうございます。
確かに1G以外はすでに不可視状態なのですが、
最初が1Gでありかつ最後が05のものは表示されると思いました。
05かどうかが判定されていないみたいなんですよね。

>>576
まずはコードの可読性なんですね、心がけるようにします!

579 :548:2016/09/18(日) 17:34:03.81 ID:???
>>569
つまり、あなたは上司に「この掲示板のログから名前の種類の一覧を出してくれ」と指示を受けたら「重複削除した名前のリスト」を提出する
「名前の一覧を出してくれ」と指示を受けたら「重複削除していない名前の一覧」を提出するわけだな
正直、あなたは思い込みで独断先行するタイプにしか見えない

580 :Name_Not_Found:2016/09/18(日) 17:35:55.85 ID:???
>>574
>>576の言うことも正解だが、何万行にでもなると
理想的なセレクターの活用、コーディング、モード(use strict)
の違いで差は出てくるのは確かだよ

581 :Name_Not_Found:2016/09/18(日) 17:53:28.45 ID:???
>>579
種類を聞かれたんだから、
単なる数じゃなくて重複を省いて種類で答えるよw

ポケモンは何種類?
ドリンクは何種類?
魚は何種類?

この聞き方で重複は省きますか?って聞くようだったら
仕事できないやつだと思われるよ。

582 :Name_Not_Found:2016/09/18(日) 18:01:43.70 ID:???
本当に仕事のできる人
name一覧 = {
unkoa: 1,
unkob: 1,
unkoc: 2,
unkod: 1
};

583 :Name_Not_Found:2016/09/18(日) 18:43:35.39 ID:???
仕事のできる人 の>>542への回答
(function() {
var obj = {};
$('[name^="unko"]').each(function() {
var name = $(this).attr('name');
var len = $(this).length;
obj[name] ? obj[name] += len : obj[name] = len;
});
console.log(obj);
}());

584 :Name_Not_Found:2016/09/18(日) 22:50:06.59 ID:???
>>581
「数を出してくれ」なんて指示を受けてないんだが、どこから数が出てきた?

585 :Name_Not_Found:2016/09/18(日) 23:02:27.47 ID:???
>>584
ん? だから数じゃなくて種類を答えたいのなら
全種類書いてくれて良いんだよ。

(質問1)ポケモンの種類すべて答えてくれよ。


(質問2)その種類は何種類だと思う?w

586 :Name_Not_Found:2016/09/18(日) 23:03:28.73 ID:???
>>581
> ポケモンは何種類?
「ポケモンの種類」って何の種類だよ
君がいいたいのは「ポケモンの種族は何種類?」じゃないのか
常識的な感覚の持ち主なら回答する前に分類を尋ねる
分類名が何も書かれてないのだから例えば、「今までにリリースされたポケモンのゲーム作品の種類」を答えられても文句は言えないぞ
分類を隠して質問したら回答不能なケースはいくらでもある

日本人は何種類?
掲示板は何種類?
パソコンは何種類?

587 :Name_Not_Found:2016/09/18(日) 23:06:23.00 ID:???
>>586
お前仕事できなそうだなw

種類の意味がわからなければ、
聞けばいいじゃないかw

でも明らかな場合にそれを聞くのは
それもまた仕事できなそうに見えるけどなw

588 :Name_Not_Found:2016/09/18(日) 23:09:41.02 ID:???
> $('[name^=unko]')
> などとしたときに unkoではじまるnameを持つ要素一覧が取得できますが
> そのときの nameの種類の一覧は どうしたら取得できますか?

nameを持つ要素一覧が取得できますがといっていることからも
「nameを持つ要素一覧」が何かははっきりしている。

この流れで「nameの種類の一覧」の意味がわからないとしたら
仕事辞めたほうが良いよ。

589 :Name_Not_Found:2016/09/18(日) 23:19:52.83 ID:???
> そのときの nameの種類bフ一覧は どうしたら取得できますか?
「nameの種類bフ一覧」はわからんだろ?w

590 :Name_Not_Found:2016/09/18(日) 23:22:01.70 ID:???
>>587
俺からするとおまえは思い込みで突っ走りそうで安心して仕事を任せられないタイプだよ

591 :Name_Not_Found:2016/09/18(日) 23:27:13.81 ID:???
nameを持つ要素の一覧が何か説明してあるのに
そのnameの種類で意味がわからんやつがいるのか・・・

592 :Name_Not_Found:2016/09/18(日) 23:39:38.69 ID:???
>>542だけだと「種類の定義を教えろ」と尋ねたくなる気持ちは分からんでもない
下記HTMLがあった場合、[name^=unko-hoge], [name^=unko-foo], [name^=unko-piyo] を種類と言い切ることも出来る

<input name="unko-hoge-foo">
<input name="unko-hoge-piyo">
<input name="unko-hoge-hoge">
<input name="unko-foo-foo">
<input name="unko-foo-piyo">
<input name="unko-foo-hoge">
<input name="unko-piyo-foo">
<input name="unko-piyo-piyo">
<input name="unko-piyo-hoge">

曖昧なものをより厳密にしようとするのはプログラマの性であり、必要な事ももある
ここで「融通が利かない」とか言い出す奴はプログラマなんて止めてしまえ
顧客とのやり取りで曖昧にしてきた事が後になって問題になるケースはよく聞く事だ
あらゆる状況を想定して厳密にコードを書くのは良い事だ

593 :本物の>>542:2016/09/19(月) 00:13:47.28 ID:???
俺が>>542だけど、自分の意見を押し通したいがために
他人のふりをするのはやめなさい。

594 :Name_Not_Found:2016/09/19(月) 00:23:00.66 ID:???
>>593
>542のふりをする人って誰かいたっけ?

595 :Name_Not_Found:2016/09/19(月) 00:27:41.58 ID:???
>>593
本物の>>542なら他人のレスに文句を言う前にする事があるのでは?

596 :Name_Not_Found:2016/09/19(月) 03:15:22.89 ID:???
>>592
お前だよお前。ちゃんとお礼を言え

597 :Name_Not_Found:2016/09/19(月) 08:59:01.61 ID:???
>>592
キミが>>542なら
> そのときの nameの種類bフ一覧は どうしたら取得できますか?
まずは「bフ」を修正するのがプログラマとしての性だ

598 :592:2016/09/19(月) 11:17:38.87 ID:???
>>596-597
なぜ俺が>>542だと思ったのかさっぱりわからん
542を否定する立場をとっている俺が本人なら自虐趣味のある人って事になるが
542へレスしたいなら>>593にいってくれ

599 :Name_Not_Found:2016/09/19(月) 11:37:26.76 ID:???
これ今までの回答で解決した質問者(>542)が名無しで潜伏して荒らしてるだけでしょ
・質問に対する解釈が割れているのに「nameの種類bフ一覧」の意図を明らかにしない
・回答に対して解決したのか、解決しなかったのかを書かない
質問者本人が荒らしてないとしても荒れている場を見て何とも思わない時点で不誠実でいい加減な性格が透けて見えるよね

600 :Name_Not_Found:2016/09/19(月) 12:37:20.95 ID:???
質問します。

行追加ボタンでテーブルに行が追加されるたび、
リストボックスで選択可能の値を全行同等に書き換えたいです。
1行だと1のみのリストボックス
2行だと1.2のリストボックス
と言うように。
その際、選択されている各値は保持しておきたいです。
(再選択時に選択可能の値が書き換わってるような感じ)
可能でしょうか?
また、どのような処理がスマートでしょうか?

601 :Name_Not_Found:2016/09/19(月) 12:49:19.20 ID:???
>>600
模索でいいからソースもとに質問する
誰にも意志が伝わらないよ

602 :Name_Not_Found:2016/09/19(月) 13:09:25.67 ID:???
まずリストボックスが分からん。
セレクトボックスのことか?

603 :Name_Not_Found:2016/09/19(月) 13:17:48.49 ID:???
はいそうです。

質問もう少しかえます。
テーブルに3行のデータがあります。
セレクトボックスの列を保有しています。
セレクトボックスには1〜3までの値を選択出来るようになっています。
仮に1行目は1、2行目は2、3行目は3が選択されていたとします。

そこで行追加ボタンを押下したら、行が一行増えます。
そのタイミングで全行のセレクトボックスの値は1〜4が選べるように変更になります。
1行目〜3行目はそれぞれそのまま1、2、3が選ばれたままとしますが、再選択時には1〜4が選択できるようになります。

うまく説明できなくてすいません。
少し濁している部分もあります。すいません。

例えば県を選んだら市を選び直すセレクトボックスがあると思います。
あんな感じで、なおかつ市はリセットされずに既存の値のままでいてほしい、というイメージです。

604 :Name_Not_Found:2016/09/19(月) 13:41:31.30 ID:???
>>603
そのセレクトボックスのイベント
目的は何?

605 :Name_Not_Found:2016/09/19(月) 13:50:49.83 ID:???
(なんとか > select)に、option足すだけじゃいかんのか?

606 :Name_Not_Found:2016/09/19(月) 13:51:48.02 ID:???
>>604
セレクトボックスのイベントではなく、行追加のイベントになります。

内容はぼかしてます。もう少し入り組んだ画面なのですが、わからない箇所だけ取り出してます。
目的はとりあえず置いててください。
すいません…
行追加のタイミングでajaxでリストボックスを全行作り直す感じですか?

607 :Name_Not_Found:2016/09/19(月) 17:04:03.49 ID:???
>>603
trをcloneして全selectにoption要素ノードをappendすればいいのでは

608 :607:2016/09/19(月) 17:07:35.18 ID:???
逆か
対象のselect要素ノード郡にoption要素をappendしてからtrをclone→appendでいけるな
選択状態までcloneされるからもう一手間必要だが

609 :Name_Not_Found:2016/09/19(月) 17:19:41.83 ID:???
>>606
function createList() {
セレクトボックス作成関数
return html;
}
function addList() {
$('table tr').each(function(i, t) {
$(createList()).appendTo($(this).find('td').eq(0).empty()).val(i);
});
}
$('#btn').on('click', function(){
$('table tbody').append('<tr><td>列0</td><td>列1</td></tr>');
return addList();
});
こんな感じかな?

610 :Name_Not_Found:2016/09/19(月) 17:19:56.87 ID:???
>>608
なるほど。
毎回作るのではなくcloneで量産すればいいんですね!
その際valueにもともとの値をセットすれば、ちゃんと選択されていたものが選択された状態になる感じですか?
試してみます。ありがとう。

611 :Name_Not_Found:2016/09/19(月) 17:27:38.05 ID:???
>>606
function createList() {
セレクトボックス作成関数
var html = '<select>';
for (var i=0; i<$('table tr').length; i++) {
html += '<option value="" + i + ''>...';
}
html += '</select>';
return html;
}
行追加後に全行の列0を空にして新しいselectに入れ替えて
行のインデックスの値にする

612 :607:2016/09/19(月) 17:46:23.14 ID:???
>>610
cloneするのは追加の一行だけだからvalueにセットするのは初期値
既存のselectはoptionを追加するだけなんだから何もしなくていい

613 :Name_Not_Found:2016/09/19(月) 18:27:04.35 ID:???
>>609
すいません、理解できました!勘違いしてました。
作り直したCreateListは一個持って
appendだけすればいいですかね。
valueは必ずiとは限らず、
上から3、4、2、1とかバラバラの場合もあります。(選択による)
作り変え前に値を保持しておけばいいですね?

614 :Name_Not_Found:2016/09/19(月) 18:29:01.48 ID:???
>>611
あっ…すいません、これ
セレクトボックス作り変えるんじゃなく、
オプションのみ追加することって可能なんですか??

615 :Name_Not_Found:2016/09/19(月) 20:07:43.11 ID:???
テーブルのくだりがよくわからなかったので、セレクトボックスについてだけ言うなら
オプションのみの追加は可能

html側
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>

script側
$('select[name=blood]').append('<option value="RhA">RhA型</option>');

616 :Name_Not_Found:2016/09/19(月) 20:23:13.83 ID:???
ありがとう。
この場合optionのappendだけでいけそうですね。
参考になりました。ありがとうございました。

617 :Name_Not_Found:2016/09/19(月) 21:10:28.52 ID:???
すみません、質問させてください。
ボタンを押すことで、IDにある特定の文字列が含まれているDIVのみを表示させようとしています。

IDに

618 :Name_Not_Found:2016/09/19(月) 21:11:17.79 ID:???
すみません、途中できれてしまいました。

すみません、質問させてください。
ボタンを押すことで、IDにある特定の文字列が含まれているDIVのみを表示させようとしています。

IDに"G-2G-29999-201604-M"が設定されているDIVなのですが、

$("#test")
.find("div").hide().end()
.find("div[id ^= 'G-1G']").show().end()

というコードでは表示対象はなりません。(正しい動作)
しかし、最終行を変更し

$("#test")
.find("div").hide().end()
.find("div[id ^= 'G-1G']+[id $= '04-M']").show().end()

とすると、「id ^= 'G-1G'」に一致しないにも関わらず表示されてしまいます。
「.find("div[id ^= 'G-1G']+[id $= '04-M']").show().end()」は
「IDが'G-1G'から始まり、かつ'04-M'で終わるDIVを表示する」であると思っているのですが、
なぜ"G-2G-29999-201604-M"も出力対象となってしまうのでしょうか。

619 :Name_Not_Found:2016/09/19(月) 21:15:01.24 ID:???
>>613
function addList() {
$('table tbody tr').each(function(i, t) {
var $td = $(this).find('td.list_cell');
var value = $td.find('select').val() || i;
$(createList()).appendTo($td.empty()).val(value);
});
}
保存しなくても参照すればできるよ

620 :Name_Not_Found:2016/09/19(月) 22:27:31.03 ID:???
>>618
おそらく、<div id="G-2G-29999-201604-M">の前に
<div id="G-1G-29999-201604-M">の要素が追加されてるからだと思う

.find("div[id ^= 'G-1G']+[id $= '04-M']")の+は「要素の前後関係」を表している
まずdiv[id ^= 'G-1G']にマッチする要素、その次に来る[id $= '04-M']にマッチする要素を表示
ということ

実験
1G要素の次に2G要素(2Gが表示される)
https://jsfiddle.net/aay29p0j/

1Gと2Gを入れ替え(どちらも表示されない)
https://jsfiddle.net/e6v7qonj/

621 :Name_Not_Found:2016/09/19(月) 22:39:03.03 ID:???
>>618
.find("div[id ^= 'G-1G'][id $= '04-M']").show().end()
「+」は要らない

622 :Name_Not_Found:2016/09/19(月) 22:41:30.34 ID:???
>>615
追加で質問します。
これってセレクトボックスを全て同nameにしておけば、一行で完結したりします?

623 :Name_Not_Found:2016/09/19(月) 22:49:12.16 ID:???
>>618
>>621の通り
前からG-1G、後ろから04-Mにマッチするものを取得したいなら
こんな感じ↓
https://jsfiddle.net/e6v7qonj/1/

624 :Name_Not_Found:2016/09/19(月) 22:52:29.12 ID:???
>>622
できる

https://jsfiddle.net/vzta8zw3/

625 :Name_Not_Found:2016/09/19(月) 23:00:26.72 ID:???
できるけど、フォーム送信の時困るだろ。
こういうのは、何でをまとめられる単位でグループに対して
classを設定して、そのclass単位で処理するんだよ

626 :Name_Not_Found:2016/09/19(月) 23:11:58.89 ID:???
>>625
ありがとう。
じゃ、同クラスにして、
appendしたら一行ですむのかな?

行追加ボタンのイベントで、
セレクトボックスのクラス名指定して、
optionのlength+1の値をoptionに追加したら、クラス属性のセレクトボックスには全てオプション追加されてると?

627 :Name_Not_Found:2016/09/19(月) 23:16:29.06 ID:???
>>624
これみたらやはりoption追加したらそれまで選択されていた値がリセットされちゃう感じですね。
どうやって保有しておけばいいんでしょうか?

628 :Name_Not_Found:2016/09/19(月) 23:21:17.24 ID:???
リセットされない

629 :Name_Not_Found:2016/09/19(月) 23:23:46.59 ID:???
>>627
おそらくリセットされるのはサイトを開いたときにhtmlも再読み込みするからだと思う

option追加ボタンを追加してみた
適当にそれぞれセレクトしてから「option追加ボタン」を押すと
こちらの環境では選択は保持されたままだった
https://jsfiddle.net/vzta8zw3/1/

630 :Name_Not_Found:2016/09/19(月) 23:28:12.55 ID:???
>>629
わー!何から何までありがとうございました!
上のRUNボタン押下したらリセットされちゃったのでどうかなと思いましたが。
一行ですみますね!ありがとう。
このサイトも便利ですね。使わせてもらいます。
どうもありがとうございました。

631 :Name_Not_Found:2016/09/20(火) 01:41:12.50 ID:???
>>629
閉めた後にすいません。
同じ値が重複されないようにするには、どうするのがスマートですか?
ボタンを押下するとどんどん同じ値が追加されていってしまうのですが…

632 :Name_Not_Found:2016/09/20(火) 02:09:29.77 ID:???
>>631
どう追加したいのかでかなり変わってくる

(1)あらかじめ決まったワードがあるなら、配列にでもいれるか。
 この例は「option追加ボタン」を押すごとに、決まったワード['RhA','RhB','RhO','RhAB']から順々に
 一つずつ追加していき、全て入れ終わったら停止するというパターン
 https://jsfiddle.net/vzta8zw3/3/

(2)入力した値を入れたいのならテキストボックスでも作るとか
 https://jsfiddle.net/vzta8zw3/2/

633 :Name_Not_Found:2016/09/20(火) 02:13:37.47 ID:???
訂正(2)は間違い
(2)入力した値を入れたいのならテキストボックスでも作るとか
https://jsfiddle.net/vzta8zw3/4/

634 :Name_Not_Found:2016/09/20(火) 09:33:32.12 ID:???
>>632
1,2,3と追加して3を追加する前に、すでにあるなら追加しないという動きにしたい

635 :Name_Not_Found:2016/09/20(火) 10:01:17.59 ID:???
>>609のような感じで全てを更新する方が無難

636 :607:2016/09/20(火) 11:01:54.55 ID:???
まだやっていたのか
日本語の説明で理解出来ないなら最小限のHTML/CSS/JavaScriptぐらい書いたら?
説明を日本語でおおざっぱに書いておいて回答ではコードがないと理解できないとか、そちらの環境を想定してHTML/CSSを書く手間を考えてないよな
>>612をスルーした理由もその辺にあるんだろうなと思ってるが

>>631
数字の連番になっているなら最後のoption.valueを参照しえインクリメントするとか
「どうすればいいですか?」ではなく、アルゴリズムをまず考えて実装方法を考える癖をつけた方がいい

637 :Name_Not_Found:2016/09/20(火) 12:56:08.22 ID:???
>>635
そうですね。作り変えます。ありがとうございました。

638 :Name_Not_Found:2016/09/20(火) 17:19:24.52 ID:???
jqueryを導入していない他者のサイトでjqueryを使いたいとき

(function() {
var jq=document.createElement('script');
jq.src='https://code.jquery.com/jquery-3.1.0.min.js';
document.body.appendChild(jq);
})();

として読み込みには成功しました。
そこで質問があります。
今やっているのは、まずコンソールを開いて↑のコードをコピペ、
つぎに、jqueryを使ったコードをコピペ。
という風に手動の作業が段階的になっています。
それでは微妙に面倒なので、何か良い解決策はないでしょうか。
外部からjquery読み込み終わったタイミングでjqueryを使った処理、という風にしたいです。
よろしくおねがいします。
(timeoutの方法は既にやりましたので他の方法があれば)

639 :Name_Not_Found:2016/09/20(火) 17:46:57.80 ID:???
scriptタグのonloadでいいんじゃね?

640 :Name_Not_Found:2016/09/20(火) 19:09:12.74 ID:???
>>638
window.addEventListener('DOMContentLoaded', function() { は?

641 :Name_Not_Found:2016/09/20(火) 20:52:13.42 ID:???
test

642 :Name_Not_Found:2016/09/20(火) 20:52:48.25 ID:???
>>638
> jqueryを導入していない他者のサイトでjqueryを使いたいとき
どういうことしたいの?

他者のサイトのhtmlに、<script src="//example.com/myscript.js"></script>と
入れてもらう。

myscript.jsの中身↓

document.write("<script src='//code.jquery.com/jquery-3.1.0.min.js'></script>");
(function($) {
 $(function() {
   // お好きにどうぞ
 })
})($.noConflict(true));


と書いたけど、他者のサイトのhtmlに入れてもらうってことが出来ない場合なんだろうねw
書いてみたかっただけ。

643 :Name_Not_Found:2016/09/20(火) 20:58:03.85 ID:???
(function() {
 var jq = document.createElement('script');
 jq.onload = function() {
  // 好きに使え
 };
 jq.src = '//code.jquery.com/jquery-3.1.0.min.js';
 document.body.appendChild(jq);
})();

まあこんな感じだろうね。
厳密にやりたいならnoConflictもやる必要がある。

644 :638:2016/09/20(火) 21:36:26.96 ID:???
>>639-643
ありがとうございます
なぜか長文だと書き込みが飛ばされてレスできないので
調べてみます・・

645 :638:2016/09/20(火) 21:37:40.84 ID:???
あらためて、長文?だとレスができないので分けてレスします

>>639-643
ありがとうございます
みなさんに教えてもらった通りonloadやらDOMContentLoadedを試してみたところ
load後にスクリプトは動いてくれましたが
どうも思った結果が得られません

つづく、

646 :638:2016/09/20(火) 21:43:19.24 ID:???
うーん・・・
長文というかコードを貼り付けるとエラーになるみたいですね
(レスしようとしていた内容の大半を失ってしまったので)仕方ないので以下略します

>>643さんの//好きに使え
の部分をconsole.log($('#trad>a'));にして
http://echo.2ch.net/hp/subback.html
で実行しました
問題は、結果がaタグ要素一つしか得られないところです。
期待するのは、aタグが詰まった配列のjqueryオブジェクトです。

647 :Name_Not_Found:2016/09/21(水) 00:07:42.23 ID:???
>>620-623
ありがとうございました、できました!
[id ^= 'G-1G']+[id $= '04-M']")の意味を取り違えて理解していたようです。
本当にありがとうございました。

648 :Name_Not_Found:2016/09/21(水) 08:06:08.36 ID:???
プルダウンメニュー
画像1
画像2
画像3

こういう風にリストから画像選んだ時にだけ画像を読み込むスクリプトちょうだい

649 :Name_Not_Found:2016/09/21(水) 08:25:35.42 ID:???
>>648
意味不明すぎる

650 :Name_Not_Found:2016/09/21(水) 08:27:29.65 ID:???
>>648
画像を選ぶ前にまずその画像を読み込まないと選びようがなくね?
別の画像を表示したいのか?

651 :Name_Not_Found:2016/09/21(水) 08:37:49.74 ID:???
>>650
最初は何も表示されてない状態でリストから選んだ時にだけ表示したいんだよ
例えばweb漫画とかだと全ページ一気に読み込むんじゃなく
ページ選んだ時にだけ画像読み込むじゃん

652 :Name_Not_Found:2016/09/21(水) 09:11:57.50 ID:???
>>650
「選ぶ」と入ってもマウスイベントには色々有る

653 :Name_Not_Found:2016/09/21(水) 10:20:02.47 ID:???
>>648,651
https://jsfiddle.net/x137cnf7/

654 :Name_Not_Found:2016/09/21(水) 10:41:35.75 ID:???
>>653
zipでくれ

655 :Name_Not_Found:2016/09/22(木) 06:11:36.29 ID:???
で、>>646の原因はなんだと思う?

656 :Name_Not_Found:2016/09/22(木) 06:20:10.55 ID:???
レスしてからあらためて試したら原因がわかった

コンソールにはあらかじめ$があるみたいで
それが優先されてるだけだった
ブックマークレットでやったらいけた
でもなぜonloadはダメなんだろ

657 :Name_Not_Found:2016/09/22(木) 07:30:50.38 ID:???
そのonloadから見える $ がグローバルじゃないんじゃね?

最初に
var $ = jQuery;
ってしておけばいけるとおもう(未検証)

658 :Name_Not_Found:2016/09/22(木) 15:17:13.21 ID:???
imgurの画像みたいに画像名はランダムで複数の画像があった場合
指定した順番通りに非同期で画像差し替える参考になるサンプルある?

659 :Name_Not_Found:2016/09/22(木) 15:55:19.65 ID:???
非同期とは?

660 :Name_Not_Found:2016/09/22(木) 16:32:48.13 ID:???
>>657
ありがとうございますできました

具体的には>>646の//好きに使えの部分に
var $ = jQuery;
console.log($('#trad>a'));
を代入です

661 :Name_Not_Found:2016/09/22(木) 20:42:41.49 ID:???
$('button').on('click', function(){
$(this).closest('.form-group').hide('slow', function(){ $target.remove(); });
});

こんな感じでボタン押してフォームパーツを削除、という風にしているのですが、
appendなどで追加したフォームパーツ(class="form-group")に対しては全く動きません。


appendなどで追加した要素にも、jsファイルに記述した関数を適用させるにはどうすればいいですか?

662 :Name_Not_Found:2016/09/22(木) 21:45:53.02 ID:???
>>661
$('body').on('click', 'button', function() {});

663 :Name_Not_Found:2016/09/22(木) 22:30:37.16 ID:???
>>662
オリゴ糖

664 :Name_Not_Found:2016/09/23(金) 08:23:19.05 ID:???
>>658
同じ質問がマルチポストされてるから参考にしてみては?
http://echo.2ch.net/test/read.cgi/hp/1463395557/794-

665 :Name_Not_Found:2016/09/23(金) 09:10:23.31 ID:???
何も参考になってないけど池沼かな

666 :Name_Not_Found:2016/09/23(金) 09:34:38.36 ID:???
池沼だろうな

667 :Name_Not_Found:2016/09/23(金) 14:05:34.82 ID:???
「参考になる=コピペするだけで動くコードが紹介されてる」なんだろうな

668 :Name_Not_Found:2016/09/23(金) 18:44:30.75 ID:???
その辺りが教えて君の思考なんだろうね

669 :Name_Not_Found:2016/09/23(金) 20:24:29.41 ID:???
そもそも、スレのルール違反だから教えたがり君以外は誰も答えない
あっちのスレでもルールの範囲内でアドバイスされているだけ

> ですが、jQueryを使って作る側のスレであって、こんなjQueryプラグインありませんか?と聞くスレではありません。

670 :Name_Not_Found:2016/09/23(金) 22:09:18.11 ID:???
<div id="target">
foo
<div>bar</div>
</div>

この場合jqueryで"foo"のみを取り出すにはどうすればいい?
$("#target").text()だと"foobar"になってしまう
正規表現以外でよろ

671 :Name_Not_Found:2016/09/23(金) 22:28:18.50 ID:???
>>670
$.trim($('#target').contents()[0].data);

672 :Name_Not_Found:2016/09/23(金) 22:28:29.21 ID:???
>>670
$('#target').contents()[0];

673 :671:2016/09/23(金) 22:29:35.91 ID:???
もしくはこれでも
$('#target').contents()[0].data.trim();

674 :Name_Not_Found:2016/09/23(金) 22:30:54.18 ID:???
>>671-673
サンキュークズども

675 :671:2016/09/23(金) 22:35:50.97 ID:???
>>674
すまんこっちのほうがいいかも
$('#target').contents().eq(0).text().trim();

676 :Name_Not_Found:2016/09/23(金) 22:36:32.34 ID:???
効率は悪いがこれでできなくはないな。

$('#target').clone().find('*').remove().end().text()

677 :Name_Not_Found:2016/09/23(金) 22:37:34.99 ID:???
このスレは一番平和だw

678 :Name_Not_Found:2016/09/23(金) 23:20:31.56 ID:???
俺はJSスレの方が好きだな

679 :Name_Not_Found:2016/09/24(土) 15:08:51.39 ID:???
errorFormGroup.append('errortext')

このappendした'errortext'をさらにwrap('<span class="help-block"></span>')したいのですが、
よりシンプルに書こうとすればどうすればいいでしょうか?

680 :Name_Not_Found:2016/09/24(土) 15:12:55.69 ID:gr4iRbbR
errorFormGroup.append('<span class="help-block">errortext</span>')

681 :Name_Not_Found:2016/09/24(土) 15:15:27.77 ID:???
>>680
便宜上'errortext'としたため、そのやり方は採用できそうにないです;;

682 :Name_Not_Found:2016/09/24(土) 15:28:28.62 ID:???
>>679
$(errorFormGroup).contents().wrap('<span class="help-block"></span>');

683 :Name_Not_Found:2016/09/24(土) 15:34:09.53 ID:???
>>679
意味がわからんから動きをHTMLタグだけで書いてくれ。

元がどうで、それをどうしたいのかを

684 :Name_Not_Found:2016/09/24(土) 16:11:38.13 ID:???
<errorFormGroup>
<span class="help-block">errortext</span>
</errorFormGroup>
結果としてこうなら>>680
errorFormGroup.append('errortext')の後に
何かのプロセスがあるなら>>682

685 :Name_Not_Found:2016/09/24(土) 21:59:51.67 ID:00RkP09Q
特定のOSに対してポップアップでメッセ出したいんですが
これでおkですかね?

var os, ua = navigator.userAgent;
if (ua.match(/Win(dows )?NT 10\.0/))
alert("こんにちは");

686 :Name_Not_Found:2016/09/24(土) 22:41:55.94 ID:???
>>685
問題ないがjQueryと関係ないなw

687 :Name_Not_Found:2016/09/24(土) 22:46:39.50 ID:7b7mPJzs
JavascriptのデバッガってFireBug使ってるんだけど、これもうオワコンなの?
みんなChromeなの?

688 :Name_Not_Found:2016/09/24(土) 23:04:37.58 ID:00RkP09Q
>>686
全く訳も解らず
ネットで検索したのを組み合わせてるんですが
jQueryに関する記述が書いてあるんですかね?

689 :Name_Not_Found:2016/09/24(土) 23:05:35.33 ID:00RkP09Q
あースレチって事かな

690 :Name_Not_Found:2016/09/24(土) 23:13:46.13 ID:dB/XGcpV
>>687
オワコンっていうかFirefoxに統合された。
だからFireBugなんてものは存在しないと言えるし、
Firefoxを使っているならばFireBugを使っているのと同じとも言える。

691 :Name_Not_Found:2016/09/24(土) 23:14:08.54 ID:???
+ JavaScript の質問用スレッド vol.126 +
http://echo.2ch.net/test/read.cgi/hp/1439005423/l50

+ jQuery 質問用スレッド vol.7 +
http://echo.2ch.net/test/read.cgi/hp/1466750494/l50

692 :685:2016/09/24(土) 23:24:41.87 ID:00RkP09Q
他所で聞くのでもういいです。

693 :Name_Not_Found:2016/09/25(日) 23:55:29.19 ID:???
正規表現が正しいかどうか、だけだろ

自分で、確かめればいいだけ

694 :Name_Not_Found:2016/09/27(火) 23:03:39.37 ID:???
配列同士の値を比較をしたいとき(ループ文を使わないとき)って
map使えばよかったんだっけ・・・?

var hit = 0;
var a=[6,3,4,0,2,9];
var b=[2,3,2,0,1,9];
a.map(function(n,i){ if(n===b[i])hit++ });
console.log(hit); //3

記憶違いかもしれないがmapの他になんかなかったかな

695 :Name_Not_Found:2016/09/28(水) 00:36:55.63 ID:???
>>694
そういうDOM要素と関係ないものはlodash使うと良いよ

https://lodash.com/docs/4.16.2#isEqual

696 :Name_Not_Found:2016/09/28(水) 00:41:30.91 ID:???
>>695
具体的にカウント部分(var hit)はどう表現するの?

697 :Name_Not_Found:2016/09/28(水) 01:10:30.35 ID:???
>>694
jQueryは関係ないからスレ違い
reduce使えば?

698 :Name_Not_Found:2016/09/28(水) 08:19:41.37 ID:???
>>694
型まで同じでないといかんか?
瑣末な処理なら、
.joinして文字列同士比較する、
stringifyして文字列同士比較する方が良いのでは。
比較も、文字数が必要なら変換後の文字列同士をxorすると同じ部分が吹き飛ぶので、残ってる部分数えるとか。

mapで外側の変数触るのはいささか気が引けるからreduce使いたいな。

699 :Name_Not_Found:2016/09/28(水) 13:12:16.58 ID:???
Rubyみたいに、a & b で積集合、b - a で差集合演算が、出来ないの?

700 :Name_Not_Found:2016/09/28(水) 13:16:21.11 ID:???
うん

701 :Name_Not_Found:2016/09/28(水) 15:57:36.51 ID:???
zipしたり直積とったりグルーピングしたりflatmapしたい

702 :Name_Not_Found:2016/09/28(水) 21:42:02.73 ID:???
それ全部lodashにあるよ

https://lodash.com/docs/4.16.2#intersection
https://lodash.com/docs/4.16.2#difference
https://lodash.com/docs/4.16.2#zip
https://lodash.com/docs/4.16.2#groupBy
https://lodash.com/docs/4.16.2#flatMap



と言いたかったが直積はどれだろう?

703 :Name_Not_Found:2016/09/29(木) 03:23:28.79 ID:???
javascript関係ないけどここで聞いたほうが早そうなので質問します
chromeのコンソールってエンター押すと実行されちゃいますよね
これOFFにして実行は別の方法にできませんかね・・?

704 :Name_Not_Found:2016/09/29(木) 03:25:29.65 ID:???
運が良ければChromeプラグインで作れるかもしれない。
それが無理ならWindowsとかOSの機能を使って
特定のウインドウだったら〜みたいな方法で作れるかもしれない。

705 :Name_Not_Found:2016/09/29(木) 09:29:19.02 ID:???
>>703
shift押せば済むだろ?

706 :Name_Not_Found:2016/09/29(木) 09:43:24.44 ID:???
>>705
まさにそれが(誤エンター含め)塵も積もればでとてもストレスになります

707 :Name_Not_Found:2016/09/29(木) 13:54:12.80 ID:???
>>706
俺は逆にEnterで実行されないとストレスになるな
Enterでsubmit出来ない、submitボタンまでフォーカスを持っていってクリックしないとsubmot出来ないフォームとか、制作者を小一時間問い詰めたい
ようするに、マウスでクリックするのが当然の感覚でキーボード入力する人のことを全く考えてないんだよな
tabキーでsubmitボタンまでフォーカスを持っていくのが面倒くさくて仕方ない
Enter誤入力なんてしないし、本人の自己責任だし、キーボードからマウスに手を持っていく時間が勿体ないし

708 :Name_Not_Found:2016/09/29(木) 16:01:20.04 ID:???
>>707
いや・・別に即実行をなくしたいandなくなる、わけじゃなく
Enter実行をやめる代わりにShift+Enterなどで実行できればいいんじゃないですか・・?

709 :Name_Not_Found:2016/09/29(木) 19:07:52.63 ID:???
>>708
君自身が>>706で「ちりも積もれば」といっているじゃないか
1行コードでも複数行コードでも毎回Shift+Enterを入力するのは苦痛だ

710 :Name_Not_Found:2016/09/29(木) 19:24:45.12 ID:???
なんだこいつ

711 :Name_Not_Found:2016/09/29(木) 19:37:52.80 ID:???
ぶっちゃけ、>>705のいうとおりだと思う
複数行なんてそれ程入力する機会があるわけでもなし
1行入力の方が圧倒的に多いので現行仕様が望ましい

712 :Name_Not_Found:2016/09/29(木) 20:48:50.69 ID:???
なんか上の方でも引っかかたけどさs、
Chromeのコンソールの使い方間違ってるんじゃないか?
なんか独自で書いた便利スクリプトを動かす場所にしてる気がする。
あそこはデバッグ用途なんだが。

713 :Name_Not_Found:2016/09/29(木) 22:36:07.07 ID:???
でもなんだかんだで(ブックマークレット的な使い方は置いといて)デバック以外で使ってる人がほとんどでしょ

714 :Name_Not_Found:2016/09/29(木) 22:38:07.59 ID:???
一行デバッグ用途だけならそもそも5種類くらいあるコンソール画面の切替機能なんていらないって話だし

715 :Name_Not_Found:2016/09/29(木) 22:44:48.55 ID:???
>>709
え、ええ。そうですよ?
一行コードで毎回Shift+Enterで実行するのが苦痛な人はEnter即実行にすればいいだけだし
複行コードで毎回Shift+Enterで改行するのが苦痛な人はShift+Enter(仮)で即実行にすればいいだけだし
切り替えればいいだけですよ
仮にそういう機能があったら、あった方がいいじゃないですか・・
なかったらなかったで、もちろん仕方ないのでどうでもいいわけですが

716 :Name_Not_Found:2016/09/30(金) 08:33:38.77 ID:???
>>715
あなたの求める仕様では複数行でも最後にShift+Enterを押さなければならないのだから「どんな場合でもShift+Enterを押さなければならない」のが苦痛だってことなんだが、伝わらないな…
誤入力防止用にアドレスバーや検索バーでEnterを殺してShift+Enterで遷移させているようなものだ

---
最も、誤入力防止という意味では
・コンソールで誤入力→もう一度一から入力
の手順が無駄なので
・テキストエディタにコード入力→コンソールに貼り付け
・ローカルにHTTPサーバをたてる→ローカルのHTML/JSに直接入力
の方が効率が良いと思うが
コンソール上で過去のコードをコピーするのは範囲選択がテキストエディタと比較して面倒くさい
ストレス軽減を目的とするならテキストエディタ上でコード入力が最適というのが自分の結論だ

717 :716:2016/09/30(金) 08:48:06.24 ID:wX3W4ndj
コンソールの欠点の一つにError/Warningが発生した行数が分かりにくいというのがある

また、正常動作することが保証された(検証済みの)コードは問題ないが、トライアンドエラーを繰り返す前提だと同じようなコードを何度も実行することになる
そうすると、一から何度も入力はやってられないのでテキストエディタからコードのコピペを繰り返す
こうなるとコピペ動作すら面倒になるので結局ローカルにHTML/JSを用意してローカルテストする方が効率が良いことに気が付く
だから、俺はコンソールはエラーが発生しないことが予め分かっている簡易コードしか実行しないようになった
>>703もコンソールを使う目的をはっきりさせた方が良いと思うね

718 :Name_Not_Found:2016/09/30(金) 09:02:06.29 ID:???
そんなことJavaScriptには関係ない
Goolgeにフィードバックすればいいんだ

スレ違い

719 :Name_Not_Found:2016/09/30(金) 13:37:19.00 ID:Rk5seXYw
質問です
var hoge = "a-b";
hogeをsplitで分割して二つの変数に入れたいです

var a,b = hoge.split("-");みたいに出来れば良いと思ってるのですが

var fuge = hoge.split("-");
var a = fuge[0];
var b = fuge[1];
と書くしかないんでしょうか?

720 :Name_Not_Found:2016/09/30(金) 14:40:23.77 ID:???
>>719
var hoge = { a: "a", b: "b" };
hoge.a
hoge.b
或いは
var hoge = [ "a", "b" ];
var a = hoge[0];
var b = hoge[1];

"a-b"が何かを参照した文字列ならどちらにしても配列に置き換えた方がいいよ

721 :Name_Not_Found:2016/09/30(金) 15:04:43.60 ID:???
>>716
>誤入力防止用にアドレスバーや検索バーでEnterを殺してShift+Enterで遷移させているようなものだ
普段から複数検索ワード入力して一気にサイト開く作業が多い人なら
一行検索バーより複数行バー検索の方が楽だよね?

Shift+Enter(仮)実行(Enter改行)つまり「普通のテキストエディタ」と、
Enter実行(Shift+Enter(仮)改行)つまり「一行コンソール」
この機能が仮にあるなら、「便利な方に切り替えるよね?」という話をしているのを理解してる?
どうして「Shift+Enter機能搭載したらEnter機能がなくなる」と勘違いしてるの?

722 :Name_Not_Found:2016/09/30(金) 15:11:12.54 ID:???
みんな理解してるけど>>707>>709が想像力と読解力がないだけ

723 :Name_Not_Found:2016/09/30(金) 19:52:50.99 ID:???
>>719
var hoge = "a-b";

var [a, b] = hoge.split("-");

724 :Name_Not_Found:2016/09/30(金) 21:03:25.72 ID:???
var hoge = 'a-b';

(function(a, b) {
 console.log(a + ':' + b)
}).apply(this, hoge.split('-'))

725 :Name_Not_Found:2016/10/07(金) 16:24:47.56 ID:???
tes

726 :Name_Not_Found:2016/10/10(月) 11:49:25.80 ID:mLyLyXOM
質問です。

リストを作りたいのですが、
リストアイテムのHTMLがかなり複雑になっており、
リストアイテムのHTMLは複数のページで共通です。

シンプルなリストの場合
$("#list").append("<li>アイテム1</li>");
とかで追加できると思うのですが、
$("#list").append("<li>長い長〜〜〜〜〜い複雑なHTML</li>");
…という実装は避けたいです。

できれば部品HTMLとして外部ファイルにして読み込みたいです。
が、JQueryのloadのような非同期読み込みも避けたいです。

underscore.jsのtemplateといものを見つけましたが
「複数のページで共通」というとこがうまくいかない感じです。

何か良い方法(または定番の方法)はありませんでしょうか。

727 :Name_Not_Found:2016/10/10(月) 12:23:37.78 ID:???
>>726
template要素

728 :Name_Not_Found:2016/10/10(月) 13:20:32.76 ID:???
>>727
回答ありがとうございます。
そんな要素があるんですね。
しかしながらこれをどうやって複数ページ間で共有するんでしょうか?
画面1、画面2、画面3・・・ の一部分に同じテンプレートを使いたいのです。

729 :Name_Not_Found:2016/10/10(月) 17:23:28.12 ID:???
>>728
非同期読み込みを避けたいならサーバサイドで同期出力すればいいんじゃない?
JavaScriptならXHRの同期読み込みぐらいしか思いつかない(勿論、非推奨)
非同期読み込みを排除している時点で選択肢は限られる

730 :Name_Not_Found:2016/10/10(月) 18:57:44.20 ID:???
jsファイルにでも書いとけば?

731 :Name_Not_Found:2016/10/10(月) 22:13:23.99 ID:???
やり方はたくさんあるからね。
まずtemplate要素をどこに埋め込むか

1. templateをHTMLに埋め込む
2. templateをJavaScriptに埋め込む
3. templateを外部ファイルとする


次に埋め込む場合はどうやって埋め込むか

A. サーバーサイドで動的に埋め込む (各種サーバーサイド言語やSSIなどの選択肢がある)
B. ビルドツールを使って埋め込む (webpackなど。これも幾つか選択肢がある)
C. 手動で埋め込む


手っ取り早い方法としてよく使われるのが1-Aの組み合わせだけど、
これはサーバーサイドですでに動的にHTMLを生成する環境があるのが前提。
そういった環境がすでにあるならばこの方法が楽。

3の方法使えば、比較的簡単でHTMLにもJavaScriptにも埋め込まなくて済むけどパフォーマンスが落ちる。
パフォーマンスをあげようとするとHTMLかJavaScriptに埋め込む方法だけど
ビルド環境を整えないといけない。今の開発ではビルドツールを使うのは常識みたいなもんだけど
何も知らない人がやるとかなり大変だろうね。

ぶっちゃけ、手動でJavaScriptにテンプレート文字列を埋め込んだほうが楽なんだけどな。
複雑なHTMLならば、文字列結合で作るよりもテンプレートエンジンを使ったほうが楽。

そうそうtemplate要素を使う場合もそうだけどjQueryではなくテンプレートエンジンの
JavaScript用ライブラリが必要。mustacheやlodashの簡易テンプレートとかね。
IEやSafariを切り捨てていいなら、ES6のテンプレートリテラルでも頑張れるけど。

732 :Name_Not_Found:2016/10/10(月) 22:42:56.38 ID:???
>ぶっちゃけ、手動でJavaScriptにテンプレート文字列を埋め込んだほうが楽

複数のページで使っているから、変更があったら、手に負えない

733 :Name_Not_Found:2016/10/10(月) 22:45:32.10 ID:???
>>732
JavaScript一箇所に書けばいいだけ

734 :Name_Not_Found:2016/10/11(火) 03:32:30.90 ID:???
テンプレートリテラル使えよ使えよ〜
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

735 :Name_Not_Found:2016/10/11(火) 07:59:34.16 ID:???
そのためにはbabelを導入しないといけない

736 :Name_Not_Found:2016/10/11(火) 23:15:34.42 ID:TPANyTlv
質問させてください

Yahooのように「ウェブ 画像 動画 辞書 知恵袋 地図」のリンクをクリックで
FORMの送信先を変更するにはどうすれば良いでしょうか?
よろしくお願いします。

737 :Name_Not_Found:2016/10/11(火) 23:59:52.41 ID:???
>>736
onclickで

document.formName.action="送信先URL";
document.formName.submit();

でどう?

738 :Name_Not_Found:2016/10/12(水) 00:17:20.00 ID:???
>>736
> Yahooのように「ウェブ 画像 動画 辞書 知恵袋 地図」のリンクをクリックで
> FORMの送信先を変更するにはどうすれば良いでしょうか?

YahooはFORMの送信先は変わってない

739 :Name_Not_Found:2016/10/12(水) 00:21:37.89 ID:???
<div class="bdA3 bgA6" id="searchbox">
<form name="sf1" action="http://search.yahoo.co.jp/search;_ylt=何々" method="get">

<span> <a id="search" hidefocus="true" href="http://rdsig.yahoo.co.jp/_ylt=何々">ウェブ</a></span>

</form>
</div>

右クリックから、要素の検査をすると、F12開発者ツールが起動する

たぶん「ウェブ 画像 動画 辞書 知恵袋 地図」で、href= の所が変わる

740 :Name_Not_Found:2016/10/12(水) 00:50:05.27 ID:???
変わらないね

741 :Name_Not_Found:2016/10/14(金) 20:44:02.81 ID:???
>>726
Knockout.js

742 :Name_Not_Found:2016/10/14(金) 21:34:55.60 ID:uBqgTnJV
質問です

pukiwikiにてWiki作成を行っています
http://oxynotes.com/?p=10360
↑のプラグインを導入して、内容通りに進めているのですが星の画像がどうしても出てきません
当然jQueryは導入してるし画像は./imageに入れています
一体なにが原因なのでしょうか

以下ソースです
"<div class="raty-plugin"><script type="text/javascript" src="./skin/jquery.raty.js"></script>
<div class="raty star0" "></div><p class="star-after">評価数:0 平均評価:0</p>
<script type="text/javascript">
$(function raty0() {
$.fn.raty.defaults.path = "./image";
$(".star0").raty({
number: 5,
score : 0,
hints: ['1', '2', '3', '4', '5'],
click: function(score, evt) {
var url = "http://○○.com/?plugin=raty&refer=%E6%98%A0%E7%94%BB%E9%A4%A8%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88&digest=270f28c53e43b10c34e471de140319c1&raty_id=0&score=" + score;
location.href=url;
}
});
});
</script>
</div><!-- .raty-plugin -->"

743 :Name_Not_Found:2016/10/14(金) 21:50:41.94 ID:???
だからそんなほぼ無名なjQueryプラグインのことを聞かれたって
知るわけ無いって。わざわざ試してあげるような人もいないよ。

744 :Name_Not_Found:2016/10/14(金) 22:22:42.27 ID:???
作者に聞くのがいいよ
コードについて一番理解してるはずだしね
もし答えが帰ってこないならコードがアップデートされてないということなので使わない方がいい

745 :Name_Not_Found:2016/10/14(金) 22:43:41.72 ID:???
ie4とかie5の時代かっつうくらいの化石コードだな。ホンマにjQueryオワットル。

746 :Name_Not_Found:2016/10/15(土) 00:06:42.62 ID:???
すみません、ajaxとjavaの通信について教えてください。
ajaxで送られてきたデータをサーバーサイドのjavaで受け取るにはどのようにすればいいのでしょうか。
下のソースでは、ajaxでname=田中を送っています。
スクリプトレットの<% 〜 %>内で'田中'を使いたいのですが、いまいち受信の方法がわかりません。
<script>
$("#js-test").on("click", function() {
var postData = {name: '田中'};
var postUrl = "redirect.java";
$.ajax({
url: postUrl,type: "POST",dataType: "html",data: postData,
success: function(json) {
$('#result').html('成功!');
if (json["status"] == "error") {
alert(json["message"]);
$('#result').html('失敗!!');
return false;
}
for (var j in json) {
$('#result').html('成功!!');
}
},
error: function() {
// 通信失敗時の処理を記述
$('#result').html('失敗!');
}
});
<% String namae = "";
namae = request.getParameter("name"); %> });
</script>

747 :Name_Not_Found:2016/10/15(土) 00:19:32.45 ID:???
>>745
IE4やIE5じゃjQueryは使えないって(笑)

748 :Name_Not_Found:2016/10/15(土) 00:21:26.03 ID:???
>>746
<script>タグの中で<% %>は使ってはいけません。
絶対にです。

749 :Name_Not_Found:2016/10/15(土) 00:38:15.61 ID:???
>>745
まぁまぁw
DOM4よりはマシだから。

しっかしDOM4の実装ってなかなか進まないな。
ようやくFirefoxがNodeのbeforeやafterをサポートしたらしい。

これってjQueryのbeforeとafterを真似したんだろうなっていうのは
言うまでもないけど、Nodeのコレクションに対するbefore、afterがないんで、
やっぱりjQueryの劣化版

750 :Name_Not_Found:2016/10/15(土) 00:41:11.20 ID:???
これこれ
DOM manipulation convenience methods - LS
http://caniuse.com/#feat=dom-manip-convenience

全然対応していない。

で、それはそれとして説明見てフイタw

jQuery-like methods on DOM nodes to insert nodes around or within a node,
or to replace one node with another. These methods accept any number of
DOM nodes or HTML strings as arguments. Includes: ChildNode.before,
ChildNode.after, ChildNode.replaceWith, ParentNode.prepend, and ParentNode.append.

やっぱりjQuery-likeなんだw

751 :Name_Not_Found:2016/10/15(土) 03:20:09.98 ID:???
>>749
ポリモーフィズムの範囲をどこまで広げるかの違いでしょ
標準のDOMならなおさら、むやみに多義的にしない方がいいだろう

752 :Name_Not_Found:2016/10/15(土) 06:39:56.67 ID:???
既存の実装を標準に取り込むのは良くある話
そこでjQuery最高と唱える方がずれてる

753 :Name_Not_Found:2016/10/15(土) 10:42:10.56 ID:???
jQuery最高なのは、既存の実装を取り込んだ標準よりも
すぐれてるからだろw

754 :Name_Not_Found:2016/10/15(土) 11:07:08.95 ID:???
ヒャッハー

755 :Name_Not_Found:2016/10/15(土) 11:12:49.88 ID:???
jQueryとDOM APIで何が違うかというと、
jQueryはDOM要素ではなくてDOM要素のコレクションに対して
メソッドを用意しているところだよ。

756 :Name_Not_Found:2016/10/15(土) 11:39:21.96 ID:???
ajaxの実装をしているのですが、doneからfailへ飛ばす方法はあるでしょうか?

$.ajax({
//
}).done(function(data) {
if (data.deleted == false) {
// ここでdoneを中断しエラー処理(fail)を実行させたい
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// failの処理
});

757 :Name_Not_Found:2016/10/15(土) 11:39:44.53 ID:???
それは利点でもあり欠点でもあるけどな

758 :Name_Not_Found:2016/10/15(土) 12:22:35.18 ID:???
DOM要素のコレクションにメソッドが有ることの欠点って?

759 :Name_Not_Found:2016/10/15(土) 12:22:59.08 ID:???
>>756
例外throwすれば良いんじゃね?

760 :Name_Not_Found:2016/10/15(土) 14:34:42.24 ID:???
>>742
Wiki作って何に使うん?

761 :Name_Not_Found:2016/10/15(土) 16:17:53.85 ID:???
>>742
一旦、別のプロジェクトとして、画像が表示されるだけの、単純なソースコードで実行してみる。
そこから少しずつ、複雑なものに変えていく

>>746
スクリプトレットの<% 〜 %>は、JavaScript内ではなくて、HTML内で使うのでは?

>>759
非同期処理なのに、例外でcatchできる?

762 :Name_Not_Found:2016/10/15(土) 16:29:24.79 ID:???
>>761
だれがcatchするって言ってるんだ?

763 :Name_Not_Found:2016/10/15(土) 23:31:10.06 ID:???
>>748,761
ご回答ありがとうございます。
<script>タグの中で <% out.println("alert('****');"); %> を記述したらalert処理が実行できたので、記述してもいいものだと思ってました、、、
<script>タグ内では適さないのですね、勉強になりました。

>>746でやりたいことの最終形は、チェックボックスにチェックをつけると、ajaxでサーバーに「チェックボックスのvalue値」を送信し、
サーバーサイドでそのvalue値を条件としたデータベースの更新です。
ajaxでの送信は「成功!!」と表示されていることから、正常に通信できていると思います。
ただ、この処理は画面の遷移なく行いたい為、submit処理ではなくajaxで行おうとしています。
他の情報サイトも色々みているのですが、いまいち同様の事例がありません。
 @チェックボックスがチェックされた時の動作を<script>で記述する。
 A<script>内のajaxでチェックボックスのvalue値を送信する。
 Bサーバーでvalue値を取得する。
 Cサーバーで更新処理を行う。
このCの処理を何とか画面のjspファイルに記述できないかと思い<% %>で記述していました。
BCについて、具体的な実現方法がわからなくて困っています。
わかる方がいらっしゃれば、教えていただけないでしょうか。

764 :Name_Not_Found:2016/10/15(土) 23:57:29.77 ID:???
サーバーサイドは、PHP, Node.js, JSP などで書けば?

クライアントからは、その処理のURIへ、要求するだけ

765 :Name_Not_Found:2016/10/16(日) 02:56:48.29 ID:???
それ完全にサーバーの話だろ

766 :Name_Not_Found:2016/10/16(日) 06:59:29.14 ID:???
http://i.imgur.com/y8QIVfC.jpg
li.photoを上から3つ、それぞれ最初の画像だけを取りたい
(htmlタグは改変できない)

$('li.photo:lt(3) img:eq(0)')としましたが期待する結果にはなりませんでした
できればセレクタ一行でやりたいのですが無理でしょうか

767 :Name_Not_Found:2016/10/16(日) 07:31:49.80 ID:???
>>766
HTMLを起こすのが面倒なのでコードは書かないが、nth-childを使ったら?

768 :Name_Not_Found:2016/10/16(日) 07:41:31.61 ID:???
$('li.photo:lt(3) img:first-child')でいいんじゃね

769 :766:2016/10/16(日) 08:58:19.45 ID:???
>>767-768
やってみましたができませんでした

ちなみにこのサイトです
http://mantan-web.jp/gallery/

$('li.photolatest__news:lt(3) img:first-child');とすると、liの画像それぞれ4枚が取得されました(この例だと計12枚)
期待するのは
$('li.photolatest__news:eq(0) img:eq(1),li.photolatest__news:eq(0) img:eq(2),li.photolatest__news:eq(0) img:eq(0)');
です(計4枚)
これをもっと短く書けないかなと・・・

770 :Name_Not_Found:2016/10/16(日) 09:26:03.69 ID:???
>>769
$('li.photolatest__news:lt(3) :first-child > img')

>>767-768でできないのは、あなたが提示したHTMLと実際のHTMLの構造が全く異なるから。

771 :766:2016/10/16(日) 10:26:15.68 ID:???
>>770
できました。ありがとうございます
766では、imgそれぞれを何かしらの要素で包まないといけませんでした

ちなみに766の<img><img>・・・のようなものは$('li.photo:lt(3) :first-child');でできました
https://jsfiddle.net/2p9hkcdz/

772 :766:2016/10/16(日) 10:29:59.08 ID:???
プチ訂正 https://jsfiddle.net/2p9hkcdz/1/

773 :Name_Not_Found:2016/10/16(日) 15:52:07.86 ID:???
>>746
ajaxでredirect.javaにpostしてるんですかね?
だったらredirect.javaに
 Bサーバーでvalue値を取得する。
 Cサーバーで更新処理を行う。
 サーバからステータスを返す
の処理を書けばOKです。

ちなみに<script>に<% %>を書いちゃいけないルールなんて
ありません。ちゃんと意味を理解して使う分には問題ありません。
サーバサイドで動的にクライアントスクリプトを生成する場合
などに普通に使います。
ただし上記の意味が理解できないなら使わないのが無難です。

774 :726:2016/10/16(日) 16:27:25.71 ID:???
皆様、レスありがとうございます。

条件後出しで申し訳ないのですが
・サーバサイドは使わない
・jsファイルにHTMLを書かない
という制約があります。
HTML+JSで作る通信なしのブラウザアプリというイメージです。

>>731 さんのレスでいうところの
2とAはNGなので、1-B、1-C、3 が選択肢となり得ますが、
手動埋め込みはメンテナンス性悪いし、
外部ファイル非同期読み込みは遅い上に部品が複数になってくると
読み込み完了のタイミング関連がややこしそうなので、
1-Bの「ビルドツール使って各HTMLにtemplate埋め込み」が
最適解ということになるんでしょうか?

リストに限らず、たとえばヘッダ、フッタが共通のブラウザアプリを
作るときって、どうやって実現するのが一般的なんでしょうか?

775 :Name_Not_Found:2016/10/16(日) 17:21:18.98 ID:???
>>764
回答ありがとうございます。
コードはJSPで書いています。
その中で、「チェックボックスにチェックをつけたらデータ更新する」を
<script>処理で行っていたため、<script>に<% %>を記述していました。
JSPのEL式(<sql:update>)での更新も考えたのですが、<script>から
サーバーサイドへ「チェックボックスのvalue値」を引き渡すところで
ajaxを用いようとしており、サーバーサイドでのvalue値の受け取りのところで
躓いていました。

>>773
回答ありがとうございます。
使う上ではやはり理解した上でつかわないとだめですよね、わかりました。
本当は、コードを記述しているredirect.jsp内で完結させたかった為、
POSTの対象をredirect.jspとしていたのですが、自身を対象にできるのか
不明だったため、更新用のredirect.javaに変更しました。

Bサーバーでvalue値を取得する。
Cサーバーで更新処理を行う。
の処理をredirect.javaに記述する際は、servletと同様の処理を記述すれば
よいのでしょうか。

776 :Name_Not_Found:2016/10/16(日) 23:10:19.12 ID:???
>>774
「underscore.js template 外部ファイル」で検索!

デザインパターンは、AngularJS など、自分の使っている、フレームワークのやり方に従うだけ

>>775
JSPなど、自分の使っている、フレームワークのやり方に従うだけ

777 :Name_Not_Found:2016/10/17(月) 18:21:12.52 ID:???
>>756
やっぱこの解決策ってないの?

778 :Name_Not_Found:2016/10/17(月) 20:44:08.94 ID:???
解決済みだ

779 :Name_Not_Found:2016/10/17(月) 20:54:52.52 ID:???
Promise互換のインターフェースの方を使わないとだめか。
doneはthenと同じ動きだと思ってた。
いつもthenやcatchばかり使ってるからな。

780 :Name_Not_Found:2016/10/18(火) 05:01:57.11 ID:???
doneが一つだけならthenに置き換えてもいいんじゃね?

781 :Name_Not_Found:2016/10/18(火) 09:40:26.11 ID:???
jQueryでajax使うならthen使ったほうが良いよ。
Promise互換だから、将来Fetch APIに置き換えるときも
引数の調整程度ですむ。

ただしFetch APIは404とかがエラーになってくれないから
まさにthenの中で例外throwしてcatchで処理するって流れになるだろうけど

782 :Name_Not_Found:2016/10/18(火) 09:42:31.85 ID:???
$.ajax({
}).then(
funtion(){
}
,function(){
});

アカンの?

783 :Name_Not_Found:2016/10/18(火) 21:14:22.45 ID:???
>>782
だめ。要求を満たしてない

784 :Name_Not_Found:2016/10/19(水) 16:07:56.13 ID:???
var func = function() {};
$('body').on('click', 'a.hoge', function(){
fun();
return false;
});

上記を下記の様にしたいです
$('body').on('click', 'a.hoge', func);
return false; を適用させるにはどうすればいいのでしょうか?

785 :Name_Not_Found:2016/10/19(水) 16:26:16.51 ID:???
var func = function() { return false; }; にすればいいだけじゃないの?

786 :Name_Not_Found:2016/10/19(水) 21:01:10.09 ID:???
>>784
func 内で preventDefault も return false も呼ばないのなら無理
そもそも、preventDefault は関数内のどこに差し込むかによって条件付き呼び出し出来るようになってるし、常に呼び出す仕組みは考慮されてない
妥協点としては preventDefault を差し込んだ関数を返す汎用関数をユーザ定義するぐらい

787 :Name_Not_Found:2016/10/19(水) 21:38:48.55 ID:???
>>786

>>785という正解が見えないの?w

まあfun()が抜けているけど。

788 :Name_Not_Found:2016/10/19(水) 23:21:38.07 ID:???
jqueryのajaxを用いてjspからサーバー上で動作するjavaへデータを送信しようとしています。
基本的なところで本当にもうしわけないのですが、
$.ajax({ url: Url,type:
のUrlにはservletを設定するという認識であっていますか?

また、例えばフォルダ構成が
<送信元>
Documents\NetBeansProjects\Wbs\web\a.jsp
<送信先>
Documents\NetBeansProjects\Wbs\src\java\classes\b.java
となっているとき、urlには
"../../src/java/classes/b.java"
の設定でよいでしょうか。

urlがnot foundになってしまって困っています。

789 :Name_Not_Found:2016/10/19(水) 23:24:50.82 ID:???
JavaScriptと全く関係ない。
ajaxはURL(URI)としてアクセスできるならば
相手が何であろうと関係ない。

790 :Name_Not_Found:2016/10/19(水) 23:25:32.94 ID:???
"../src/java/classes/b.java" じゃねーの?

791 :Name_Not_Found:2016/10/19(水) 23:25:47.77 ID:???
func = (function(orig) {
return function() {
orig();
return false;
}
})(func);

みたいにラップするとか

792 :Name_Not_Found:2016/10/20(木) 02:07:00.81 ID:???
>>788-790
出力フォルダに、OutputPath とか、何か名前が付いているだろ

でも普通、プロジェクトの階層構造と、デプロイ後の階層構造は、異なる。
その出力フォルダは、デプロイ後の階層構造では、異なる場所になる

プロジェクトの階層構造と、デプロイ後の階層構造の、対応表を見れば?

また、公開ディレクトリルートからの階層の書き方も、決まっている

793 :Name_Not_Found:2016/10/20(木) 05:58:23.25 ID:???
>>789,790,792
ありがとうございます。
urlにクラスのパスではなく、ソースファイルのパスをしてしていました。
a.jspからの相対パスではうまくいかなかった為、b.javaの絶対パスを設定したところ、正常にクラスを見つけられるようになりました。

今回のajaxでは
dataType:

794 :Name_Not_Found:2016/10/20(木) 05:59:03.31 ID:???
すみません、切れてしまいました。

今回のajaxでは
dataType: "text",
data: {name: 'ノート'},
というデータを送信しているのですが、送信処理を実行すると「引数が無効です」とのエラーが発生してしまいます。

(b.java)
package abc;
public class Insert {
String project_cd;
public void Insert(String file_name) throws ClassNotFoundException {
project_cd = file_name;
}
}
やはりb.javaはservletで記述しなくてはならないのでしょうか。

795 :Name_Not_Found:2016/10/20(木) 09:38:12.96 ID:???
>>794
だから何で作るとか全く関係ない。
そしてそれはJavaの話だからここでするな

796 :Name_Not_Found:2016/10/20(木) 09:39:39.42 ID:???
それからソースコードのパスとか関係ない。
お前がどのURLでそのJavaアプリの処理が呼び出されるように
Java側で設定しているかだ。それはJavaの話なんだからここでするな。

797 :Name_Not_Found:2016/10/20(木) 10:01:46.39 ID:???
誘導
http://itest.2ch.net/test/read.cgi/tech/1476706523

798 :Name_Not_Found:2016/10/20(木) 10:07:05.46 ID:???
そもそも、b.javaはソースファイルでは?
ソースファイルにリクエストして意味があるのはせいぜいソースコードを非同期に読み込みたい時ぐらい

799 :Name_Not_Found:2016/10/21(金) 20:02:03.31 ID:???
ajaxについてなんですが、index.htmlのmainにindex2.htmlを読み込んで、そのindex2.htmlのリンクを踏むとリンク先が2つズレた形で表示されるのですが、それを回避するにはどうすればいいのでしょうか?
index2.htmlのリンクを踏む際はajax関数を無効化のように考えたのですが記述の仕方もわかりません
ご教示お願いします

800 :Name_Not_Found:2016/10/21(金) 20:19:10.42 ID:???
<a href="index3.html">リンク</a>
という相対パスをやめて
<a href="http://hogefuga.com/index3.html">リンク</a>
みたいに絶対パスでしてみてはどうでしょうか

801 :Name_Not_Found:2016/10/21(金) 22:15:01.63 ID:???
>>799
JavaScriptにもjQueryにも関係ないってわかってる?

802 :Name_Not_Found:2016/10/21(金) 22:36:50.64 ID:???
関係がないという判断ができるならそもそも質問してないんじゃね?
もしかしたら回避するパラメーターが$.ajaxにあるかもしれないし

803 :Name_Not_Found:2016/10/21(金) 23:04:38.21 ID:???
>>800
ありがとうございます。
ご指摘の通りにURLを変えてみたのですがかわりません。
試しにajaxの適応外にしてみたのですが、案の定丸々ページが更新されてしまいます。

>>801
そうなんですか?jQueryの関数なのでJavaScriptのジャンルかと思ったのですが、HTML5か通信関連で聞いたほうがいいのでしょうか?

804 :799:2016/10/22(土) 01:01:20.59 ID:???
すみません。自己解決しました。
どうやらHTML上に同じボックス要素があったという初歩的なミスが原因でした。
ありがとうございました。

805 :Name_Not_Found:2016/10/23(日) 12:41:57.32 ID:???
http://www.g-g2016.com/
このように右から左に自動で流れるスライドショーを作りたいのですが
slickなどを使ってもうまく動作しませんでした。
学校の講師にもなぜ動かないのか分からないと言われて困っています。

簡単に設置できるものでお勧めないでしょうか?

806 :Name_Not_Found:2016/10/23(日) 12:52:44.14 ID:???
>>805
ここはそういうスレじゃありません。

自動で流れるスライドショーを
jQueryだけを使って自分で作るスレです。

設置して終わるなんてものは、自分で探せ

807 :Name_Not_Found:2016/10/23(日) 13:01:10.49 ID:???
$.Deferred().resolve().then(function(){
var call = arguments.callee;
$.ajax({url: url, data: data}).then(function(){});
}).then(call);

'use strict'にて書き直したいのですがこの場合
arguments.calleeはどのようにすれば良いのでしょうか?

808 :Name_Not_Found:2016/10/23(日) 13:06:34.76 ID:???
>>807
その意味不明なサンプルは何だ?
関数の中でcall使ってないし、
定義されてないcall使ってるし。

もう少しまともで必要最低限なコードにしてから来い
バグってるもの持ってくるな

809 :Name_Not_Found:2016/10/23(日) 13:09:42.50 ID:???
>>806
テンプレに書いてあったね
ごめんね

810 :Name_Not_Found:2016/10/23(日) 13:13:34.04 ID:???
>>808
$.Deferred().resolve().then(function(){
var call = arguments.callee;
$.ajax({url: url, data: data}).then(function(){
}).then(call);
});

間違っていました
ご教授の程宜しくお願い致します

811 :Name_Not_Found:2016/10/23(日) 13:15:00.88 ID:???
>>808
> ご教授の程宜しくお願い致します
ご教示の程宜しくお願い致します

812 :Name_Not_Found:2016/10/23(日) 13:47:09.59 ID:???
>>810
関数に名前つけてあげればええねん
$.Deferred().resolve().then(function call(){
$.ajax({url: url, data: data}).then(function(){
}).then(call);
});

813 :Name_Not_Found:2016/10/23(日) 14:01:53.09 ID:???
>>812
ああ、なるほど
簡単に考えれば良かったんですね
迅速なご返答ありがとうございました

814 :Name_Not_Found:2016/10/23(日) 15:34:08.55 ID:???
https://jsfiddle.net/1rq466sg/
後学のために>>805

815 :Name_Not_Found:2016/10/23(日) 15:44:25.19 ID:???
var obj = { a: 1, b: 2 };
function func() {
console.log(this); // { a: 1, b: 2 }
};
func.call(obj);

strictモードの場合、func内でthisを使用しても良いのでしょう?
又、this以外で参照する方法は他にあるでしょうか?

816 :Name_Not_Found:2016/10/23(日) 15:44:29.89 ID:???
多用するのでアイコン取得関数を作成しようと思います。

function loadingIcon() {
return '<i class="fa fa-spinner fa-spin fa-fw"></i>';
}

これはhelper.jsなどにそのまま記載し、使用するのがベストでしょうか?
それとも何かでラップしたほうがよいのでしょうか

817 :Name_Not_Found:2016/10/23(日) 16:09:02.32 ID:???
>>815
普通に参照すればいい。

var obj = { a: 1, b: 2 };
function func() {
 console.log(obj); // { a: 1, b: 2 }
};
func();

thisを使ってはいけないなんてルールは存在しない。

818 :Name_Not_Found:2016/10/23(日) 16:10:27.56 ID:???
>>816
HTML上にそのまま書くのがベスト
JavaScriptを使うところじゃない。

819 :Name_Not_Found:2016/10/23(日) 16:11:49.18 ID:???
>>814
俺ならこう書く

(function loop() {
 $('ul').animate({left: '-250px'}, {
  duration: 10*1000,
  easing: 'linear',
  done: function() {
   $(this).css({left: 0})
   loop();
  }
 });
})();

820 :Name_Not_Found:2016/10/23(日) 16:25:21.87 ID:???
>>819
https://jsfiddle.net/1rq466sg/1/
ありがとうございます
アップデートしました>>814

821 :Name_Not_Found:2016/10/23(日) 16:28:57.12 ID:???
訂正>>820,814
https://jsfiddle.net/23md1mtx/

822 :Name_Not_Found:2016/10/23(日) 17:15:55.55 ID:???
>>817
ありがとうございます
call()の必要ないってことですね?
普通に解決しました

823 :Name_Not_Found:2016/10/23(日) 21:28:21.32 ID:???
>>818
動的にテキスト(アイコン含)を切り替えているのですが、
HTML上にそのまま書く、という手法はどうすればいいのでしょう?

824 :Name_Not_Found:2016/10/24(月) 15:44:57.63 ID:???
>>777
飛ばす必要無いだろ。

825 :Name_Not_Found:2016/10/24(月) 22:52:50.15 ID:???
>>823
動的に切り替えてる所に入れれば良いだけ

826 :Name_Not_Found:2016/10/24(月) 22:53:20.02 ID:???
>>824
うるせーよ。解決済みにレスすんな

827 :Name_Not_Found:2016/10/29(土) 17:42:39.09 ID:X//ohM45
質問です
ondropでローカルファイルをブラウザにドロップした時のファイル名はevent.originalEvent.dataTransfer.filesで取得可能なのですが
ドラッグ中のファイル名、もしくは拡張子を取得するにはどうすればいいのでしょうか?

検証してみましたがonDragEnter onDragOver onDragLeaveのeventにはそもそもファイル情報が入ってないみたいなので

828 :Name_Not_Found:2016/10/29(土) 17:45:16.31 ID:???
セキュリティ上問題があるから不可能。さっさとあきらめなさい

829 :Name_Not_Found:2016/10/30(日) 07:45:43.75 ID:???
twitterだと画像かその他ファイルかは判別可能だな
調べる気しないけど

830 :Name_Not_Found:2016/10/30(日) 09:39:53.07 ID:???
ファイル の mime type は
event . dataTransfer . items[n] . type
から得られる

831 :Name_Not_Found:2016/10/30(日) 10:29:22.59 ID:???
ajaxについて教えてください。

<ajax側>
$.ajax({
url:

832 :Name_Not_Found:2016/10/30(日) 10:29:45.93 ID:???
切れてしまいました、すみません。
ajaxの文字変換について教えてください。

<ajax側>
$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: {name:encodeURIComponent("あ")},

<servlet側>
public class Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("Windows-31J");
String temp = request.getParameterValues("name");


とすると、servlet側変数tempには「あ」ではなく「%E3%81%82」が
格納されてしまいます。
おそらく文字コード変換或は設定がうまくいっていないと思うのですが、
「あ」とするにはajax側の送信時にencodeURIComponentのほかに
考慮が必要だったりするのでしょうか。

833 :Name_Not_Found:2016/10/30(日) 10:53:42.08 ID:???
data: {
name: "あ"
}

834 :Name_Not_Found:2016/10/30(日) 11:21:57.37 ID:1gWgcdxy
>>829>>830
ありがとうございます!解決しました!!
ドラッグ&ドロップ今まで学んだことが無く何日間も悩んでた事なのでレスじゃ言い表せない程の感謝です

835 :Name_Not_Found:2016/10/30(日) 13:18:06.76 ID:aZS0n4mV
>>832
あほか。

答え言う前に聞くわ

encodeURIComponentは何の目的でやってんの?

836 :Name_Not_Found:2016/10/30(日) 13:24:17.99 ID:???
>>832 ← あ、バカ発見

837 :Name_Not_Found:2016/10/30(日) 14:36:41.10 ID:???
jQueryだと親切にencodeURIComponentを勝手にしてくれるんだな

838 :Name_Not_Found:2016/10/30(日) 14:57:11.70 ID:???
>>833,835,837
よくわかってなくてすみません。
最初、name: "あ"とやっていたんですが、
サーブレット側には文字化けしてわたっていました。
そこで、自分なりに調べたところ、
「jQuey日本語リファレンスをみると、サーバに送信するデータは
クエリー文字列に変換されてGETリクエストとして付加されるとあったので、
URLエンコードは自動的にやってくれると思いましたが、
POSTの場合はこちらで変換した値を指定してあげないとダメ。」
という解説があり、またencodeURIComponentをつけてやれば文字化けは発生しないとの
サイトがあった為付与していました。
encodeURIComponentはURLに変換する関数であることは
認識していたのですが、どうやっても解決せず困っている次第です。

839 :Name_Not_Found:2016/10/30(日) 15:10:19.68 ID:???
>>838
jQuey日本語リファレンスは絶対に見てはいけないサイトだ。
あそこに書いてあるのは古くて今は使えないものばかりだからだ。
ネットから消し去りたいものの一つ。

840 :Name_Not_Found:2016/10/30(日) 15:11:51.25 ID:???
jQueryの日本語の情報を調べたいならこっち

js STUDIO
http://js.studio-kingdom.com/jquery/

841 :Name_Not_Found:2016/10/30(日) 17:32:36.81 ID:???
News

2013.03.13
ver1.9の内容に更新しました。

842 :Name_Not_Found:2016/10/30(日) 18:04:48.92 ID:???
jQueryの日本語サイトはどこも遅れてるね。js STUDIOが一番マシな部類。
最新情報を見たいなら公式サイトみて、どうぞ
http://api.jquery.com/

843 :Name_Not_Found:2016/10/30(日) 18:26:14.55 ID:???
こんなのでもまとめてる人いるんだなw

jQueryのバージョン1.9での変更点・違いのまとめ。IE8対応だが,1.8とはAjax等のAPIが異なり,プラグインが動かない問題が多発。リファレンスは2.0と共通
http://computer-technology.hateblo.jp/entry/20150705/p1
> 1.8からは大きく変わっているが,1.9から先は大きな変更はない。
> なので,1.9のリファレンスとして, 2.0や1.10の資料を流用できる。

俺のように昔から使ってきた人ならわかってること何だが、
1.8と1.9で大きな変更が入っているんだよ。

> live(), die() がなくなり,on(), off() へ完全に移行。
> attr() や prop() の挙動が変わっている。
これとかね。

そのあとはバージョン番号で迷走があって1.1x とか 2系とかできたり
サポートブラウザ切り捨てて3.0がでたりしたけど、API的には大きな変化はない。

1.9対応だからjs STUDIOはまだ使える。でもキモいうさぎみたいなやつが
いるあれは1.4という古代のバージョンのことしか書かれてない。
初期のSEOがうまく行ったせいで未だに上位にランキングしてるが
絶対に参考にしてはいけないサイトだ。害悪でしかない。

844 :Name_Not_Found:2016/10/30(日) 18:40:48.59 ID:???
ついでにまとめておくかw

1.8 → 1.9 では大きな変化が有った。

【2013年5月】1.9の次は1.10 & 2.0。これは殆ど変わっていない。

http://computer-technology.hateblo.jp/entry/20150703/p2
> jQuery バージョン 2.0と1.10での,変更点のまとめ。
> 1.9とAPIは同じ

【2014年1月】次の1.11 & 2.1 も変わっていない。
http://computer-technology.hateblo.jp/entry/20150703/p1
> APIは前のバージョン(1.10, 2.0)と変わらない。

【2016年1月】 次の1.12 & 2.2 はマイナーな機能が増えている程度
http://jquery-workshop.hatenablog.com/entry/2016/01/14/jQuery_2.2_/1.12_%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E6%A6%82%E8%A6%81

【2016年6月】 そして次が最新の3.0
http://qiita.com/fmy/items/345a264a1cf2e2a73f62
ここは結構変更点が多いけど、それまでの変化は少なかったから、
1.9との違いがこれだけといっていいぐらいなんだよ。

845 :Name_Not_Found:2016/10/30(日) 19:00:50.95 ID:???
みなさん、いろいろありがとうございました。
丁寧にまとめまでしてもらいまして・・・
jsstudioを参考にし、project:encodeURIComponentを削除することと、
servlet側の文字コードにUTF-8を設定することで、難なく解決しました。
参考にしているサイトがよくなかったのですね。

別件なんですがもう一点質問させてもらってもよろしいでしょうか。
ajaxのdataに変数の配列を設定することはできるのでしょうか。
以下のようなイメージです。

<ajax側>
var moji_array = new Array(99);
moji_array[0]="あ";
moji_array[1]="か";
   ・
   ・
moji_array[n]="わ";


$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: {name:moji_array},


name:moji_arrayを
name:moji_array[]
にしてもできませんでした。
変数の配列を送信することはできるのでしょうか。

846 :Name_Not_Found:2016/10/30(日) 19:14:08.39 ID:???
ヒント:JSON

847 :Name_Not_Found:2016/10/30(日) 19:42:57.81 ID:???
>>845
配列を渡すという仕組みはHTTPの仕様にはない。
キーと値の組み合わせ(ただし同じキーを使うことは可能)
これしかないんだよ。

だからPHPやRailsでは、キーに names[] という風に[]をつけることで
namesは配列だよ。そして複数同じキーがあるよ。という
特殊ルールを作ってる。

Javaの場合はしらん。これはJavaScriptやjQueryの話ではない。

848 :Name_Not_Found:2016/10/30(日) 19:55:39.85 ID:???
>>845
$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: {
"name[]"': moji_array
},

849 :Name_Not_Found:2016/10/30(日) 21:34:24.05 ID:???
>>846,847,848
お返事ありがとうございます。
>>848さんのやり方で無事できました!
ありがとうございました!

850 :Name_Not_Found:2016/10/30(日) 22:54:08.04 ID:???
こんばんわ
var timer_id = setInterval(function(){
を用いて、5秒ごとにDBから値を取得し、画面に
表示させるページを作ろうとしています。
そこで質問なのですが、EL式でDBを参照するのも
指定した秒数ごとに参照しにいってくれるのでしょうか。

<script>
var kurikaesi = 0;
var timer_id = setInterval(function() {
kurikaesi++;
<sql:query var="result2" dataSource="${db}">
SELECT * from TEST
</sql:query>
<c:forEach var="row2" items="${result2.rows}" varStatus="status">
$('#result1').html('${row2.STATUS}');
</c:forEach>
$('#result2').html(kurikaesi);
}, 5000);
</script>
※SQLで抽出される件数は1件。

上記のスクリプトを作成したところ、result2は5秒ごとに値がカウントアップ
されていくことを確認しました。
しかし、result1は最初の5秒経過時にDBの値で表示が置き換わることは
確認できたのですが、その後DBを直接編集し値が画面に反映されるのを
まったのですが、一向に変わりませんでした。
5秒経過後にDBの値で置き換わる為、DB参照をしにいっているとは思うのですが、
result1が変更されないのは、なぜなのでしょうか。

851 :Name_Not_Found:2016/10/30(日) 23:29:34.18 ID:???
>>831-832
2chのバグだろう

書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
" の代わりに、\" とエスケープすれば、どうだろう?

852 :Name_Not_Found:2016/10/30(日) 23:38:35.30 ID:???
DBを本当に更新しているのか?

$('#result1').html('${row2.STATUS}');
の下に、console.log(変数名)を書いて、変数を5秒ごとに確認すれば?

853 :Name_Not_Found:2016/10/31(月) 03:42:52.37 ID:???
>>850
JavaScriptに別の言語を混ぜてはいけない
そんなことをしてもうまく動かないのは当たり前

854 :Name_Not_Found:2016/10/31(月) 12:38:08.14 ID:???
jsで2つのインスタンスが同じclassであることを確認する方法を教えて下さい
instanceof だと特定のclassってことしか確認できないですよね

855 :Name_Not_Found:2016/10/31(月) 12:41:12.57 ID:???
>>854
「同じclass」の定義を詳しく

856 :Name_Not_Found:2016/10/31(月) 12:47:52.67 ID:???
>>854
というか、jQueryの質問ではないのでjsスレで質問したら?
勿論、>>855の件も補足した上で


+ JavaScript の質問用スレッド vol.122 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1472426483/

857 :Name_Not_Found:2016/10/31(月) 13:00:00.54 ID:???
>>856
すいません。そうします

858 :Name_Not_Found:2016/10/31(月) 21:38:34.83 ID:???
別にここはJavaScriptのスレでもあるから間違いではないよ。

>>854
二つのインスタンスが同じかどうかであれば、
===で比較すれば良い。おそらくあんたが欲しがってる答えはこれだろう?

instanceofは特定のクラス、またはそのサブクラスかどうかを調べるもの。

インスタンスからクラス名を知りたいのであれば
obj.constructor.nameかな。

ただし少し注意が必要
http://blog.livedoor.jp/dankogai/archives/51756459.html

859 :Name_Not_Found:2016/10/31(月) 23:47:05.84 ID:???
互換性のない2つの話題を同じスレで扱うべきではない

860 :Name_Not_Found:2016/11/01(火) 01:48:59.00 ID:???
明らかにスレタイが悪い
勘違い↓質問者がここでJavaScriptの質問することを狙っているようにしか見えん

861 :Name_Not_Found:2016/11/01(火) 09:56:10.48 ID:???
>>857
JavaScript & jQueryやからええんやで
JavaScriptを抜きにしてjQueryは在り得へんさかいな

862 :Name_Not_Found:2016/11/01(火) 10:25:54.58 ID:???
jQueryを抜きにしてJavaScriptは在り得るので混在を是とする論拠にならない
情報集積の場という専スレ本来の観点から言っても
情報が分散するような形態は利用者にとってメリットがないので避けるべき

863 :Name_Not_Found:2016/11/01(火) 10:47:20.88 ID:???
プログラム板に行かはったらどうどす?
jQueryにはJavaScriptは不可欠なんやさかいな

864 :Name_Not_Found:2016/11/01(火) 11:03:13.36 ID:???
JavaScriptにはjQueryが不可欠でないが

865 :Name_Not_Found:2016/11/01(火) 11:16:03.58 ID:???
>>854はプログラム板で解決したようだ
しかし、>>863>>862の指摘を全く理解してないな

866 :Name_Not_Found:2016/11/01(火) 11:36:10.16 ID:???
>>864
誰がそんなこと言うたんや?
ほんまアホやなw

867 :Name_Not_Found:2016/11/01(火) 12:16:58.66 ID:???
>>866
あなたが頓珍漢な論を繰り出すからなんだが
「jQueryにはJavaScriptは不可欠」は否定しないが、>>854はjQueryの質問ではないからその論理は無関係だろう
「JavaScriptにはjQueryが不可欠でないので>>854はこのスレで扱うべきではない」という論に何か反論があるのかね?

868 :Name_Not_Found:2016/11/01(火) 12:36:24.67 ID:???
>>866はjQueryを使わないとHello worldも表示できないくらい馬鹿ってこった

869 :Name_Not_Found:2016/11/01(火) 13:21:37.78 ID:???
constructorのリスクは向こうのスレで指摘されている通りだが、>>858は更にFunction#nameを紹介する愚を犯してるな
関数名なんてスコープが違えば同じ名前が存在しうるとか、Function#nameがNon-Standardな古い記事を持ち出すとか、jQueryだけを触ってるからESの知識が身に付いてないんじゃないか
https://tc39.github.io/ecma262/#sec-function-instances-name

870 :Name_Not_Found:2016/11/01(火) 14:57:05.51 ID:???
>>867
jQueryを使ったら一行でもJavaScriptの標準API使ったらあきまへんの?
ここが嫌でおしたらプログラム板に行けばええやおまへんかいな
ほんまけったいなこと言いはりまんな
ほっほっほっw

871 :Name_Not_Found:2016/11/01(火) 15:09:44.62 ID:???
>>870
それはjQueryでコードを書く場合の話だろう?
あなたがjQueryを書くことは自由であり、それを止めるつもりは毛頭ない
「JavaScriptの質問をここですべきか、専用スレですべきか」の本題からずれた方向に論点をずらして「別スレに行け」とは勘違いも甚だしい

872 :Name_Not_Found:2016/11/01(火) 15:15:20.97 ID:???
>>871
JavaScript & jQuery 質問用スレッド
おまはんのような制限は毛根もおまへんで
ここはおまはんのブログとちがうえ〜w

873 :Name_Not_Found:2016/11/01(火) 15:18:15.76 ID:???
& は and な

874 :Name_Not_Found:2016/11/01(火) 15:43:42.69 ID:???
"JavaScript &" はスレをたてる時に>1がタイトルだけ勝手に改変しただけ
テンプレを変えてないからここはまだjQueryスレだと思うけどね

> ここはおまはんのブログとちがうえ〜w
それはあなた自身にはあてはまらないのかな

875 :Name_Not_Found:2016/11/01(火) 15:49:21.19 ID:???
>>871は遠回しにスレタイからJavaScript外せって言ってるんだよ
ちょうどいい頃合いだし
ついでにIDも出せってな

876 :Name_Not_Found:2016/11/01(火) 15:50:26.05 ID:???
>>871じゃなくて>>872だわ

877 :Name_Not_Found:2016/11/01(火) 16:04:27.48 ID:???
> ここが嫌でおしたらプログラム板に行けばええやおまへんかいな
ここは俺様の城だから嫌なら出ていけ、といっているように聞こえる
自分一人で管理してるつもりなんかな

878 :Name_Not_Found:2016/11/01(火) 16:18:21.43 ID:???
jQuery使いが気になって仕方がない粘着が湧いてきたなw

879 :Name_Not_Found:2016/11/01(火) 16:23:13.56 ID:???
論理的思考を持たない人に何をいっても無駄、という典型事例かな

880 :Name_Not_Found:2016/11/01(火) 16:38:06.18 ID:???
論理的にjQueryとJavaScript標準APIの共存は可能であり
また、共存させてはいけないルールは存在しない
個人のローカルルールは知らんがな

881 :Name_Not_Found:2016/11/01(火) 16:44:08.11 ID:???
コーディングルールと質問スレのルールを混同している人がいるっぽい

882 :Name_Not_Found:2016/11/01(火) 17:23:41.70 ID:rQ8R+mQH
あれ久々に来たら荒れてるのね。
流れ見たけど、スレタイと>>1は戻したほうが良いと思う。

以前はこんなスレタイだった
【jQuery】JavaScript ライブラリ総合質問所 vol.1
【jQuery】JavaScript ライブラリ総合質問所 vol.2
【jQuery】JavaScript ライブラリ総合質問所 vol.3
jQuery ライブラリ 総合質問所 vol.4
+ JavaScript & jQuery 質問用スレッド vol.5 +
+ JavaScript & jQuery 質問用スレッド vol.6 + (今)

経緯としては、元々はjQuery以外も含めたライブラリ総合質問スレだったけど、回答者もいないのでjQueryだけになって今に至った
・JavaScriptは検索用に残す
・ライブラリは自明なので省く
・変な装飾は外す
・「質問スレッド」はvol.1に敬意を表して「質問所」とする
とうことで

【JavaScript】jQuery質問所 vol.6

でいいと思う。
>>1も長ったらしくてわかりづらい。顔文字も鬱陶しい
vol.5の
http://echo.2ch.net/test/read.cgi/hp/1452081417/1
これでいいと思う。

883 :Name_Not_Found:2016/11/01(火) 17:27:45.93 ID:???
jQuery 質問用スレッド vol.◯ でいいんだよ

884 :Name_Not_Found:2016/11/01(火) 21:19:07.49 ID:???
jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供
http://www.publickey1.jp/blog/16/jquery_30ajax.html


2006年1月にjQueryが初めて世の中に登場してから10周年となる今年。jQuery 3.0の正式版が登場しました。

jQuery 3.0 Final Released! | Official jQuery Blog
これまでjQueryは、、モダンブラウザのみをサポートすることで軽量化と安定化をはかった
「jQuery 2.x」系と、Internet Explorer 8以前を含む古いバージョンのブラウザまで
サポートする互換性重視の「jQuery 1.x」系の2系統が存在しました。

また、フル機能のjQuery 3.0のほかに、Ajaxの機能を省略して軽量化したスリムビルド版のjQuery 3.0の提供が行われます。

Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules.

通常バージョンとしてAjaxやエフェクトモジュールなどを含んだjQueryと同時に、これらを外した“スリム”バージョンも提供する。
最近のWebアプリケーションではjQueryのAjaxを使うことは少なくなったと思われますので、スリム版のjQueryで十分だという開発者も多いでしょう。圧縮後のサイズは通常版が30kbなのに対し、スリム版は23.6kb。

885 :Name_Not_Found:2016/11/01(火) 22:15:11.61 ID:rQ8R+mQH
>>883
そこまで行くなら”用”も抜きたいな
jQuery 質問スレッド vol.◯

886 :Name_Not_Found:2016/11/01(火) 22:19:03.21 ID:???
ajaxって使う?
jQuery覚えたてのk路は楽しくてよく使ってたけど、なんかめんどくさいだけという結論に達した
特にページ遷移後にDOMの変更がすべて消えるのが困る

887 :Name_Not_Found:2016/11/01(火) 22:38:43.97 ID:???
>ページ遷移後にDOMの変更がすべて消える
URLにパラメータ渡してあげればいいだけの話では・・?
もしくはjavascriptだけでやりたいのなら、変更パラメータを渡して再描画するとか

888 :Name_Not_Found:2016/11/01(火) 22:47:16.95 ID:???
>>887
すまん、戻るボタンの時ね
Twitterがまさにそうで、
別ページ→Twitter
でTwitterでログをajaxで読んだ後、別ページに戻り、再度Twitterにalt+右キーで進んだ時に読み込んだログが消えている
この問題で色々悩んだけど、ページャーの方が早いって結論に達した。

889 :Name_Not_Found:2016/11/01(火) 23:22:38.89 ID:???
>alt+右キーで進んだ時に読み込んだログが消えている
twitterのは単に仕様なだけ(過去ツイートを多く読み過ぎている時の弊害)なので
なにもtwitterの真似をする必要はない
twitterもその気になれば、ツイート時間の差分を渡すことで、F5押そうがalt+右キー押そうが、
一度開いた差分ログを消さずに表示させることが可能
その代わりトラフィックが倍どころか何十、何百倍にも膨れ上がり自滅する
ajaxは動的ページ遷移目的だけじゃないので(ページャの方が早いという理屈はよくわからないが)もちろん静的ページ実装で問題なし

890 :Name_Not_Found:2016/11/02(水) 03:08:55.80 ID:???
>>885
荒らしが昨日付けでこっそり7スレ目を重複立てしてるから
もうアンタもアンタのスレタイ&テンプレ案で7スレ目を立ててきていいぞ
支持するから

891 :Name_Not_Found:2016/11/02(水) 11:55:32.92 ID:???
立てた。基本は>>882だが、jQuery推しの売り文句は抜いた。

jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/

892 :Name_Not_Found:2016/11/02(水) 12:03:26.79 ID:A20lKAfd
>>881

このスレの>>1ほんま気持ち悪かった

893 :Name_Not_Found:2016/11/02(水) 12:08:50.75 ID:???
>>828のあほさが目立つ

894 :Name_Not_Found:2016/11/02(水) 14:19:55.44 ID:???
属性セレクタで、要素名で取得することってできますか?

//例として、formの送信ボタンならこれで取得できる
$('[type="submit"]');
//クラスでもこれで取得可能
$('[class="class_name"]');
//bodyを取得したい時は?
$('[elementsname="body"]'); //無い

属性セレクタの中で要素名で取得したい場面がありましたが、無理でしょうか
無理なら素直に
$('body')
を使います

895 :Name_Not_Found:2016/11/02(水) 14:52:12.13 ID:???
>>894
無理
element.tagNameみたいにプロパティで取得するなら可能だけど
というか、属性セレクタで要素名を指定したい意図が分からん

896 :Name_Not_Found:2016/11/02(水) 14:55:35.87 ID:???
>>894
$('body') を使用して下さい

897 :Name_Not_Found:2016/11/02(水) 15:52:11.80 ID:???
>>895-896
ありがとうございます。
$('body') でいきます。

>>895
ブラウザinput要素を使ったデバッグを試していたんです。
これ自体微妙ですが、そこは見逃して下さい。あくまで試験的にやっていることなので
(普段は開発ツールやコンソールを使っています)

var foo,bar;
foo = $("input.foo").val();
bar = $("input.bar").val();
$("button").click(function(){
//何かさせる
$('['+foo+'="'+bar+'"]');
});

属性セレクタに要素名使えたら統合できて便利と思ったのですが、無理なら諦めます。

898 :Name_Not_Found:2016/11/02(水) 16:16:23.27 ID:???
>統合できて便利と思った
ってことは、$('['+foo+'="'+bar+'"]');の形を崩さずそのまま再利用できて便利ってことかな

単に、セレクタに○○=要素名の形式があるかないかを知りたいのだろうかと思ったけど
分岐してコードが長くなるのが嫌ってことなのか
だとしたらvar fooだけにして入力を「class class_name」や「body」にして
あとは成形なり分岐なりすればスッキリすると思うけど

899 :Name_Not_Found:2016/11/02(水) 16:31:25.50 ID:???
>>897
その前提だと class="hoge fuga" に対して bar === "hoge foo" の指定を強制して bar === "hoge" でマッチしないという融通のきかなさがあるよね
属性セレクタが [att~=val] にスイッチ出来るならいいと思う
(一応、foo === "class~", bar === 'hoge' で出来るけど、もやもやする仕様だ)
汎用性を高めるなら、タイプセレクタ用の input要素を増やすか、セレクタ文字列指定用のinput要素にする方向がいいと思うなあ
あと、"[]" 等の予約文字とかも使えるようにエスケープ処理が入っているのか、とか細かい仕様が気になる

900 :Name_Not_Found:2016/11/02(水) 16:43:45.19 ID:???
https://jsfiddle.net/rm4qjhmg/
ex) body, input, id foo, class hoge, class fuga, alt puu, #foo, .hoge, .fuga
などに対応

901 :Name_Not_Found:2016/11/02(水) 16:47:19.34 ID:???
>>900
仕様が分かりにくい&空白を含む属性値を指定できない

902 :Name_Not_Found:2016/11/02(水) 17:10:01.95 ID:???
>空白を含む属性値を指定できない
はclass hoge hoじゃなくて.hoge.hoで、
class以外の空白属性は知らん

903 :Name_Not_Found:2016/11/02(水) 17:24:20.80 ID:???
alt,title,data-*属性など、空白を含む余地のある属性は結構あるな
あと、空白が3つ以上あるセレクタ(ex: body #hoge .foo)も指定できないな

904 :Name_Not_Found:2016/11/02(水) 17:31:38.21 ID:???
900ではないが、こんなところかね(細かい仕様は煮詰める余地があるだろうが)
https://jsfiddle.net/c0wdu24t/

905 :Name_Not_Found:2016/11/02(水) 23:22:16.65 ID:???
>>897
何をやりたいの全然わからないが、デバッグ?なら
エンドユーザーじゃなくて開発者が使うものだろ?

ならコレでいいじゃん

var selector = $("input.selector").val();
$("button").click(function(){
 //何かさせる
 $(selector);
});

属性セレクタだけじゃなくてセレクタで使えるものはなんでもできる

906 :Name_Not_Found:2016/11/02(水) 23:40:56.86 ID:???
[] や = を入力する手間を惜しんで>>897の仕様になっているのだと思った
まあ、汎用性が犠牲になっている感は否めないので、>>904が比較的いい妥協点なんじゃないかね(セレクタ使えるし)

907 :Name_Not_Found:2016/11/03(木) 08:32:23.13 ID:FerPc7S6
誘導ありがとうございます。
質問お願いします。

スライドショーの上に常に違う画像を重ねて表示させたく
https://allabout.co.jp/gm/gc/417216/2/
を参考にしてスライドショーはできたのですが
上に画像を重ねる方法がわかりませんでした。
知恵袋で似てる質問はあったのでチャレンジしてみたのですが
上記のサイトとは違うコードの組み方のようで結局出来ずに終わりました。

ほとんど調べながらコピペしてる状態の初心者なので、初歩的な質問かもしれませんが
もしご存じの方がいらっしゃいましたら教えていただきたいです。
また、解説してるサイト等ありましたら貼っていただけると助かります。

よろしくお願いします。

908 :Name_Not_Found:2016/11/03(木) 08:33:08.51 ID:???
>>907
z-indexで重なり順を指定すると書いてあるじゃない
再現可能なコードも出てないし、これ以上は答えようがない
https://developer.mozilla.org/ja/docs/Web/CSS/z-index

909 :Name_Not_Found:2016/11/03(木) 09:13:59.41 ID:FerPc7S6
>>908
ありがとうございます

重ねる画像のclassの分け方が悪かったようで先ほどできました。
貴重なスペースありがとうございました。

910 :Name_Not_Found:2016/11/03(木) 11:16:28.07 ID:???
まあスペースは貴重でもなんでもないけどなw

911 :Name_Not_Found:2016/11/03(木) 11:27:03.65 ID:???
貴重なスペースか・・・
今の時代だと垂直タブとかはまず見ることもないし
希少性バツグンだと思う
チャンスがあればどんどん使っていきたいスペースのひとつ

912 :Name_Not_Found:2016/11/03(木) 12:01:26.55 ID:???
スレ汚しすみませんでした的な意味だと思ったけど違うのか

913 :Name_Not_Found:2016/11/03(木) 13:21:30.43 ID:???
$.ajax( ...
だとsuccessとerrorの場合の処理を分けられますが、
$.post( ...
の場合にはそれが出来ないようですが、なぜですか?
失敗した場合の処理をしたいのですが

914 :Name_Not_Found:2016/11/03(木) 13:33:32.47 ID:???
Promise interface を使ってできるだろ

915 :Name_Not_Found:2016/11/03(木) 14:07:24.16 ID:???
javascriptで田中哲スペシャルは使えますか?

916 :Name_Not_Found:2016/11/03(木) 14:15:52.63 ID:???
z-indexって使いますか?
ハック目的、まぁブラウザの不具合解消のために使うことはありますが、
position;absoliteなどと合わせて使うことってありますか?

917 :Name_Not_Found:2016/11/03(木) 14:39:53.82 ID:???
>>916
使います

918 :Name_Not_Found:2016/11/03(木) 14:47:29.18 ID:???
>>914
初心者なので出来ればサンプルコードを教えてください。

919 :Name_Not_Found:2016/11/03(木) 15:04:00.68 ID:???
プルダウンメニューとか?

920 :Name_Not_Found:2016/11/03(木) 15:08:35.96 ID:???
>>918
https://jsfiddle.net/u7Ls2xk0/

921 :Name_Not_Found:2016/11/03(木) 15:09:00.74 ID:???
>>917
まじっすか・・ちょと勉強します

922 :920:2016/11/03(木) 15:10:13.27 ID:???
すまん安価917と勘違いしたw

923 :Name_Not_Found:2016/11/03(木) 15:48:05.62 ID:???
>>918
jQueryのサイトに書いてあるよ。
探してきてここにリンク張って!

924 :Name_Not_Found:2016/11/04(金) 20:29:25.79 ID:COdJj0j9
domの判別関数とか作ったんですけど
dom_hanbetsu = functionみたいなローマ字使うのはよくないと最近思ったので
こういう場合どういう名称がいいんでしょうか?

925 :Name_Not_Found:2016/11/04(金) 21:24:46.98 ID:???
is_dom_elem

926 :Name_Not_Found:2016/11/04(金) 21:56:26.72 ID:???
isDom

927 :Name_Not_Found:2016/11/04(金) 22:42:26.63 ID:???
>>924
getNodeType

928 :Name_Not_Found:2016/11/04(金) 23:07:50.66 ID:???
>>924
domHanketsu

929 :Name_Not_Found:2016/11/04(金) 23:12:38.00 ID:???
DOMはモデル概念じゃない?
isElementとかisDocumentとかisNodeとかが妥当だと思う
isDOMObjectならギリ分かる

930 :Name_Not_Found:2016/11/04(金) 23:13:27.80 ID:???
isDOMObject
DOMの後にOと大文字続くの気持ち悪いな
仕方ないけどね

931 :Name_Not_Found:2016/11/04(金) 23:48:03.47 ID:???
isDomObjectでいいやん

932 :Name_Not_Found:2016/11/04(金) 23:49:45.63 ID:???
>>931
略称なのに?

933 :Name_Not_Found:2016/11/04(金) 23:53:59.80 ID:???
そうやって硬い頭してるから、
iPhoneとかいう素晴らしいネーミングが
思いつかないんだよw

934 :Name_Not_Found:2016/11/05(土) 00:12:28.81 ID:???
iPhoneが素晴らしいネーミングかはさておき、DOMの判別関数ではどう判別するのか不明なのでisDomObjectが正しいのか分からん
DomObjectもどのインターフェースまで含むのか曖昧だしな

935 :Name_Not_Found:2016/11/05(土) 01:01:10.93 ID:???
isNode ?

936 :Name_Not_Found:2016/11/05(土) 01:48:12.65 ID:???
DOMParserとかXMLHttpRequestとかあるやん
大文字の略語はそのままが主流だぜ

937 :Name_Not_Found:2016/11/05(土) 09:08:54.99 ID:???
iDom

938 :Name_Not_Found:2016/11/05(土) 09:25:03.03 ID:???
>>932
略称だけどDOM自体はオブジェクトを差すわけじゃないから重複せざるを得ない
isDOMObjectでもいいと思うけど、isNodeが最も綺麗だと思う

939 :Name_Not_Found:2016/11/05(土) 13:56:37.69 ID:???
dOmphone

940 :Name_Not_Found:2016/11/05(土) 14:33:21.39 ID:???
>>938
Interfaceで分けるのが美しいと思うから個人的には同意見だが、NodeListやHTMLCollectionはisNodeでは判定出来ない
「判別」の要件が不明な以上、isDOMObjectでいいのかも分からんし、いいとしてもどこまでDOMObjectとしたいのか分からんわけで質問者の情報待ちだが

941 :Name_Not_Found:2016/11/05(土) 15:10:00.73 ID:???
一つ目の機体ならDOMでいいだろ

942 :Name_Not_Found:2016/11/05(土) 15:34:11.84 ID:???
domDom

943 :Name_Not_Found:2016/11/05(土) 16:20:21.72 ID:???
hoge

944 :Name_Not_Found:2016/11/05(土) 22:19:44.93 ID:???
初心者すぎてここで良いのかわからんけど
chrome用のjsでWebAbornをベースに文字列置換したいんだけど
'[転載禁止]'
とかの "[]" がマッチしないのはなぜ?

UTF-8でエンコードして \u5Bとかでも無反応
括弧の中の文字だけしか認識しない
'\[転載禁止\]'とかエスケープしても中の文字だけしか認識しない

945 :Name_Not_Found:2016/11/05(土) 22:29:54.63 ID:???
>>944
'[転載禁止]'.match(/\[転載禁止\]/g);

946 :Name_Not_Found:2016/11/05(土) 22:40:16.55 ID:???
普通にマッチしたよ
一応確認だけど、[転載禁止]と[無断転載禁止] 間違えてない?

947 :Name_Not_Found:2016/11/05(土) 22:51:50.24 ID:???
>>945
拾ってきたjsを書き換えてるので
どこにそれを記述すれば良いかも良くわかってないレベルです

>>946
[転載禁止]と[無断転載禁止]は両方ともNGワードとしてセットしてありますが
どちらも出力される結果は[]になります

948 :Name_Not_Found:2016/11/05(土) 22:58:12.68 ID:???
拾ってきたってどこで拾ったやつ?
WebAbornでググるとトップヒットで出てくるhttp://webaborn.herokuapp.com/とは違うの? 👀
Rock54: Caution(BBR-MD5:b95868ef2c0ed5e765a4d10ada4cf289)


949 :Name_Not_Found:2016/11/05(土) 23:04:43.65 ID:???
>>948
それです
それに
[転載禁止]
[無断転載禁止]
で記述しても[]が残ってしまうので色々調べてやってみたんですが
うまくいかない

950 :Name_Not_Found:2016/11/05(土) 23:05:52.16 ID:???
>>944
いけたけど

本文中にある
[WebAbornダウンロード]
で実験
吐き出されたjsはこれ
http://www.dotup.org/uploda/www.dotup.org1056067.zip.html

951 :Name_Not_Found:2016/11/05(土) 23:08:30.04 ID:???
>>949
別に"["だろうが数値参照だろうがおなじ

もうちょい言うとxpathとかやや独特な物を使っているので、まずはjQueryやjsうぃ使って、
・配列のリスト作成
・置換
するのがいいと思う

952 :Name_Not_Found:2016/11/05(土) 23:14:06.40 ID:???
>>950
だめでした

入力し終わったら、[] ボタを押してください。
となりました

なぜかボタ "ン" まで消えてる

953 :Name_Not_Found:2016/11/05(土) 23:16:48.14 ID:???
>>951
とりあえず基本的なところから勉強してきます
ありがとう

954 :944:2016/11/06(日) 00:54:57.78 ID:???
自己解決したので報告
>>950をもう一度確認したらタイプ1の方なので[]の前後含め1行丸ごと置換され[]も消えるが
自分の望む挙動は「単語単位での置換(タイプ3の方)」なので両者を比較検討

candidates.snapshotItem(i).nodeValue = candidates.snapshotItem(i).nodeValue.replace(new RegExp(ng_words[j],"g"), abornString);

この行が原因という予測のもと検証したところRegExpの誤爆とわかりました

原因解明のきっかけになり助かりました
ありがとう

955 :Name_Not_Found:2016/11/07(月) 09:08:13.27 ID:???
<input type="file" id="f">
のファイルをjavascriptで選択させるようしたいのですが
$('#f').prop('files')[0] = file;
とやっても変更できません
どうすればいいのでしょうか?

956 :Name_Not_Found:2016/11/07(月) 09:37:42.15 ID:???
>>955
jsでファイルは変更できない
もしできてしまうと、アクセスした瞬間にPCのファイル全部抜き取るということができてしまう

ただローカルで動かす場合はローカルのファイルを取得できた気もする

957 :955:2016/11/07(月) 09:44:47.86 ID:???
>>956
ありがとう色々と納得できた
ページ開いた瞬間そんなjavascript勝手に動いたら恐ろしいもんね

958 :Name_Not_Found:2016/11/07(月) 12:18:57.52 ID:???
先日からjQueryと無関係なJavaScriptの質問が目立つが、ここはjQuery専用スレなので該当スレで質問しよう

■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5
http://echo.2ch.net/test/read.cgi/hp/1465399470/

■次スレ
jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/

959 :Name_Not_Found:2016/11/07(月) 12:41:03.15 ID:???
スレタイがややこしすぎると思う。今スレだけは我慢してみては

960 :Name_Not_Found:2016/11/07(月) 14:13:28.39 ID:???
どのみち埋めなきゃいけない

961 :Name_Not_Found:2016/11/10(木) 02:29:38.82 ID:???
Visual studio codeを使うとJavaScritpにコーディングミスの警告が出せると聞いたのですが、ググってもバージョン違いのせいかうまくいきません
最近環境を整えて方法が分かる人はいますか?

962 :Name_Not_Found:2016/11/10(木) 06:18:41.35 ID:???
しらんけどぐぐったらeslintできるようにしとかないとだめなんじゃね?
つまりコンソールでもeslintが実行できるように。
俺はそれをatomでやってるけどな。

あー、俺がVisual Studio Codeをインストールしてみれば良いのかw
eslintレベルじゃないがデフォルトでもそれなりに動いているな。
eslintはプラグインを入れれば良さそうだ。

963 :Name_Not_Found:2016/11/10(木) 06:25:55.11 ID:???
Google ChromeのTampermonkeyでコードチェックしてる俺、参上

964 :Name_Not_Found:2016/11/11(金) 23:03:04.81 ID:???
jqueryを用いてローカルネットワーク内で使用するwebページを製作しました。
アドレスをhttp://IPアドレス:ポート番号.ページ名
で表示した場合、動作はサクサク動きます。
しかし、上部にリンク用メニューページを持ってきたかった為、
フレーム分割をして、下部に作成したコンテンツページもってくると
一気に重くなり動作しなくなってしまいます。
これはなぜなのでしょうか。
また、重さを解消させる方法はないものでしょうか。

965 :Name_Not_Found:2016/11/12(土) 00:11:36.49 ID:???
メニューごときにフレームなんか使うのをやめる

966 :Name_Not_Found:2016/11/12(土) 00:17:58.44 ID:???
F12の開発者ツールを使おう

967 :Name_Not_Found:2016/11/12(土) 00:19:13.48 ID:???
>>964
多分セキュリティエラーが起こってると思う
まぁ>>966。開発ツールを見れば全部書いてる

968 :Name_Not_Found:2016/11/12(土) 09:57:02.73 ID:???
formの二重送信防止ってこんな感じで大丈夫かな?
一応chromeでは動作確認済み

$('form button[type="submit"]').on('click', function () {
$(this).prop('disabled', true).html('処理中');
$(this).closest('form').submit();
});

// $(this)2回は後で修正予定

969 :Name_Not_Found:2016/11/12(土) 13:22:09.41 ID:???
>>968
https://jsfiddle.net/pf0LrayL/

<form target=_blank action="about:blank">
<button type="submit">送信</button>
</form>

button[disabled] {
text-indent: -9999px;
line-height: 0;
}

button[disabled]::after {
content: "処理中";
text-indent: 0;
display: block;
line-height: initial;
}

$('form').on('submit', function() {
$(this).find(':submit').prop('disabled', true);
})

970 :Name_Not_Found:2016/11/12(土) 18:54:16.14 ID:???
>>968
二重送信しているようにしか読めない

971 :Name_Not_Found:2016/11/12(土) 19:40:50.11 ID:???
色々改良してこんな感じになった
ボタン幅の維持 + html5のinput requiredに対応

$('form').on('submit', function () {
var button = $(':submit', this);
var buttonWidth = button.width();

button.disableButton(true).html(loadingIcon() + '送信中').width(buttonWidth);
});

972 :Name_Not_Found:2016/11/13(日) 21:35:29.52 ID:???
>>965,966,967
ありがとうございます。
F12で調べてみます。
ちなみに、「フレームを使うのをやめる」とありますが、同一ウィンドウで
メニューとコンテンツ画面を独立させたい場合、
フレーム以外だとどんなものがありますでしょうか。

973 :Name_Not_Found:2016/11/13(日) 22:06:51.18 ID:???
>>972
position:fixedでよくね

<style>
body{
position: relative;
}
header {
border: 1px rgb(0, 128, 0) solid;
position: fixed;
height: 50px;
width: 100%;
}
article {
height: 2000px;
padding: 50px 0;
background: red;
}
</style>
<body>
<header>固定</header>
<article>コンテンツ</article>
<footer>フッター</footer>
</body>

974 :Name_Not_Found:2016/11/18(金) 12:44:24.69 ID:???
substringとsubstrとsliceの違いが頭に入りません
使おうとする度に毎回検索を強いられて面倒臭いです
覚え方を教えて下さい

975 :Name_Not_Found:2016/11/18(金) 13:01:30.06 ID:???
>>974
一番使いやすいものを中心に使う
俺はsubstringとlength、これがあればどうとでもなるからな
あとは気が向いた時に他のを使うようにすれば自然と覚えるよ

976 :Name_Not_Found:2016/11/19(土) 21:46:55.35 ID:???
バージョン1系から3系に入れ替えたら、IE11でローカルファイルを開くとAjaxが動かなくなったけど、
どうすれば良いの?サーバに入れると正常に動作するのに。

977 :Name_Not_Found:2016/11/19(土) 22:26:19.27 ID:???
1に戻せば良いんじゃないすか

978 :Name_Not_Found:2016/11/19(土) 22:26:44.59 ID:???
ローカルは色々とセキュリティに引っかかってめんどくさい

979 :Name_Not_Found:2016/11/19(土) 22:29:48.32 ID:???
>>976
1系はIEなのにどうして3系に変えるんだ?

980 :Name_Not_Found:2016/11/19(土) 23:14:45.96 ID:???
ajax関連やるならローカルにウェブサーバー立てるのが一番良い
nodeとか使ってるならワンコマンドで立てられる
簡単な作業

981 :Name_Not_Found:2016/11/21(月) 09:28:38.00 ID:???
もうES6へ移行してもいいですか?

982 :Name_Not_Found:2016/11/21(月) 09:58:07.88 ID:???
>>981
移行して良いかの判断基準を自分で決めましょう

983 :Name_Not_Found:2016/11/21(月) 10:07:44.39 ID:???
なんでconstが変更できるんだよハゲ

984 :Name_Not_Found:2016/11/21(月) 13:18:57.46 ID:???
変更できねえよハゲ

985 :Name_Not_Found:2016/11/21(月) 14:07:21.15 ID:???
>>984
これ

http://qiita.com/takeharu/items/cbbe017bbdd120015ca0
しかし、配列(オブジェクト)やオブジェクトは気をつける必要があります。プロパティは変更可能となります。

// 直接変更は不可
const NUM_LIST = [1, 2, 3];
NUM_LIST = [5, 5, 5]; // エラー

// プロパティの変更は可能
const NUM_LIST = [1, 2, 3];
NUM_LIST[0] = 5;

console.log(NUM_LIST); // [5, 2, 3]

986 :Name_Not_Found:2016/11/21(月) 14:35:25.65 ID:???
>>985
Bugみんなもんだろw

987 :Name_Not_Found:2016/11/21(月) 14:59:01.00 ID:???
for inって非推奨なの・・?
某プログラミングスキルチェックサービスでfor in使ったら怒られたんだが

988 :Name_Not_Found:2016/11/21(月) 15:05:49.87 ID:???
>>985
ああそういうことね。
JSのconstは、ポインタが何を指すかを固定するようなものだから、値の中身は書き換えられるよ。
値の中身も固定したいならObject.freeze()を使う。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

989 :Name_Not_Found:2016/11/21(月) 15:10:10.66 ID:???
>>987
ただの配列にまで使ったら怒られるというか誤作動しうる

990 :Name_Not_Found:2016/11/21(月) 15:11:28.63 ID:???
それじゃそろそろ次

jQuery 質問スレッド vol.7 [無断転載禁止]?2ch.net
http://echo.2ch.net/test/read.cgi/hp/1478055094/

991 :Name_Not_Found:2016/11/21(月) 15:11:39.10 ID:???
うめ

992 :Name_Not_Found:2016/11/21(月) 15:11:49.05 ID:???
うみ

993 :Name_Not_Found:2016/11/21(月) 15:12:15.08 ID:???
console.log('bye world.');

994 :Name_Not_Found:2016/11/21(月) 15:12:28.21 ID:???
var e;

995 :Name_Not_Found:2016/11/21(月) 15:12:59.15 ID:???
void function(void){
void;
};

996 :Name_Not_Found:2016/11/21(月) 15:13:13.69 ID:???
return 4;

997 :Name_Not_Found:2016/11/21(月) 15:21:48.25 ID:???
>>989
誤動作する使い方があるなら教えて欲しい

998 :Name_Not_Found:2016/11/21(月) 16:05:20.65 ID:???
>>997
忘れた
ただ昔某サイトをユーザースクリプトで書き換えようと思ったら
for in使われてたせいで誤爆してアプローチの変更を余儀なくされたことは覚えてる

999 :Name_Not_Found:2016/11/21(月) 16:13:12.93 ID:???
性能を決める関数で for-in を使うのはやめよう

for-in にも使い道はあるものの, for を使うべき場面でよく誤って使われている. for-in で列挙をする前に,
スクリプトエンジンは列挙可能なプロパティのリストを作って重複を弾かなければいけない.

スクリプト側が列挙するプロパティを知っていることはよくある. こうしたプロパティをなめるならふつうの for 文が使える.
配列や, 配列風のプロパティを持つオブジェクト (DOM の NodeList? など) のように, 連番の数字なら特にそうだ.

for-in 誤用の例を以下に示す:

var oSum = 0;
for( var i in oArray ) {
oSum += oArray[i];
}

for を使う方が効率的になる:

var oSum = 0;
var oLength = oArray.length;
for( var i = 0; i < oLength; i++ ) {
oSum += oArray[i];
}

1000 :Name_Not_Found:2016/11/21(月) 16:16:40.78 ID:???
次スレ

jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/

+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/

1001 :1001:Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
life time: 163日 17時間 26分 5秒

1002 :1002:Over 1000 Thread
2ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。


───────────────────
《プレミアム会員の主な特典》
★ 2ちゃんねる専用ブラウザからの広告除去
★ 2ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
http://premium.2ch.net/

▼ 浪人ログインはこちら ▼
https://login.2ch.net/login.php

333 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)