(*･ω･*) ﾟ *｡*
*〇 〇………………………**
祝☆jQuery 3.0 リリース
ttps://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
ttp://echo.2ch.net/test/read.cgi/hp/1452081417/
ttp://jquery.com/ ・ダウンロード、CDN
ttp://jquery.com/download/ ・ブラウザサポート
ttp://jquery.com/browser-support/ ・jQuery UI
ttp://jqueryui.com/ ・jQuery UI ダウンロ－ド
ttp://jqueryui.com/download/ ・リファレンス等
ttp://js.studio-kingdom.com/jquery/ ttp://alphasis.info/jquery/ (ttp://alphasis.info/jquery-api/) ttp://www.jquerystudy.info/ 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に一本化されました。
ttps://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ Slim buildってのが追加されてるんだね。
ajaxとeffectの機能を取り除いたバージョンみたい。
サイズも20KB程度減ってる
+ JavaScript の質問用スレッド vol.120 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/tech/1463914293/
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1463395557/
JavaScript ライブラリ総合質問所 vol.4
ttp://toro.2ch.net/test/read.cgi/hp/1400809255/
上手く行きました。
皆さん優秀ですね。
ありがとうごいざいました。
もう一つ教えて下さい。
var len = $('table tr').length;
とすると行数がわかりますが、
var tbl = $('table');
の場合にも行のlengthを求めたいのですが、
var len = tbl.filter('tr').length;
var len = tbl.select('tr').length;
^^^^^^^ この部分が分かりません。
みたいなことは可能ですか？
に書いてあるよね？
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。
ttp://qiita.com/fmy/items/345a264a1cf2e2a73f62 >
> document-readyを行う方法はいくつかあります。
> $(fn);
> $().ready(fn);
> $(document).ready(fn);
> $("selector").ready(fn);
> jQuery 3.0では1つ目を推奨し、他の方法は非推奨とします。
> ちなみに下でも述べますが$(document).on("ready", fn)は僅かに意味が違っており、3.0で削除されました。
これはいい変更だな。俺は以前より短いから1番目の方法を使えって
言ってきたんだが、意外とready使うやつが多くてな。
これで$(fn)を使わせる理由ができた。
>
> この関数はセレクタ文字列に含まれるCSSで特殊な意味を
> 持つ文字(ドットやセミコロン)をエスケープしてくれます。
> 例えば"abc.def"というidを持つ要素をjQueryで取得することは出来ませんでしたが、
> この関数を使って$("#" + $.escapeSelector("abc.def"))と取得することができます。
ほー、ちょうどセレクタにこれらの文字が入っていた場合
面倒だなーって思っていたところなんだ。
ttp://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 的には何もしないのが正解なのだろうが
同期処理を非同期に変えるって、単にsetTimeoutするだけの話だし、
それは昔からやってる人は、よくバグ対策としてやってたりするｗ
そのsetTimeoutをjQuery関数の中に含まれてる処理に渡しているだけだろうし。
ありがとうございました。
jqueryUIのdatepickerをふたつ設置し、inputタグに持たせたalt属性をつかってそれぞれ異なるaltFieldを設定しようとしているのですがaltFieldそのものが動作しません。
恐らく文法がおかしいのだと思いますが、どのように変えたら動作させられるかわかる方、教えていただけないでしょうか
$( '.jquery-ui-datepicker' ) . datepicker( {
dateFormat: 'yy年mm月dd日DD',
altField: $(this).attr('alt'),
altFormat: 'yy/mm/dd'
}
} );
日付１：<input class='jquery-ui-datepicker' alt='.alt1'>
<input type='hidden' class='alt1'>
日付２：<input class='jquery-ui-datepicker' alt='.alt2'>
<input type='hidden' class='alt2'>
迷惑だからいちいち、こっちに書き込みをコピーしなくていい
質問者のためというよりはおまえさんの自己満足なんだろうがな
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
バカ
面倒だからjsfiddle用意してくれよｗ
$(this)はコールバック関数の中とかでしか使えません。
のコードは単なるオブジェクトを設定しているだけ
その場所では$(this)は使えない。（違う場所を指している）
世間を見るとeachで回して設定しているのが多いみたいだけど
一応こんな感じでできた。
ttp://jsfiddle.net/soqxay5a/ beforeShowのたびにやってるから効率は悪い。
beforeCreateみたいなのないのかな？
each使うほうがシンプルではないが効率は良い
jQuery UIのインターフェースってわかりづらくて
覚えてないんだよな。気が向いたらもっといい方法探すかも
ttps://bugs.jqueryui.com/ticket/6228 Datepicker が widget factory を使うようになれば
createイベントに対応するようだ。
だけど、jQuery UIってjQueryと違ってあまり期待できないんだよな・・・
完成度が高いわけじゃないのに進化が遅い。
ttp://jsfiddle.net/soqxay5a/1/ あとalt属性を使うのはお薦めしないかな。
そういうオレオレ的な用途にはdata-*属性を使ったほうが良いよ。
data-alt-fieldとかさ
ttps://github.com/vneri/circleDonutChart このドーナツチャート使おうと思ってますが、
右端からアニメーションスタートしてじゃなくて
よくある上から時計回りにスタートするような
アニメーションにするにはどうしたら良いですかね？
ちなみにJavaScriptは全くっと言っていいほどわかりません。
HTMLタグの<h2>内のテキストノードが空かどうかの判定ってどのように書けばよいのでしょうか。
<h2>テキスト</h2> →アリ
<h2></h2> →ナシ
$('h2:empty')で近しい事はできたのですが、
TABや空白文字は空とみなすようにすることは可能でしょうか
ここはJavaScriptとjQueryのスレなので、
どこぞのJavaScriptのライブラリはこっちで聞いて下さい。
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
CSS4なら:blank疑似クラスってのがあるんだよね。
ttps://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)；
あともう一つ。自分でセレクタを作るって手もあるよｗ
こう定義しておけば
$.extend($.expr.pseudos, {
blank: function(el) {
return $.trim($(el).text()) === '';
}
});
これが使えるようになる。
$('h2:blank')
blankという名前はCSS4にあるやつとかぶるので別名にするか、
仕様を調べてCSS4と互換性があるように作ればよい。
ttps://github.com/jquery/sizzle/issues/237 【jQuery】JavaScript ライブラリ総合質問所 vol.3
ttp://echo.2ch.net/test/read.cgi/hp/1369444026/
JavaScript ライブラリ総合質問所 vol.4
ttp://echo.2ch.net/test/read.cgi/hp/1400834117/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
■jQueryスレ
※前スレは「【jQuery】JavaScript ライブラリ総合質問 vol.3」(総合スレ)で「jQueryスレ vol.3」はない。
つまり、ライブラリスレの乗っ取り行為。
jQuery ライブラリ 総合質問所 vol.4
ttp://peace.2ch.net/test/read.cgi/hp/1400313626/
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1452081417/
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465566635/
すごい親切に有難うございます！！！！！！！
どういたしましてｗ
.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です。
createTextNodeを使ってテキストノードを作り直してるからそれじゃだめだよ。
特に古いブラウザだとtextContent自体が存在しなかったりするしね。
3.0.0ではtextContentを書き換えてるみたいだけど、意図した結果になってない。
setInterval(function () {
$('#target').text(num++);
}, 5000);
を書き換えられないならば、その方法で監視するのは不可能。
どうしてもそのコードを監視したいならjQueryのtextメソッドに
処理を割り込ませるしかないだろうね。
それをプログラム的に解除する方法を教えて下さい。
JSあるいはJQなどで。
ブラウザにデベロッパーツール（開発ツール）という機能が
標準で搭載されている。それを使うとどんなサイトでも簡単に
ソースコードを見ることができる。
また右クリック禁止やコピペ禁止サイトでも
それを可能にするプラグインがいくつもある。
それらを研究すればほかのサイトがどうやって実現しているのか
わかると思うよ。
でもDialog右上の[x]アイコン画像が出なかったり、あるいは
Dialogのタイトルバーの高さを以下の方法で変更すると
.ui-dialog .ui-dialog-titlebar
{
height: 20px;
}
変更は出来たのですが、何故か、Dialog内部の本文の部分の幅が勝手に狭くなるなど
挙動がおかしいのです。
jQueryUIは時々使うのですが、前々からこういうおかしな挙動が気になっています。
完成度が低いのでしょうか？
皆さんはそういう問題起こりませんか？
それはあんたの指定の仕方がおかしいんだろｗ
やはりそういう事ですか。
マウスのドラッグイベントを、OSに届けないように止めれば？
preventDefault, stopPropagation
よく知らないけど、他には、文章を選択できなくする機能も、あるかも
.ui-dialog
.ui-dialog-titlebar
これらで、HTML内を検索して、どういう使われ方をしているのか、研究する
$("*").on("selectstart",function(){return false;});
セレクトさせないだけならこんなのがあったはず。
あと、フォーカス外せば選択も解除できるはずだから、解除するならelement.focus()をどっか別のところでやればいいはず
独学で動けばそれでいい程度しか学んでないので、あとは詳しい人の改良待ち
全要素に対してこう言うイベント処理をすると動きが遅くなるなどの影響は出ないのですか?
ああ、別に影響出るほど重くはならないけど、処理が多くなるのはそのとおりだと思うから対象のセレクタ入れればいいよ
俺の知識は糞だから極めてる人の助言祈るかご自身で調べるか。
もしソースコードを見せたくないとか
コピペを防ぎたいってのが目的であれば
それは不可能だ。
文字コードのビープ音が仕込んであって
「ピーピー」大音量で鳴り続けるというプロテクトがあったなぁ
<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列でやりたいのです。難しいでしょうか？
根本的に間違い
レスありがとうございます。
boxでググッテも良く分かりませんでした。
boxとは何ですか？
マークアップ構造を変えるのは好ましくないので、ちょっと試してみた
（ tbody も追加したとする）
table, td, tr {
display: block;
}
tbody {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
100px は好みの高さで
情報ありがとうございました。
やってみます。
やってみました。
うまく行ったのですが一つ問題があり、
<td colspan="3">
などとしても無視されます。
50さんの方式ではcolspanは効かないのでしょうか？
もう普通にdiv+inline-blockとかでやりなよ
そういう用途ってことはデータって訳でもないだろうしTableでやること自体間違ってる内容な気がする
> colspan="3" は想定外だなw
そういうことやりたければ grid レイアウト使うしかないが
サポートブラウザが少ない
テーブルでやるのは間違いじゃないだろうか？っていうのには
同意するけど、何を使っても結局一緒な気がする。
HTML5 + CSS3において、tableとかtrとかtdは
デフォルトのdisplayがtable-cellとかtable-rowにってるってだけでdivなどと同じもの。
逆に言えばdivなどのdisplayをtable-rowやtable-cellに設定することでテーブルになるけど
今回の問題はテーブルを使っても解決できない問題なわけで。
ぶっちゃけこれCSSの問題（限界）なんだよね。
今のCSSはHTMLに出てくる要素の順番への依存から逃れられない。
例えば上から下へと表示されていく文章を
下から上に表示するようにすることができない。
これは見た目の話なので本来はCSSでやるべき内容。
> <td colspan="3">
> などとしても無視されます。
どういうときに colspan="3" と指定したくて、
その指定をしているものが移動したときに
どうなればいいのかのしようがないから答えられない。
>下から上に表示するようにすること
すでに可能（ブラウザ依存かもしれないが）
>50 の例で
flex-direction: column-reverse;
>順番への依存から逃れられない
order プロパティを使えば可能
>50 の例で言えば各 tr に order:＜整数＞ を設定する
> jQueryのtextメソッドに処理を割り込ませるしかないだろうね。
それは思いつかなかった。
ttp://www.dekasu.net/upload_thumbs/ の画像の差し替え(排他制御)で現在の画像を使用を連続でクリックするとエラーが出るけど、何故なんでしょうか？
書いていいよ。
俺がどうやるのか知りたいｗ
で書いた以外の解決法？
他にやり方があるとしたら、setTimeoutかsetIntervalで
一定時間ごとに監視する方法しかなさそうだけど。
バグじゃね？ 作者に聞いたら？
に書いてあるようにスレ違いだから。
> ですが、jQueryを使って作る側のスレであって、こんなjQueryプラグインありませんか？と聞くスレではありません。
> また野良jQueryプラグインの質問スレでもありません。そういうのは自分で探してください。
> ろくにサポートもされてなさそうな野良jQueryプラグインの使用はおすすめしません。
有名なプラグインならまだしも、どこの誰か知らんやつが作った
jQueryプラグインのデバッグをここでやってもなんのメリットもないし役にも立たない。
俺らは誰かのデバッグ屋じゃないんでな。そういうのは作者本人に聞くように。
> jQueryにArray.prototype.concatと同等の関数はありますか。
上の質問対するレスが↓これ
> jQuery([a,b,c])
これは動きません。下手なスレで聞くから的はずれな答えがくるｗ
これなら動くけどな
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'))
こういうこともやろうと思えばやれる。
冗長だから普通はしないけどね。
$.merge($.merge([], document.querySelectorAll('p')), document.getElementsByTagName('div'))
$($.makeArray(document.querySelectorAll('p')).concat($.makeArray(document.getElementsByTagName('div'))))
それにしてもDOMが交じると本当に長くなるなｗ
元スレ ttp://echo.2ch.net/test/read.cgi/hp/1465399470/25- で質問者自身が考察してるな
そりゃa.add(b, c)なんてのが使えるなんて言ってないしな。
要件を読み取れない人の回答は読んでも仕方ない
手段と目的が逆になってる人な気がするね。
ありえないので・・・。
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
Object.defineProperty($('#target')[0], 'firstChild', { get: function () { console.log(this.lastChild.nodeValue); this.removeChild(this.childNodes[0]); } });
たぶんこれで動くはず。そのfirstChildとそれを使ってるjQueryのメソッドが使えなくなるけど。
本スレ()とどっこいだろ
キモイ成りすましとか
それはハックレベルの汚いコードだな。
本来の動きを壊している時点でハックよりもひどいかもしれん。
デバッグとか一時しのぎならいいけど
製品としては絶対に許されないコード。
それがわかっているならいいけどね。
これに限らず(要素をinnerHTMLで頻繁に要素内を変えてるのが既にあって)
セッターに取得したその要素とinnerHTMLを指定すると
そのオブジェクトのinnerHTMLが使えなくなると思うんですが、
そういうのはダメなんですか？
何を言ってるのかさっぱりわからん。
まず一般的に、Object.definePropertyは使うべきものじゃない。
これを使っていいのは、汎用的なフレームワークやポリフィルやライブラリ
通常の仕事で書くときには使ってはならない。
なぜならば、わかりづらいコードを書くことができてしまうからだ。
通常はそんなものを使わないで書くことができる。
素人かつ趣味でやっていてそこらへんの事情はちょっとわからないのですが、
Object.defineProperty以外のセッターならいいんでしょうか？
他にプロパティの値を監視する代替案はありますか？
いちばん重要な視点が抜けてる。
何のために監視したいかだよ
<a href="
ttp://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と同じ動作を実現するにはどうしたらよいのでしょうか。
指定したhostとportからの返り値から それを確認するなどといった場合は
どういうコードを書けばいいのでしょうか？
locationを利用すればできそうな気もするのですが いまいちピンときません
例えば yahoo.co.jpのport80が通信できているかどうかといった要領です
phpならばわかりやすいのですが...
ttps://developer.mozilla.org/ja/docs/Web/API/Window/location イマイチ言ってる意味が分からないからとりあえず。
ありがとうございます
一番シンプルに書くと、サーバーの稼働確認などで
あるホストの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";
↑
ステータス確認などの記述例
タイトルに"JavaScript"が入った理由が分からんかったが、JavaScriptスレも乗っ取ろうとする現れなのかね
子のスレは事実上vol.4だし、わけわからんな
それが出来ると脆弱性になるから無理ちゃうかな？
よそのサーバー操作できるって事は、アクセスした人にAmazonに出品した自分の商品を買い物かごに入れておくって操作も出来ちゃうだろうし
+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1466750494/
var abc = [a, b, c].reduce(jQuery.merge, $());
var abc = [a, b, c].reduce($.merge, $());
困り者だよなｗ
全く的はずれな指摘してワロタｗ
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/59
で「さっきこっちに正しい使い方を書きましたよｗ」と書かれた事を指してるんじゃないかな
子のスレは彼の独壇場
指定したurlの最後が.jsだと、実行するのですが、そういう仕様なのでしょうか。
そういう説明はまだ見つけてません。
詳しくは知らないから解答にはならないけど、レスポンスヘッダのContent-Typeがtext/javascriptの時実行されるね
$.getScript("hoge.js", function(data) {});
<button>ボタン</button>
<input type ="text"/>
他の要素
<div>
の時に、
$('#divID>button, #divID>input[type=text]')...
とすると二つの要素が得られると思いますが、この記述を
$('#divID button|input[type=text] ')...
こういう感じで | 記号を使うなどで書き換えられますか？
実際は divIDの部分がもっと長い文字列なので、それを二回書くと物凄く
長くなるので一回ですませたいのです。
$('#divID').children('button, input[type="text"]');
レスポンスヘッダのContent-Typeがtext/javascriptになる。
jQueryでは拡張子で判断はしていないが、Content-Typeで判断しているということ。
そしてtext/javascriptで実行されるのはJSONP対応なんじゃないかな？
ありがとうございました
他の要素に2行目の<button>とは別の<button>はないよな？
<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回のループになるんだよな。
良く出来てるよな。
感心しているだけ。
例えばこうすることで、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)
});
集計した結果を1つの配列に入れて返してるからじゃないの？
ソース見てないから知らんけど
いや、俺は仕組みはわかってるよｗ
改めて見るとよく出来てるなぁってだけ。
["12", "34"].split("")が動作しないのは、配列オブジェクトにsplitメソッドがないから
もちろんこれは無いほうが自然だから問題ない。
だけどもし配列オブジェクトにsplitメソッドがあれば
2要素をもった配列オブジェクトから、4要素の配列（["1", "2", "3", "4"]）を返すことは可能になる。
jQueryオブジェクトは「DOM要素専用の配列オブジェクト」なので
DOMに特化したchildrenなんてメソッドをつけても自然になった。
それによってよりシンプルに記述することを可能にしたから
良く出来てるなぁって感心してるんだよ。
Array#mapで実現できるだろ
そもそも、は4回じゃなくて8回(4+4)ループ回してるし
jQuery信者的発想がうざい
Array#reduceで出来る
.children()はjQueryコレクションの作り直しに相当するコストの高い関数
配列に同じような関数が存在しないのはおかしくないと思うがね
6回(2+4)に訂正しておく
> Array#reduceで出来る
じゃあやってみてjQuery信者的発想と言う前に
まずできるか証明して見せてよ
単にeach引数の関数は4回呼び出されているという意味でしかない
内部の実装の話なんかしてない。
dataにjson文字列を設定し、ajax通信でpostしたのですがparsererrorになります。
検索クエリが正常だとparsererrorになり、.fail()になりますがresponsetextの中身には検索結果が入っています。
ttp://www.dotup.org/uploda/www.dotup.org926215.png 検索クエリがおかしい（
は取り下げます。何故か書き込めないです…
あらかじめ釘をさしておくが、「コードが長い」や「ループ回数が6回」と文句を言われても知らん
で既に指摘してあるし、ライブラリでコードが短縮されるのは当たり前だからな
['12', '34'].reduce(function (b, c) {
Array.prototype.push.apply(b, c.split(''));
return b;
}, []).forEach(function(c) {
console.log(c);
});
> （または一つのforEachだけで）2×2回の4回のループにすることはできないでしょ？
って書いてあるのにｗ
やっぱり関数を追加しないとできなかったなｗ
そもそも、jQueryでもコールバック関数を使わないと実現できんし、例が悪すぎるわ
そうだよ。書いてあるじゃん
> jQueryではeachの前にあるchildrenメソッドで2×2の4つの要素を
> 生成しているってことなんだよね。だから4回のループになる。
> jQueryを使わずに書けばこんな感じ（もちろん動きません。）
> ["12", "34"].split("").forEach(function(c) {
> console.log(c)
> });
（eachの中の関数とは別に）もう一つ関数を追加しないと実現できない。関数を追加せずに
既存のメソッドを使うだけで要素と要素の組み合わせ（もちろん組み合わせだけじゃない）の
処理を実現できる。だからjQueryはよく考えられてるなって言ってるの。
> そもそも、jQueryでもコールバック関数を使わないと実現できんし、例が悪すぎるわ
今回は単にループしている数を明らかにするためにeachを使っただけで であれば、
.a の中の .b の全組み合わせを求めるのにコールバック関数はいらん。
$('.a').children('.b') これだけでよい。（.a > .b と書いてないのは の続きだから）
もちろん $('.a').children('.b').css('color', 'red') という書き方もできるのでコールバック関数も
ループもを使わずに「.a の中の .b に当てはまるものすべての文字色を赤にする」ことを実現できる。
jQueryのこの書き方っていうのは手続き型的な処理がないから見方を変えると
CSSの定義するという書き方と同じになってるんだよね。少しづつ変化させていくとこうなるｗ
.a > .b { color: red }
→ $('.a') > $('.b') { color: red }
→ $('.a') children $('.b') css (color: red)
→ $('.a').children('.b').css('color', 'red')
ね？ ちょっと文法が違うだけって感じられるはず。ここにCSSにはないループや関数が
入ってくると、CSSとは考え方が全く違う手続き型の書き方として見えてしまう。
jQueryの書き方は関数型風であると同時にCSSの書き方とも親和性が高い。
jQueryの例はjQueryコレクションで配列じゃないだろ
同じオブジェクトを指してないのになぜ同列に語るんだ？
> をjQueryで楽にかけないと話にならん
はDOMじゃないのでDOM用のjQueryでやる内容じゃない。
やるとしたらlodashだろう。
> jQueryの例はjQueryコレクションで配列じゃないだろ
そうだよ？ jQueryコレクションと言うものを作り出すことで
配列として扱う方法では不可能なことを実現してるので
jQueryは良く出来てるって感心してるの。
DOM要素を配列として扱う方法じゃあだめなんだよ。
サーバーからの応答がjson形式でその中身がおかしいということでしょうか
適当にググればわかるだろ
ttp://lealog.hateblo.jp/entry/2011/12/16/234332 ttp://www.koikikukan.com/archives/2014/10/01-012345.php ttp://w3q.jp/t/4478 ttp://qa.atmarkit.co.jp/q/3588 だから、比較例が適切でないといってるんだが、分からん奴だな
.join('').split('') でいいんじゃね?
空文字は存在しないという前提？
jQueryのDOM操作に対して、JavaScriptでもDOM操作の
話をしろって言ってるんだと思う。
例えばjQueryの$(・・・) と比較するならばquerySelectorAllだろという事。
だけどquerySelectorAllで帰ってくるNodeListにはメソッドが最低限のものしか無いから
document.querySelectorAll('.a').children('.b').css('color', 'red')
なんてことはできないんだよね。
適切な比較例にしても殆ど変わらないな。
比較例を適切にはあなたの推測通り
のjQueryコードに対してのESコードが比較対象になってない
jQueryはDOM特化だからDOMコードは効率よく書けるが、配列に対して効率よく書けるわけではない
だから、はjQueryでもESでもコールバック関数を一つにするのは不可能
> だけどquerySelectorAllで帰ってくるNodeListにはメソッドが最低限のものしか無いから
Function#callを使うか、Array.fromで配列に変換すれば配列用関数を使える
をESで書くなら的な実装になるだろう
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);
});
forEachについてはcallとの組み合わせでコード量が長くなってしまうので、NodeList を iterable にするおまじないを使って、for-of を使うともっとシンプルに書ける
実際のところ、はdocument.querySelectorAll('.a>.b') で十分であり、メソッドチェーンを使う必要もないのでは現実に即したコードとは言えない
CSSセレクタで補えないフィルタをする場合が適切な例となりうるが、document.evaluate, document.createTreeWalker, document.createNodeIterator を使えばSelectors APIよりも楽に書ける場合も多々ある
いわゆる親セレクタ、セレクタの先読み、テキストノードの選択はSelectors APIで網羅できない弱点といえるな
やっぱりjQueryだと（コールバック）関数が一つでいい処理が
2つになってるじゃねーかｗ
> だから、はjQueryでもESでもコールバック関数を一つにするのは不可能
は例であってjQueryだとコールバック関数一つ出かけるなんて
一言も言っていません。なんでこう読解力がないんだろう？
は例であってjQueryだと "この処理を" コールバック関数一つで書けるなんて
一言も言っていません。なんでこう読解力がないんだろう？
通常のESだとquerySelectorAllを使っても
コールバック関数一つで書くことは不可能だが、
jQueryだとコールバック関数一つで書くことが可能になる。
どんなにチェインをつなげたとしてもね。
たしかに。
jQueryだとこんな感じでできることがSelectors APIではできない。
$('.b').parents('.a').css('border', '1px solid red')
jQueryプラグインにすると簡単になるね。
（HTMLは）
$.fn.textnodes = function() {
return this.contents().filter(function() {
return this.nodeType === 3;
});
};
$('.a').children('.b').textnodes().each(function() {
console.log(this.nodeValue);
})
凄いと言い出してる人の主張はとても理不尽で不毛な要求にしか見えない
詳しくはしらないがjQueryだって中でいろんな処理走らせてるだろうに、あれだめこれだめって色々縛り作るとかそもそも同じ土俵で戦うのを制限してる時点で平等じゃない
誰のこと？ｗ
少しでもjQueryによっていい話をすると逆上してしまうようだねｗ
↓
【レス抽出】
対象スレ：+ 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
検索は文章の意味まで理解しないよ、馬鹿なのかな
なんでも「凄い」と言ってるって脳内変換してしまう人かｗ
きっとこの人にとってはjQueryの話すべてが
見たくないんだろうな。
普通の話をしてるだけなんだからおとなしく聞いてろ
日本語読めないならROMってどうぞ
それならでESのコードを書かせたことが無駄
の指摘も的外れ
ミスリードを誘う事しかできない悪文
お前以外に勘違いしているやついるか？
とを読めば誰でもわかる。
不公平な比較をしてjQuery優位になるように見せかける姑息な手段が嫌いなだけ
をDOM APIだけで書いたらどうなるか？って
話をすればよかったのか？
childrenを使うのは今回の条件だから使わないといけないけど
".a > .b" で書けるって言われるのもくだらないから、
Selectors APIではできない例としてを例としようか？
> $('.b').parents('.a').css('border', '1px solid red')
jQueryではこの処理をコールバック関数を使わずに書くことができるがDOM APIではできない。
$('.b').parents('.a')の部分で4つの要素をもったjQueryコレクションが作成され
cssメソッドは4つの要素に対して適用される。
このように"定義"しているように書けるのがjQueryの特徴で素晴らしい点。
という言い方なら、不公平な比較じゃないよね？ｗ
jQueryのソース内でも一切コールバックも何もかも使われてないんだな?
っていう話ね
なんでjQueryのソース内の話が出てくるんだ？
その理屈のままアセンブラまで行く気か？ｗ
jQueryのライブラリの素晴らしさの話なんだが。
よくできているから、jQueryのライブラリのユーザーは
簡単に書くことができる。DOM APIのユーザーよりもね。
横から失礼、それは違うかと。
元々（こんな簡単に記述できて）jQueryって凄いよなって話でしょ。
何から何まで全てjQuery優位とは言ってない（と思う）。
たまたま出した例で不公平も姑息もない。
は「jQueryって凄いよな」って話
は「DOMではこんなこと出来ないよな」って話
だが、>110はjQueryでも実現できないのでこの比較は公平じゃない
がなくての説明だったなら公平な比較だった
それから、>137に対して>142はjQuery優位な結論に持って行っているが、そんなことはない
例えば、XPath式の descendant::text() はjQueryでもSelectors APIでもコールバック関数を使わなければ実現できない
「Selectors APIで網羅できない弱点」はそのまま「jQueryの API で網羅できない弱点」になる(:has()を使えば先読みは出来るが)
「でjQuery pluginを使えばできる」とあるが、それはその通り
ただ、その理屈を通すならDOMでもユーザ定義関数を使えばコールバック関数を使わずとも何でも実現できる
自由な発想でユーザ定義関数、Classを定義できる事がライブラリを使わずに書く事の利点だが、彼はjQueryだけにその特権(jQuery plugin)があるかのように説明する
これが不公平な比較でないといえるだろうか
例えば、XPath式の descendant::text() ”だけ” は jQueryでもSelectors APIでもコールバック関数を使わなければ実現できない
これだけねｗ
それに対してDOMでは実現できないから、自分でjQuery相当のものを作らないといけない。
だからjQueryってよく出来てるねって話
実現されてるかどうかの話をしてる。
jQueryでは実現されているがDOMでは実現されていない。
なんでこんな簡単なことがわからないんだろうね。
間違いに認めてしまえばは素直に評価されただろうに
お前はXPath式を使ったことがないだろ
jQueryセレクタで対応できないXPath式はそれなりにあるぞ
parent, ancestor, preceding-sibling
関数も含めれば更にある
XPathを使えばjQuery#filterを使わなくて済むパターンは結構な数に上るはずだ
jQueryセレクタなんてものはないよ。
それをいうならCSSセレクタな。
だから同じことはquerySelectorAllにも当てはまる話
> XPathを使えばjQuery#filterを使わなくて済むパターンは結構な数に上るはずだ
上るはずだじゃなくて、具体的にいえばいいのにｗ
あまり知られてないけど、実は昔はjQueryはXPathに対応していたんだよ。
ttp://web.archive.org/web/20130429130056/http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors XPathでしかできないことはあるけど、いらないって思ったから削除したんじゃねーの？
XPathはjQueryからあえて削った機能だよ。
どうしても使いたいなら、プラグインがあったよ。
jQuery XPath plugin
ttps://github.com/ilinsky/jquery-xpath で、話を戻すけどCSSではできなくてXPathでできることがあることはわかった。
それがjQueryになんの関係があるんだ？
CSSの場合・・・jQueryの方が使いやすい
XPathの場合・・・引き分け
jQueryの方が1勝1引き分けってことだろう？
> jQueryセレクタなんてものはないよ。
jQueryはセレクタエンジンを:has()とかで拡張してるだろ
> それをいうならCSSセレクタな。
Selectors APIはCSSだけのものじゃないぞ
> どうしても使いたいなら、プラグインがあったよ。
お前さんは何かとプラグインを使えばいいというが、
DOMでも便利関数を自前で作ればそれを呼び出すコードではコールバック関数を一つも使わないことが出来る
> XPathの場合・・・引き分け
XPathの方が多機能な時点で引き分けはない
こいつはただjQueryって凄いといいたいだけだろ
いい加減、言い訳がひどくて見苦しいぞ
いや、だから自分で作らないといけないんだよね？
そこがいちばん重要な点なんだけど。
いや別にjQuery使っていても、
必要ならXPath使ったコード書けますからｗ
XPath使うのに自前で便利関数を作る必要もないぞ
ほら引き分けじゃんｗ
DOMでもjQueryを使えばそれを呼び出すコードではコールバック関数を一つも使わないことが出来る
こういう言うべきじゃね？ｗ
プラグインを使え、jQueryを使え。
話なんだから、jQueryのコールバック関数を使わない方法を
真似た時点でjQueryの素晴らしさを認めているようなもんなんだけどなｗ
jQueryなかった時代でも使いことが出来るようそれぞれがそれぞれの組み方でなにかとどうにでもなった
だからjQueryで出来ることはDOMでも出来る。但し相応のコードは用意しなくちゃいけないしブラウザ間の互換も必要とする。
jQueryも分解すればDOMなんだからjQueryに出来る事ならDOMも関数組めば出来る
.DOMでしか出来ないこともプラグインさえ使えば出来るようになる
でもjQuery信者は
DOM=>コールバック禁止、複雑なの禁
jQuery=>できないことはプラグインでできるからすごい
という条件がそもそも不平等
jQueryがよくできたライブラリだって話をしてるんだろ。
同じライブラリでもだめなものだってたくさんある。
その中でjQueryは良く出来たライブラリ
できるできないの話じゃない。
たくさんあるやり方のうち、jQueryは最高のDOM操作ライブラリだって話をしてる。
自分で作る事の何がいけないんだ？
pluginも誰かが作ってるから存在するわけだが、お前さんはplugin作者の労力を否定してるようなもんだ
自分で発明することに労力をかけられないならプログラミングをやめてしまえ
自分で作らないといけないってことは、DOM APIが
jQueryよりも劣ってるってことなんだよ。
jQueryが優れてるから、そのjQueryと
同じような感じに近づけたいんだろう？
> 自分で作らないといけないってことは、DOM APIが、jQueryよりも劣ってるってことなんだよ。
それならjQueryはXPathより劣っているという評価になるな
> jQueryが優れてるから、そのjQueryと同じような感じに近づけたいんだろう？
そう思っているのはお前だけだろ
なぜjQueryをお手本にしなくてはならんのだ？
jQueryを自分で作るならね（笑）
俺はjQueryを自分で作ったこと無いね
少しは学習しろよな
キチガイはスルーね
「DOM API使っても自分でライブラリつくればjQuery風にすることができる」は
jQueryが素晴らしいということを後押ししても否定することにはならないからな。
自分で書いたコードでjQuery風にした時点で、このライブラリが
もっとも最良の書き方ってことになるわけだから。
誰が見てもキチガイに見えてるならいいんだが、
（いくら誰かがキチガイ呼ばわりしたとしても）
キチガイに見えなければ反論できないように見えちゃうんだよねｗ
「jQuery XPath plugin」を使わなければXPathと同等の事が出来ないjQueryが劣っているという事なんだが、アホには理解が難しかったようだな
pluginは誰かが「自分で作る」ことで出来上がるもの
pluginはjQueryの機能の一部ではない
DOM=>コールバック禁止、複雑なの禁止
jQuery=>できないことはプラグインでできる
これな。
他のライブラリと比べてjQueryが優れてるって話は分かるけど論点はそこじゃない。
jQueryで出来ることは100%DOMでも出来る。当たり前だが。
DOMで出来るからといってjQueryでできるとは限らない。
例えばSVGもjQuery標準の書き方では初回の生成ができない。$("<svg>"); これが役立たない。
DOMなら標準で生成できる。
手段に無駄な時間を費やすよりもひとつでも多く目的を
達成することが人生をエンジョイする秘訣だ
○ NodeList.prototype.children
まあ、彼は自分でコードを書くのが時間の浪費といわんばかりだけど、それが作っている人への尊厳を汚す行為に他ならない事も想像できないんだろうね
jQueryだってjQuery pluginだって誰かが作ったから使えるのにね
画像はimageにonloadさせてサイズを測って判定、ということがわかったのですが
他のコンテンツ、例えば動画やツイートなどの閲覧判定で悩んでいます。
・動画（例えばyoutube）のページは存在していても、動画自体は再生できる状態か否かの判定
・ツイートは削除されているが、”このページは存在しません。”ページが返ってくるので閲覧自体はできる
などなど
何か良いアイデアはありませんでしょうかよろしくおねがいします
> 「jQuery XPath plugin」を使わなければXPathと同等の事が出来ないjQueryが劣っているという事なんだが、アホには理解が難しかったようだな
何に対して劣っているの？
DOM APIでしょ？
jQuery使う。XPath対応できない！
じゃあDOM APIを使おう。ってことで別に
その点ではどちらも同じでしょ？
> 例えばSVGもjQuery標準の書き方では初回の生成ができない。$("<svg>"); これが役立たない。
こうすればできるよ。
var $circle = $(document.createElementNS("
ttp://www.w3.org/2000/svg", "circle")); $circle.attr({cx: "190", cy: "40", r:"40", fill: "#c44"});
$(document.createElementNS("
ttp://www.w3.org/2000/svg", "svg")).append($circle).appendTo('#main'); 要するに要素を作る部分がcreateElementではなく違うネームスペースにしなければいけないからこうなる。
言い換えるとここだけだから、その他の部分は見ての通りjQueryのパワーを使うことができる。
ところで、SVGの話題をしたっていうのは、
3.0でSVGのクラス操作ができるようになったのを知ったからかな？
ttps://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を使うのがおすすめだよ
ttp://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に対しても同じことだということがわかるね。
> pluginはjQueryの機能の一部ではない
pluginはjQueryの機能の一部ではないが、
今ここで話をしているのはjQueryの設計。
プラグインも同じ設計に基づいている。
> jQuery pluginを認めるならDOMでもNodeList.prototype.elements.childrenを拡張すればquerySelectorAllでを実装できるからね
今話をしているのはjQueryの設計。
あんたがNodeList.prototype.elements.childrenをどう拡張するのか知らんが、
やっぱり素晴らしいjQueryの設計を参考にするんでしょう？ｗ
> まあ、彼は自分でコードを書くのが時間の浪費といわんばかりだけど、それが作っている人への尊厳を汚す行為に他ならない事も
意味がわからん。jQueryがあるから自分でコードを書かなくて良くなった。
ありがとう！って思ってるんだが？
jQuery作ってご苦労さん。使わないけどねｗｗｗって言う方が
よっぽど作っている人への尊厳を汚す行為だと思うが？
HTMLならiframeでできるかな？とかajax使って調べられるかな？って
思ったけど例えばYouTubeのページはあるけど動画は再生できないとか
ページのURLから動画ファイルが推測できれば（多分できると思うが）実現可能だけど
そういうのはサイトごとにやり方は違うからサービスごとに考えないといけないんじゃないか？
正攻法はAPIを使うことだろうけど、当然これもサービスごとに微妙に異なる
いやjQuery信者主張によればその方法はルール違反の反則だよ
D3もjQuery本体じゃないから論外ね
ttp://www.w3.org/2000/svg", "circle")) 毎度こんなことするのかと思うと鬱になるなｗ
> いやjQuery信者主張によればその方法はルール違反の反則だよ
じゃあ俺はjQuery信者ではないということだなｗ
jQueryの設計が素晴らしいって言っているだけだ。
D3も同じ設計。
> 毎度こんなことするのかと思うと鬱になるなｗ
まったくだよな。DOM APIだとSVGの場合だけじゃなくてHTMLでさえ
document.createElementと毎回やってるんだぜｗ
function doc(name){
return document.createElementNS("
ttp://www.w3.org/2000/svg", "circle"); }
DOMメソッドも作れるから完結になるよ
そうですか・・
もうこの際リンクチェックしてくれてJSOP対応のサービスを（なかなか見つからないのですが）使おうかなと思います
ありがとうございました
「jQuery + DOM vs DOM」で比較したらDOMが劣るのは当然だろ
その理屈ならライブラリは全てにおいて標準より優っている
改めて言われるまでもなく、皆わかってるし、のコード説明が全くの無意味だわ
> DOMメソッドも作れるから完結になるよ
知ってるけどjQueryでも同じじゃね？ｗ
> その理屈ならライブラリは全てにおいて標準より優っている
そうでもないよ。
DOM APIっていうのはライブラリだから。
標準が優れているのであれば、わざわざそれをラップするライブラリを作る必要はない。
そしてライブラリと言ってもいろんなものがある。
過去に流行ったPrototype.jsっていうのもあるでしょ。
標準やPrototype.jsに比べてjQueryは良く出来たライブラリって
話をしている。
jQueryにそんな機能あんの？DOMの機能じゃないももで
draggable というプラグインを使って
文字をtextareaに入れようとしてるのですが、dropイベントが発生しないようですが、
仕様でしょうか？
回避する方法があれば教えてください
XPathとjQueryを比較してjQueryが劣っているといってるんだが？
jQueryは言語じゃないんだよ。
言語（JavaScript）を使わないでjQueryを使えと言われても
困るというか意味不明ｗ
で、当たり前だけどさ、jQueryはJavaScriptという言語から
呼び出して使う。
何が言いたいかわかる？
> XPathとjQueryを比較してjQueryが劣っているといってるんだが？
ゴメンな。
俺はXPath（セレクタの一種）とjQuery（DOM操作ライブラリ）は
全く別物だと考えている。比較するものじゃない。
XPathと比較するならばCSSセレクタだよ
ttp://stackoverflow.com/questions/7237436/how-to-listen-for-drag-and-drop-plain-text-in-textarea-with-jquery これでどう？
使ってますか？
ttps://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate XPathってIEでサポートされてないんだな。
XPathは必須だという人に登場してほしい所ｗ
ちなみに俺はXPathはいらない機能だと思ってる。
「俺はいらない」vs「俺はいる」なんて水掛け論だろ
せめて「俺にとってはjQueryが凄いって思う」にしとけ
そうすりゃ、誰も手を出さないから
客観的な意見として、ちゃんとした理由が必要。
jQueryは関数型の考え方を取り入れて
CSSセレクタによってツリー構造のDOMを
リスト構造に変換することに成功した。
それにより関数型言語が得意とするリスト処理を適用することが可能になり
高階関数を用いたプログラミングをDOMのリストに対して適用することで
より効率的なプログラミングが可能になった。
一つのセレクタで完結できるのは美しいと思うが、jQueryコレクションを何度も作り直すのはコストが重くてやってられん
(こういうと間違いなく、彼が「nミリ秒の差がそんなに重要？ｗ」と煽ってくるが、お前の価値観なんかどうでもいい)
'.a>.b' が最善だし、それが出来なくても forEach x 2 か for-of x 2 で済ます
Selectors APIで何ともならん部分は普通にXPathを使ってるよ
AutoPagerizeがSelectors APIを使っていたらどうにもならんサイトが多かったと思う
XPathの強力さは使ってみないと分からんだろうな
「俺はいらない」が主観だろ
主観と客観ぐらい使い分けろよ
> 一つのセレクタで完結できるのは美しいと思うが、jQueryコレクションを何度も作り直すのはコストが重くてやってられん
> (こういうと間違いなく、彼が「nミリ秒の差がそんなに重要？ｗ」と煽ってくるが、お前の価値観なんかどうでもいい)
nマイクロ秒な。速度の感覚がずれてるんだよｗ
で煽りじゃない。その程度の差がそんなに重要なのか？
重要なところだけがんばるという
発想は持ってないのか？
> Selectors APIで何ともならん部分は普通にXPathを使ってるよ
じゃあ試しに「Selectors APIで何ともならん部分」を「XPath」で書いてみて。
なおテキストノードを取得するコードはわかりきってるので
それ以外でね。
絶対最後にレスをしないと気が済まないマンだから
じゃあお前はレスするべきじゃなかったねｗ
彼は空気みたいなもんだと思えばいい
プログラム板にいけばNGIDでもう少し平和になるんだがね
それは難しいなｗ
質問する人は、ここの常連じゃない。
だから、そんなお前が作ったくだらないルールなんか知らない。
そして俺はそれに対してレスをする。
常連のあんたはそもそも質問をしない。
どうせ回答もしないだろう。
お前がやることは荒らすことだけだｗ
今だってそうだろう？
俺は質問者にレスしている。（や）
俺以外の人は、俺にレスしている。
それを言いたいのはこっちなんだけどなぁ
だからjQuery信者の存在は困る
お前が分かってないのは、DOM APIは言語じゃない
JavaScriptではないということだよｗ
もう一度言うね
jQueryで出来ることはDOM、普通のJavascriptでできる。当たり前の話。
DOMで出来る事jQueryで出来るかというと、必ずしもそうではない。
例えば
createDocumentはjQueryでは$("<div>")で出来る。
ではcreateElementNS("なんとかかんとか/svg","svg")は？
なんかあんの？D3だとか標準のjQuery以外の物は論外よ
ようはjQueryは素晴らしい、それは間違いない。だからといってDOMを劣等に見る事とは繋がらない。
でもjQuery信者はDOMでもこうすればできるよ、っていう意見と作例に、コールバック使うな、とかやっぱりそうなるよね、とか、jQueryはプラグイン利用が良くて、DOMはだめ、という変娘な条件を押し付ける。
ECMAScript 反論が揚げ足取りか。
もう一度言うね
できるできないの話はしていない。
当たり前すぎるから、お前はわざわざ出す必要はない。
今ここで話をしているのはjQueryのライブラリの
インターフェース（API）の設計の話。
jQueryはCSSセレクタを使うことでDOMツリーをリスト処理できるようにした。
そしてjQueryオブジェクト（DOM要素コレクション）を作り
DOMを操作するメソッドを単一のDOM要素ではなく、DOM要素のリストに対して
適用させることで、リストに対して一括して処理を適用させられるようになった。
こういう「設計」の素晴らしさの話をしている。
> createDocumentはjQueryでは$("<div>")で出来る。
> ではcreateElementNS("なんとかかんとか/svg","svg")は？
お前はjQueryが分かってないなｗ
それは要素からjQueryオブジェクトを作る時の話ではないか
jQueryの素晴らしさはjQueryオブジェクトを作った後にある。
jQueryはいろんな方法でjQueryオブジェクトを作ることができる。
$('.test') というCSSを使った方法だけではなく、
$(document.getElementsByClassName('test')) という方法でも
jQueryオブジェクトを作ることができる。
jQueryの真価はここからだよ。
var $es = $(いろんな方法) で取得したjQueryオブジェクトに対して
$es.attr({height: 100, width: 100}) のように一括して適用することができる。
これはCSSがクラス名で一括してスタイルを適用するのと同じ。
これによりループや条件分岐と言った手続き処理をすることなく、
関数型風に処理を適用させるという設計が素晴らしいんだよ。
関数型を理解するとjQueryの素晴らしさも理解できる。
これからは関数型だよ。
手続き型やオブジェクト指向は古いｗ
jQueryはモナドだ
ttp://blog.anatoo.jp/entry/20100305/1267801847 それが出来れば理想だけど、彼の投稿数は異常なほどに多いんだよね
ぶっちゃけ、このスレの人数は本当に少ないから
ああ俺は平等な目線でどっちのメリットデメリット認めようねっ話な
俺としてはメリットデメリットはとっくに分かっているから
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並になれる。
+ JavaScript & jQuery 質問用スレッド vol.6 +
ipt & jQuery 質問用スレッド
jQuery 質問用スレッ
「質問用スレ」←注目
素晴らしいってことは事実だから。
ID強制のプログラム板に行けば平和になるかね
昔のテレビのような砂嵐になってしまうのですがなぜでしょうか？
PC版のFoxや他のブラウザでは正常です。
別スレからこっちまで来て同じこと書いてキモイぞ。
第一そこにはないし（あったら出してみろ）。
下手糞杉
というかjQueryの話題じゃないのでこっちへどうぞ
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1463395557/
スレタイ通りJavaScriptなのでここでもOK
そうやってお前が全部こっちに質問流してるんだろ
荒らしは消えろ
は？荒らしは成りすましのだろ
スレタイにJavaScriptって書いてあるよね
そこまともに機能してねーじゃねーか
最後にコード書かれたの1ヶ月前とかｗ
巡回対象にしている人はいるようなので質問を投げかけて待つのが吉
善良な一般人は既に2chを去っているので2ch以外で質問するのも有
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1463395557/
+ JavaScript の質問用スレッド vol.121 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/tech/1468158373/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
> 巡回対象にしている人はいるようなので質問を投げかけて待つのが吉
その巡回して質問者に答えているのが
荒らしてるやつ呼ばわりされている俺なんだけどねｗ
jQueryを使って答えるのが大好きです（笑）
何でもjQueryで返すからわかりやすい
なんでもjQueryじゃないですよ。
DOMの場合はjQueryですけど、
DOMじゃなければlodashで答えますし、
日付関連ならmomentを使います。
基本的に最小の労力で問題を解決する方法を
提示しますね。
ttp://echo.2ch.net/test/read.cgi/tech/1468158373/66-
こいつか
ライブラリには詳しいが標準仕様は全く学習しないタイプだな
「オブジェクト指向型（手続き型）では使わないたぐいの関数」といってるが、結局bindで解決可能なんだからな
最も、ここでjQuery.proxyが出てこない時点でjQueryにも詳しくはなさそうだがね
curryとbindはぜんぜん違うよｗ
bindはオブジェクト指向脳の関数。なぜならthisをbindするものだから。
引数も束縛できるから(余計なthisのbindを無視すると）部分適用ができているけど、
そもそも引数の束縛（部分適用）とカリー化は違う。
curry（カリー化）は部分適用することが可能な関数を作ること。
そしてオブジェクト指向じゃないんでthisはでてこない。
でさ、俺に反論するのはいいけどさ、そう言った一つ二つレベルが下の人が
やりそうな間違いしたレスをしても逆効果なだけだよｗ
> 最も、ここでjQuery.proxyが出てこない時点でjQueryにも詳しくはなさそうだがね
jQuery.proxyも同様。カリー化とは全く別のもの。別のものだから出すわけ無いじゃんｗ
jQuery.proxyもbindが世の中に普及していなかったらjQueryがずっと前に実装した。
（なおprototype.jsの方がさらに先にbindを実装していたはず）
ttp://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にも詳しくはなさそう？ ここまで解説してあげれば満足ですかねぇ？ｗ
どうせあっちも見てるんだろ？
違いがわかりやすいコード書いてやったから
勉学に励めやｗ
おまえにいわれるまでもなく知っている事しか説明されてないんだが、長々と書くもんだな
bindはthisと引数を束縛するものだ(thisに限定されない)
「標準化に時間がかかるんだろうね」といってるが、お前は「bindがあるから標準化されない」とは考えなかった
考えられる理由は3つ
(1) bindが引数束縛できることを知らなかった
(2) bindが引数束縛できることは知っていたが、bindが存在する影響でcurry化メソッドの標準化しない可能性まで結び付けられなかった
(3) bindが存在する影響でcurry化メソッドの標準化しない可能性を考慮したうえでcurry化メソッドがbindにない重要な機能があるから
お前の主張によれば(3)なんだろうが、非常に苦しい言い訳だと思うね
this束縛で困る状況が限定的だし、書き方次第で何とでもなるからな
少なくともGood Partsの該当コードの要件を満たしている時点でbindの存在は教えるべきだった
bindがあるからcurryが標準化されない可能性に触れない理由も特にない
えとさ、カリー化はbind（引数束縛）のことじゃないって
ところから認めようか？
言い訳多すぎ
カリー化はbindとは違うっていう話なのに
なんでそれを理解できないのかなl。
呼び出すときのオブジェクトによってコロコロ変わるもの。
これが本来のthisであり、bindはこのthisを呼び出すときのオブジェクトとは
無関係に特定のオブジェクトに強制的に結びつけるものだから
（そもそもbindとcurryは違うという話は見なかったことにしてあげるにしても）
bindがあるからcurry（正しくは部分適用）がいらないということにはならない。
部分適用だけがしたい（thisは本来通りに呼び出すときのコンテキストで変わる）ときに
bindを使うと余計なこと（thisをコンテキストを無視して特定のオブジェクトに結びつける）を
してくれるのでbindは部分適用の代わりにはならない。
これをやらないのは、単にJavaScriptがもともとオブジェクト指向で設計されているから。
関数型のメリットが認知されてきた今なら関数型の関数も取り入れようぜってなるかもしれないが
標準化が遅すぎる上にブラウザ間の互換性が重要な今、今更方向転換するには遅すぎる。
関数型でやりたければjQueryやlodashを使えば良い。
例えば5行x1列のtableに、
"あああああ"
"いいい"
"うう"
"ええええ"
"おおおおおお"
こんなふうに文字列があるとして、それぞれの文字列がtableのcellの幅にピッタリ収まるくらいにfontサイズを調整したいのです。
なので "うう" なら大き目のフォント、 "おおおおおお" なら小さ目のフォント。
どういう手法でやれば実現出来るでしょうか？
実現する方法があるならtableで有る必要は有りません。
ttps://jsfiddle.net/cv2cgs3a/ でも俺は動けばいい程度の極めて無い人なので誰かこの考え方をヒントにでも最適化してもらうのを期待。
中々よいアイディアですね。
参考にさせて頂きます。
ありがとうございました。
呼ばれた気がしたｗ
ttps://jsfiddle.net/cv2cgs3a/1/ ちなその方法は俺が会社で資料作るときに集計プログラム表示して印刷すればいいだけっての作ってる奴の切れ端だから、自分用に手放しで何か作るときお勧め
...沢山の要素
</div>
を
<div>
<div id="newDivID">
...沢山の要素
</div>
</div>
のようにしたいのですが、JSかjQueryでやる方法を教えて下さい。
$('div').attr('id', 'newDivID').wrap('<div />');
逆参照なら
$('div').html($('div').clone().attr('id', 'newDivID'));
ありがとうございました。
appendとかprependでやるのかと思って試行錯誤しても出来なかったのですが、
教えて頂いた方法で試してみます。
で数値入力する場合に、Mouse Wheelをグリグリ回して数字が変わりますが
回している途中ではonchangeが発生せずにENTERを押した時点で
発生します。それをMouse Wheelをグリグリ回している最中もonchangeを
発生させたいのですが、出来ますか？
手抜きだけど、これでできるよ。
$(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()で取得する値が変わる前の値になってしまうから。
サンプルならびに詳しい解説ありがとうございました。
でも私の環境win7pro64でchrome64最新版では動作しませんでした。
サンプルを参考にさせて頂いて調べてみます。
順番が固定なら成功時に次を呼べばいいけど
そうじゃないときはどうしたらいいか
なんか汎用的なうまい方法が思いつかない
>そうじゃないときはどうしたらいいか
何をやりたいんだ？
ときどき順番を変えたいとき
次のajaxを決める関数をつくっておいて
それぞれのajaxのthenでその関数に問い合わせて次のajaxを聞き、それを呼び出す
では？
hoge2() は PIYO==true のときのみ呼ぶとして、こんな感じのことをしたい。
（成功したら次に進み、途中でエラーになったら処理は中断する）
hoge1();
if(PIYO==true) hoge2();
hoge3();
これを .then とかで実現するには
function hoge1(){ return $.ajax(～); }
として、
hoge1().done( function(){ hoge2().done( function(){ hoge3(); } ); } );
みたいにするの？
hoge1()
.done(function(){
return hoge2();
}).done(function(){
hoge3();
});
…というか、順番が固定しない、という話はどこへ…？
hoge1、hog2、hoge3 に入れるajaxが不定ということかな…
説明上 簡略化しましたが
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();
});
みたいにやるんでしょうか
案外 読みにくい書き方ですね・・・
メソッドチェーンは使えないのか
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);
}
どこでajaxが走ってるのかわからん
何となく、Promise.allかDefered.whenが求める機能な気はするが
で、Promise.allやDefered.whenの何が不満なのだ？
に対応できる
Promise.allやDefered.whenの書き方がわかりませんでした…。
教えてください。
おれにも教えてください
何でもしますから
なんてのがあればなにも考えずに済むんだよな
それは非推奨か廃止になるはず。
まずね、その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();
});
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();
});
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を使って
関数型っぽく書く書き方もあるｗ
ブラウザが限られるがBabelを使って変換できる。
return hoge1()
.then(() => hoge2())
.then(() => hoge3());
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());
});
.then(function(ret) {
この ret はhoge1()の戻り値なの？ promiseオブジェクトじゃなかった？
> この ret はhoge1()の戻り値なの？ promiseオブジェクトじゃなかった？
違う。Promiseの実行結果。
hoge1()の中身を書くとこうなる。
function hoge1() {
retrun new Promise(resolve, reject) {
resolve(123);
}
}
hoge1()が返すものはPromiseオブジェクトであるが、
then(function(ret) の retはPromiseが解決（resolve）したときの値である123になる。
実は（最初を除いて）単なる値を返しても良い。
return hoge1()
.then(ret1 => hoge2(ret1))
.then(ret2 => hoge3(ret2));
例えばPromiseオブジェクトを返すhoge2()関数の中で
resolve(123)としたときret2は123になるが、
hoge2()関数が123という値を返してもret2は123となる。
これによってPromiseを使ったチェーンの中に従来の関数を混ぜることも出来る。
これは、実際のhoge2()は内部でAjaxで非同期で通信するんだけど、
デバッグとして配列をそのまま返しちゃえ。なんてことができるということを意味する。
ほぇーなるほど
この仕組み考えるの大変だっただろうな
$.ajax()の戻り値はだいたいpromiseみたいなもので
このpromiseが resolved() になってると done()が実行されて
rejected() になってると fail()が実行されるのか
ほんとうはこの辺自分でやんなきゃだけど、 $.ajax()は
勝手にやってくれてるイメージでいいのかな
$.ajaxの戻り値はDeferredオブジェクトで
これはJavaScriptで標準化されたPromiseが登場するよりも
前にjQueryに実装されたもの。
互換性を持たせるためにPromiseのthenとcatchも使えるようになっている。
ajaxが成功したら .done() に行くけど、
.done() の中でエラー検知したときに .fail()に向かわせることはできる？
done()やfail()の 中で呼んでる関数の戻り値は無視されるのね
それぞれの関数の引数に特定の値を
与えたいんですがどうすればいいの？
hoge?() の戻り値を $.ajax() にしているときは
hoge1( obj )
.done( function(){ hoge2( obj ); } )
.done( function(){ hoge3( obj ); } );
みたいに定義して渡していくしかなさそう？
hoge1にはobj1
hoge2にはobj2
hoge3にはobj3
を与えたいんです。
hoge1( obj1 )
.done( function(){ hoge2( obj2 ); } )
.done( function(){ hoge3( obj3 ); } );
ってやるしかなさそう？
おれもこれ知りたい
failにも変数渡したいけどどうしたらいいのか
$.ajaxの引数のオブジェクトにこっそり入れても駄目だったんだよな
何したいか知らんけど、
これでヒントになるだろ？
var a = 1;
hoge1( obj )
.then( function(){
a++;
return hoge2(obj);
})
.then(function(){
a++;
return hoge3( obj );
});
例えばpromiseが三つ有って
p1、p2、p3
としてそれぞれの引数に
obj1、obj2、obj3
を与えて実行したい。
p1、p2、p3の順に実行したいのでpromise.allは使えない？と思うんですが、
こういう場合です。
promiseが三つ有って、
p1 = hoge(obj1)
p2 = hoge(obj2)
p3 = hoge(obj3)
ってやればいいだけだろ？
あれ？
それってp1に何十秒かかってもp1が終わってからp2が実行されるんでしたか?
p1が終わってからp2を実行したいなら、
p1のthenの中に書けばいいじゃん。
そのための非同期なんだから。
何を言ってるのか全くわからん。
入れ子にすれば出来るのは分かってるんですが、実際はp1～p9くらいまであるので入れ子にはしたくない
だから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);
})
サンキュウ、
上手く行ったよ。君優秀だな。
助かったよ！
最後にカンマつけさせろよ！
＞ return hoge2(obj2);
を実行しなくても次のthenに行くんだが
それは何でよ？
文字
<button>ボタン</button>
</div>
の場合JQueryのchildren()では '文字' は取れないのでしょうか？
文字を取るならばtext()だよ。
このdivの中身を全部他のdivに移動したいんですが、どういう方法がお勧めですか？
$('#div2').append($('#div1').contents());
または
$('#div1').contents().appendTo('#div2');
.html()は？
HTMLの文字列にするのが無駄だし
イベントハンドラなどのHTMLで表現できない情報が
抜け落ちるので、要素の移動のときにそんなもの使わない。
エラーだけど本文があるとき がたまにあるんだけど
エラーの時の本文ってどうやって取得すればいいですかね
取得できるんだから、そこから取得すればいい
'price': "100",
'name': '文字１',
'color': 'aka'
};
$('#hoge').attr('obj', objSet);
で値を設定した場合、#hogeからpriceやnameなどの値を
取得するにはどうしたらいいでしょうか？
使い方が間違っている。
attrはHTML要素の属性を変えるもの
<div id="hoge" obj="ここ"> にオブジェクトなんか入れられないだろう？
そういうときにはdataを使うんだよ。
$('#hoge').data('obj', objSet);
console.log($('#hoge').data('obj'));
参考までに、こうやる方法もある。
$('#hoge').data(objSet);
console.log($('#hoge').data('price'));
ttp://js.studio-kingdom.com/jquery/data/data $('<p>2</p>').insertAfter('table');
$('<p>3</p>').insertAfter('table');
table タグの直後に、p タグを、1,2,3の順に挿入したら、
3,2,1の順になったのだが、1,2,3の順番にするには、どうすればいい？
新たに、<div>でも作って、そこに入れればいいのかな？
DOMの操作は出来るだけまとめて少なくする方がいいよ
条件判定などをして、動的に決まる場合
insertAfter で追加していくと、逆順になってしまうので、
皆さん、どうしているのかなと思って
tableの次に固定の要素あればそれにinsertBefore
或いは、$('<p class="hoge">1</p>').insertAfter($('p. hoge').last());
.insertAfter($('p. hoge').length ? $('p. hoge').last() : $('table'));
F12で見るとその要素に「object」と表示されて
入ってるようには見えますが違うのでしょうか？
dataだとキャッシュ使われて古い値が取得されてしまいます。
値は動的に変わるので機能しないのです。
以前それ知らなくて、data使ってて取得できずattrならできるので
聞いたらattrで正しいとの回答でした（確かここだったような）。
$.each辺りでできそうな気がするのですが（根拠なし）やはりダメですかね。
> F12で見るとその要素に「object」と表示されて
> 入ってるようには見えますが違うのでしょうか？
違います
> dataだとキャッシュ使われて古い値が取得されてしまいます。
そんなことはありません。
> 値は動的に変わるので機能しないのです。
意味がわかりませんが、正しく書けば機能します。
> 以前それ知らなくて、data使ってて取得できずattrならできるので
> 聞いたらattrで正しいとの回答でした（確かここだったような）。
それは違う話です。
> $.each辺りでできそうな気がするのですが（根拠なし）やはりダメですかね。
関係ありません。
えとな、まずコード書け、
そして問題があることをコードで示せ
そんなことはあるよｗ
えとな、コード書けって言ったよね？
「attrで、オブジェクト形式で複数の値をまとめて入れられる」とのことなのですね。
失礼しました。
dataのキャッシュについては検証済みなのでもういいです。
のような基本的な記述でも途中に動的要素がからむとすでに書いた通りです。
ajaxみたいにキャッシュ無効にできるのなら別ですが。
console.log(key + ':' + value);
});
惜しい、もうちょっとなのに。
data()で動きましたって。
data()で動きましたって言ってるのに
これ以上何の話がしたいのでしょうか？
ttp://qiita.com/Kta-M/items/2eda39750abd10df9801 ttp://qiita.com/toshiharu-irie/items/e7f803085000c4008f51 ttps://w3g.jp/blog/jquery-data-attr-cache ブラウザの問題とか、ライブラリがからむと
そう簡単にはいかなくなる場合もある。
ttp://xirasaya.com/?m=detail&hid=428 varとかも。コードが複雑になってくると面倒なことは確か。
動きましたとか言ってるのはちょこっと書いてるだけだろ。
動くってことでいいんじゃね？ｗ
のコードは動いてるしね。
そもそもdataで代入する時の話じゃないし、
attrでdata-*触るのはご法度だし、
無理やり問題を見つけてくればあるけど、
今回には全く関係ない話だ
「正しく書けば」とは？
「dataメソッドは～jQuery内のキャッシュ(jQuery.cache)に保存したり、保存した値を取得したりするメソッドです。」
by 改訂新版 jQuery本格入門
いや、だからなんだとｗ
「dataメソッドは～jQuery内のキャッシュ(jQuery.cache)に保存したり、保存した値を取得したりするメソッドです。」
↑もちろんここに書いてあるとおり、正しく動きます。
動かないコード例がないんだから
動くってことだよ。
無理やりですかね？記事通りそのままでそうは思えませんが。
そもそもdataでだめだったから強引にattrでやってみて
というのが発端で、それが元の質問に至ったのです。
裏技的な（？）何かないかなと。
今回はあきらめます。みなさんありがとうございました。
その論理はおかしいｗ
> そもそもdataでだめだったから強引にattrでやってみて
それが間違いだからね。それはやったらだめな行為。
原則として data-* には attrでアクセスしてはいけない。
自分でだめなやり方をやって、動きがおかしくなって、
jQueryがバグってるんだーっていうのは素人の行為
動かない例を出せばいいだけだよ。
そうすれば、動かない理由が、コード書いたやつの
バグだって明らかになるからさｗ
おかしいね。
なんでで動くって言ってるのに、
諦めるっていうの？動いているよね。どう見ても。
だけど気に入らないんだよね。
動くことが気に入らない
>原則として data-* には attrでアクセスしてはいけない。
してません。data-* にはdata()でアクセスしてました。
例は面倒です。
動いています。
IE11以上ってちとな
困る理由でもあるのかね？
jQueryは1系使えばIE6以上で
同じ動きをしたはずだが。
動きました！
平和でいいね
現にで動いているしね。
なんで1系限定なのさ
必死杉
IE6に対応しているのが1系だからだよ？
もちろん2系も3系も同じ動きをする。
対応ブラウザが違うだけ。
記事の内容は今回関係ないでしょｗ
が動くかどうかの話なんだから。
そしてもちろん動いている。
記事のことそのまんまなんだが
2行だけで動的要素もなけりゃそりゃ動くだろ
だから何としか
適当なFORMオブジェクトをこっそり作って
それにいろいろ情報を持たせているんだけど
これってあまり褒められた手法ではないよね？
それともみんなやってる？
なんか途中から変だと感じてはいたがいつもの人か
jQueryに不利なカキコは許さないからね！
の人
やってない。
そっち方面に話持っていかなくていいから
使う必要が有るときだけだな。
JavaScriptから読み書きはしない。
If-Modified-Since を有効活用したいんだけど
ajaxで取得した Last-Modified: を取っておいて
次回リクエスト時に If-Modified-Since: をセットして
というのを手動でやればよさそうなんだけど
なんかこの辺を自動でやってくれるオプションとかある？
例えば何を？
処理中のフラグとか
に渡される引数 ってなに？
ttps://api.jquery.com/jquery.ajax/ わざわざ入れるメリットは？
気持ち悪くないか？
わからないならROMってろやカスが
やっぱり他の人は、そんなものはないと
判断せざるを得ないなｗ
自分の知らないテクニックには御法度で追い出す程度のレベル
そういう方向にしようとしなくていいからｗ
グローバル変数よりはマシよ
var hoge = array[0];
var fuge = array[1];
とやってるのですがこれをもっとすっきりする方法はありませんか？
var hoge+fuge = test.split('@');
みたいに書く方法があれば嬉しいのですが
var [hoge,fuge] = test.split('@');
ただし、対応していないブラウザ(IEとか)も一部あるので注意。
すべてのブラウザを考えるなら愚直に3行で書くしかない。
なるほど、それで話に関係ない聞かれてもいないver1/2の違いなんて説明しちゃうわけだな
表の列ごとの集計値を求めるプラグインを
作成しようとしております。
この表にはヘッダーのフィルタープラグインを
入れており、フィルターするごとに対象となった
行のみを集計対象としたいと思っています。（最大１０行）
以下のようなコードを書いたのですが、
常に変数aaaにはフィルター前の集計値が表示され、
フィルタの抽出結果に対応できません。
どこを直せば、抽出結果のみの集計となるのでしょうか。
<script type="text/javascript">
var val = 0;
$(function() {
$("#shukei tr:gt(0):lt(10)").each(function() {
val に各行の列の値を加算する処理
});
$("#aaa").html(val)
});
</script>
$("#shukei tr").slice(0, 11).each(function() {
.slice(0, 10)
だな
早速
<script type=
<script type="text/javascript">
var val = 0;
$(function() {
$("#shukei tr").slice(0,19).each(function() {
val に各行の列の値を加算する処理;
});
$("#aaa").html(val)
});
</script>
とやったのですが、テーブルヘッダーでフィルタをかけても
フィルタ結果が反映されず、最大値である10行の時の列集計が
表示されます。
「フィルタをかけたとき」というアクションの受け方が
誤っているのでしょうか。
表示されている行のみ対象
$("#shukei tr:visible").slice(0,19)
どのような状態でフィルターされているかで対処は変わる
<button id="btn1">ボタン１</button>
<button id="btn2">ボタン２</button>
が有る場合に
$('#btn1').on('click', function(){...});
$('#btn2').on('click', function(){...});
でclickイベントの処理が出来ますが、これをまとめて、
$('#btn1', '#btn2').on('click', function(){...}); // ?
みたいな書き方は出来ませんか？
要するに二つのボタンに同じ関数を割り当てたいのです。
実際は、buttonにはidが付いていなくて、他のdivに
var $btn1 = $('<button>1</button>').appendTo($div);
var $btn2 = $('<button>2</button>').appendTo($div);
こんなふうに追加しています。
この場合に on('click' を一つにまとめるにはどう書けば良いでしょうか？
同じクラスを割り当てるべき。
以下は推奨しない
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(){...});
できました！ありがとうございました！
フィルターのかけ方も考慮に入れないといけなかったのですね。勉強になりました。
現在'#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>
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(ミリ秒)を適当な数値にして予測して処理するってこともできるよ
ありがとうございます！
試してみます！
ちと変に手間だけど行数も速度も変わらないしよしとします。
data-よりマシですので。
うざい
例えば10行4列の票があるとして、3行目～6行目の2列が同じであった場合、
セルを結合させたいと思っているのですが、Jqueryで可能なのでしょうか。
htmlではrowspanにてあらかじめ結合する数がわかっていないと結合できなかったと思います。
「4行目の2列を参照する際に前行の2列を比較し、内容が同一であれば結合する」と
いったように、後付けでのセル結合操作は可能なのでしょうか。
が完了してから関数を実行したいんだけど
どうしたらいいかな
<script src="jquery.js"></script>
<script>
function foo() {
alert( "You are running jQuery version: " + $.fn.jquery );
}
foo();
</script>
これが動くのが、jQueryのファイル読み込みが完了してから
関数が実行されていることの証拠
お前がうざい
参考になる人もいるかもしれんだろ
下と比較して同じならheightを2倍にし、下をvisibility:hidden
でできそうな気がしないでもない
結合でなく単に表示を消してるだけだがｗ
俺なら<table>タグ使わずに<div>をfloatで表のように組む
CSS3時代の今において、
tableとdivの違いは、displayのデフォルトが違うだけだよ。
だからdivをfloatで表のように組んで作れるのであれば、
そのdivをtableに置き換えれば、tableタグのまま同じことができる。
前スレ896を参考にしろ
jQuery版は作る奴がさじを投げたのでない
ttps://jsfiddle.net/eoxzjqwu/43/ その先にjQuery版があったよ。
ttps://jsfiddle.net/eoxzjqwu/46/ <input size="9" id="test1"/>
<input size="9" id="test2"/>
<input size="9" id="test3"/>
<input size="9" id="test4"/>
といった４つのテキストボックスがあったとして、
「テキストボックスの値が変更となったら」という
処理をすべてのテキストボックスに与えたい場合、
$('#test1').change.function(e) {
処理
}
$('#test2').change.function(e) {
処理
}
$('#test3').change.function(e) {
処理
}
$('#test4').change.function(e) {
処理
}
と繰り替えすしかないのでしょうか。
それは縦横の複合連結に対応してないんじゃないか？
それはが仕様を決めないと
どうしようもない。
4 4 4
4 2 4
4 4 4
をどうするのが正解かなんてわからない。
or
$('#test1, #test2, #test3, #test4').chang(function(e) {...
その繰り返しと等価の書き方は
$('#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だと思えばいい。
ところがレスポンシブとなると無理が出てくる、または面倒になる場合がある
ってもくらいなら問題ないだろうが
幅やらコンテンツ量が不明なので何とも言えず
問題点はそこじゃない(その例でもは縦⇒横連結の連続処理でレイアウトが崩れるだろうが)
はcolspan属性またはrowspan属性が2以上のセルを結合できない
ttps://jsfiddle.net/eoxzjqwu/49/ ttps://jsfiddle.net/eoxzjqwu/46/ は動いているみたいだけど？
すいません。縦の結合しかしないので
横は考えなくていいです。
結合された要素も縦に結合出来ない
それは問題が発生しないHTMLなだけ
問題点を理解してくれ
なんなんだこいつ？
条件によって崩れるのは致命的なので
ttps://jsfiddle.net/eoxzjqwu/46/ が汎用性で大きく劣るのは事実だろうね 初めから<td colspan="2">や<td rowspan="2">が存在している場合にjQuery版は正しく処理できないのか
何も難しいことではないと思うけど
部分的に書き換えようとするからややこしくなるじゃないかな？
それに加えてcolspan,rowspanの値も比較する必要があるかと
いずれにしてもサンプルコードは出ているのだから質問者が好きなように取り込めば解決するでしょう
質問者が仕様をいうまでは放置でいいんじゃない。
jQueryじゃない方も、rowspanが存在していてかつ同じ値が入っているとき
それをマージすることは出来てないし、仕様にはなかったけど、
面白そうなので中途半端に対応してみました。程度の意味でしか無い。
例えばこれを横につなげるときどうするの？ッて話。
１ １ ３
↑ ↑ 3
↑ ２ ３
（↑は上のセルのrowspan）
入っていたときも考慮されてないね。
ありがとうございます！
色々記述の仕方があるんですね、勉強になりました。
今回はの方法を使ってみたところ、無事動作しました！
本当にありがとうございました。
表をつくったのですが、プラグインを利用したソートを実行後に
自作のプラグインを実行することは可能でしょうか。
具体的には、
<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() {
～同一レコード文字色変更～
プラグインの質問はこのスレの対象外。
そんなもの作ったところしかわからないからね。
知らないことをわざわざ代わりに調べるほど暇じゃない
それが良く出来たプラグインなら、
ソートを実行したあとに発生するイベントぐらいあるでしょう。
.each(function(){});
どうしたらいいでしょうか？a要素の子ノード(テキストノードや要素ノードなど)は残します。
$(this).replaceWith($(this).html());
});
なるほど・・それは思いつきませんでした。
ありがとうございます。
ほんと普及しないよなｗ
$('a').replaceWith(function(i, e){
return e;
});
ES6で書けば一行
$('a').replaceWith((i, e) => e)
回答ありがとうございます。
返事が遅くなりもうしわけありません。
すみません、書き方があいまいでした。
プラグインを使用してでも使用しなくてでもいいのですが、
テーブルがソートやフィルタ等により変更となった際に、
「テーブルの表示が切り替わったら」というステータスを検知する
ことは可能なのでしょうか。
で教えていただいたやり方を試してみたのですが、思うようにできませんでした。
.endは一つ前の状態にもどすとのことなのですが、サンプルの趣旨を理解できませんでした。orz
荒らしがわざと変な答えを書いたと思えばいいよ。
プラグインに書き加えることが理想的(スレ違いなのでここでは質問しない)
そうでないなら表上のヘッダーにイベントを与えておいてsetTimeoutで
処理後、適当な時間で処理を開始するような感じでいいんじゃないの？
$('body').on('click', 'ヘッダーの要素', function() {
setTimeout(function() {
$('#myTable').each(function(){処理});
}, 500);
});
並び替え機能はプラグインが提供しているのだから、
プラグインを使用しない方法はない。
もしくはのような効率の悪い方法だけ
だからプラグインの使い方を自分で調べるしか無いよ。
もしくはそのマイナーなプラグインの使い方を知っている人や
調べてくれる人が登場するのを待つしかない。
それを事前に知る方法はあるの？
ブラウザを使わなければいい
location header
meta element
window.location
このクラス下に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を書いてもどうしてもスライドの１枚目のままになります。。
どなたかご教授ください。
jsを覚えないとかなりしんどい
こういうのは公式を見ればfunctionだのapiだのがあるので、そこを参考にする
そして多分cycle2じゃないとapiはない
ttp://malsup.com/jquery/cycle2/api/#commands 大体こんなコードで動く
$(function(){
if("URL内に#の有無"){
for(i=0;i<"#以降の数値";i++){
$('.cycle-slideshow').cycle('next');
}
}
})
やはり私には難しそうです。。
素直にスライドの何番目を見てね、と伝えるしかないのか。。
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は取得できませんでした
何が目的なのか解らないんだけど
こういう事かな？
var obj = {};
obj.a = function (str) {
return '#' + str;
};
obj.b = function (str) {
return str + '#';
}
obj.c = function (data) {
return this.b(data);
};
例えですので内部関数で親関数を利用したいという感じです
これじゃ駄目なの？
var obj = function (str) {
this.str = '#' + str;
};
obj.prototype.func = function() {
return this.str + '#';
};
var Obj = new obj('文字列');
alert(Obj.func());
thisとprototypeの関係性を理解してないので勉強すべし
のようにインスタンスを作らない形にするか、のようにインスタンスを作るか、Object.createでインスタンスを作るか
親関数というオレオレ用語を使ってるのも直した方がいいよ
外側のスコープで、that = this; のように、thisをthatに代入しておくとか？
そこで質問なのですが、jsはどのぐらいの範囲を覚えればいいんでしょうか？
とりあえずjs入門書を買って基礎を学ぼうと思ってます。
カレンダーの作り方、電卓の作り方、フォーム自動計算入力とか作れれば十分ですか？
コーダーなので、なんたら.jsとかjsファイルの開発系までの能力は求めてないです。
後は覚えた基本の応用力と発想力だ
しいて言えば、アニメーションのさせ方やjson辺り少し知っておいた方が発想は膨らむ
jqueryも使われる頻度高いのでどういうものか知っておくといいかな
大抵はCSSで問題ないのだけど
例えば、クリックしたらCSSクラスを追加したりパラメータ弄ったりとかだね
ラジオボタンをクリックしたら何かが開くとかタブ表示みたいなことしたいとか
ブラウザによって挙動が変わるからそこをカバーするとか
CSSだけじゃ辛いものがあるのをカバーする使い方が多い
あとサイトのトップによくあるスライダーとかをカスタマイズする際に知識が役立つ
ajax辺りはこんなことできるんだ程度で知っていればいいかな
どうもありがとうございます。
comic loスレより転載
パス:sage
ttp://www1.axfc.net/u/3712796 チマチマと手を動かすだけのお仕事でしょ。
そんなのに応用力とか発想力とかいらない。
設計書に忠実にシンプルに納期を守ってコードを書けば良い。
余計な処理とかテクニックとかまったくイランから。
ソースコードが冗長すぎだな
240行程あるが、50行程度で書けるだろう。
このコードを無駄が無いコードに修正しなさいと言う
初心者向けの課題として使えそうだｗ
ソースコードが冗長よりも
作者とタイトルとかのデータの部分をjsonデータにして
テキストに別に書いて読み込んで使うべき
そこは切り出せばいいだけだし、
ファイル1つにすればそうなるのは当然だから
どうでもいい。
コーディングでそんな的確な指示書なんてあるか？？
仕様書という名のワイヤー兼原稿とデザインが殆どだろ
そこに吹き出しでここはクリックするとメニューが開くとか書いてあるだけだろｗ
ttps://twitter.com/ ですが上メニューにあるメッセージを押すとモーダルが開き、そして画面遷移できるという仕組みについていまいち分かりません。
ソースを見たところiframeなどは使用していないみたいです。
私の考えられる手法では、
buttonからdisplay:noneなどの操作を呼び出して、あたかも遷移しているように見せている、
そしてメッセージ投稿などはajaxで、受信はpusherなどを利用している、というような仕組みです。
どなたかtwitterのメッセージモーダルがどのような仕組みになっているか教えてください；；
F12 開発者ツールを使うか、右クリックメニューから要素の検索でもすれば？
自己完結するなら何も書かなくていいと思うよ
ちょっと古いブラウザ用には最新のjQuery＋Migrateってやるのが今風なの？
要素にスクロールバーがついているとき
要素の長さを知る方法を教えて
ttp://jquery.com/download/ jQueryダウンロードページの 中ほどに書いてあるでしょ。
To see all available files and versions, visit
ttps://code.jquery.com ここに全部あるよ。
jQuery Migrate Pluginは3.0で変更した挙動を
昔の仕様に合わせるもので、一旦昔の仕様にしてから
少しずつ新しくしていくためのものだよ。
そのためのAPIが備わってる。
Migrate Pluginは最終的には消すために存在している。
文言をくっつけ、3列表示で出力する表を作っております。
例えば、番号が20から始まる場合、
2001月、2002月、2003月
2004月、2005月、2006月
2007月、2008月、2009月
・・・・・・
といった感じです。
この後、番号が99まで続いていくわけですが、
JQUERYにて、月でフィルタをかけ、
例えば04月のデータだけ引っ張ってこれるような
プラグインを作成したいと思っています。
この場合、
2004月、2104月、2204月
2304月、2404月、2504月
2604月、2704月、2804月
・・・・・
となります。
参考にできるサイトはないかと思い調べてみたのですが、
列のフィルタばかりで参考になりそうなサイトは
ありませんでした。
そもそも実現可能なのでしょうか。
> プラグインを作成したいと思っています。
間違い。
これはプラグインを作成するようなものじゃない。
単にjQueryを使ってコードを書くだけの話だ。
番号をkeyにして、objectに格納
keyでhtmlを書き出せば良いんじゃないの？
twitterなら、bootstrapだから、LESS, SASS で書いている
SASSなら、Compass, Bourbon など、様々なフレームワーク・APIがある。
モーダル画面の機能もあるはず
マルチポストはしないように。1つのスレにだけ書き込んで！
(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 だけが取り出せる
DB(?)から抽出してhtmlを生成するのか、
htmlから抽出するのかで違ってくる
そのDBがどんな形式なのかも提示しないとな
ありがとうございます。
可能なんですね、なんとなくイメージができました！
プラグイン化はせずjqueryで実装してみます。
今回の表はもう少し詳しく書くと、<td>の中に、番号ごとの
各月の作業明細を記載した表（table）を組み込んでいます。
月を選択するボタンを設置して、選択された以外の月の
セルについては、<td>内の表も含め削除して表示しようと
考えております。
各<td>に対してIDかKEYを割り振り、あとはで記載して
いただいたようなフィルタを実装するイメージで可能でしょうか。
フィルタなんて適当に条件にマッチするかどうか？の
フィルタ関数作ればいいだけ。
あとはそのフィルタ関数をどこで使うかって話。
方針としては二通りある。
1. JavaScript側で全データを持って条件が変わるごとにテーブルを一から生成するか
（初期化時にHTMLからデータをかき集めてJavaScriptに持たせて以降はすべてこのデータを使う場合もこっち））
2. HTML側で全データを持って表示非表示の切り替えだけで対応するか
1の方針だとテーブルの中身を消してから作り直すことになるので、
例えばテーブルの中に<input>が有ったりしたらその中身は消えてしまうし、
それ以外の情報があったりしたら消えるか同期が取るのが難しくなる。
2だとそんなことはないが、仕様によっては表示非表示の切り替えだけでは
大変になる可能性がある。
なおフィルタ関数は1, 2のどちらでも同じものが使えるはず。
あと、そもそもテーブルを使うのが間違じゃないか？
テーブル使わなくてもdivでも使って、3列で折り返せばいいだろ？
JavaScriptを使うときにHTMLとCSSの知識は必須。
これを疎かにすると必要ないコードを書かなければならなくなる。
月が選択されるたびに、表示するデータを、作った方がよいかも
JSの配列・辞書に、その月のデータを作る、素になるデータを持っておく
そしてそこからtableを生成する。
しかしそのデータに直接紐付かない情報は生成できない。
（例えば特定のセルに付けたclickイベントハンドラとかね）
ならばそれらの情報をすべてJSのの変数にもたせばいいではないか？
そこからtableを生成すればいい。だがそうするとパフォーマンスが悪くなるではないか？
そうだ変更したところだけ更新するようにしよう。
という考えで作られたのがReactなどのVirtual DOMと呼ばれるもの。
Reactなどのフレームワークを使ったら簡単にできるかもしれない。
だがそれを勉強するのにも導入するにもコストがかかるんだねｗ
下記のコードではまだ文字化けします。
$(
var uniArray = Encoding.convert(sjisArray, 'UTF8', 'SJIS');
var result = Encoding.codeToString(uniArray);
そのコードでおかしくなるとは思えない！！！
いや、そもそも e.target.result って配列なの？
>$(
2chのバグだろ
書き込み確認画面が出る際、" を使うと、そこで文字列の終了と解釈される。
\" とエスケープすると、書き込めないか？
$(\" ～ \")
ありがとうございます！
２の方法でやってみます！
文字化けするから、これは無理
UTF-8しか、ブラウザが対応していない
読み込む時点で、sjisだと言っておけば、適当にちゃんとした文字列にかわらんかったっけ？
XHRのoverride系のやつ。
Content-Typeでcharsetを指定すればいいのでは？
ttps://www.google.co.jp/search?q=content-type+charset+header+apache XMLHttpRequest.setRequestHeader("Content-Type", "text/plain;charset=SHIFT_JIS”);
だね。
サポートするブラウザは限られてるようだが
TextDecoder.decode() メソッドもある
そうではなく、サーバのレスポンスヘッダをしていするのが正規な方法かと
あと、text/plainではなく、text/csvですね
CSVファイルを、TeraPad で、UTF-8に変換すればいい
<(".*?"|'.*?'|[^'"])*?>
<("[^"]*"|'[^']*'|[^'">])*>
などの正規表現使ってreplaceで""に置き換えるのと
text()使うのと
どちらがスクリプトやらに対して安全でしょうか？
Netflixを利用しているかたにしか分からないのですが、
コンテンツのサムネイルが並んでいいてマウスカーソルをサムネイルに重ねると
サムネイルが大きくなって説明文が見えますが、
ページをスクロールするだけなのに、サムネイルの上にカーソルが乗るだけで
サムネイルが大きくなってとてもうっとうしいのです。
これを大きくさせないようにしたいのですが、どなたか方法をわかりませんか？
(1) サムネイルに利用されている CSS を調べる（ブラウザの開発ツールで可能）
(2) その CSS の :hover 擬似クラスのスタイルを UA スタイルシートで上書きする（ UA スタイルシート機能は、最初から組み込まれているブラウザもあるが、ブラウザアドオンがいることもある）
とうまくいく可能性がある（その反応が :hover でなく js で実装されている場合は、 js のふるまいを上書きする必要があるが以下省略）。
単に :hover 擬似クラスのスタイルを無効化するだけだと、普通にマウスを重ねたときも反応しなくなるが、 CSS transition を利用すれば、マウスが 1 秒以上 hover したら起動するように設定できる可能性もある
各<td>内の表にはIDを社員番号_連番で付番し、
ページ上部のボタンを押下すると、各ボタンに
表示されている連番がIDに含まれている表のみを表示しようとしています。
作成したスクリプトは以下の通りです。
（サンプルのため、非表示とするIDの連番は05固定でやっています）
<script>
$(function() {
$('#btn').click(function(e) {
$(
<script>
$(function() {
$('#btn').click(function(e) {
$("#table_test [id $= '05']").hide();
});
});
</script>
同一行内で3つある表の内1つが非表示となった場合、ボタンを押下すると
非表示の<td>を詰めて、左詰めで表示されるのですが、
その際空いた一番右側の<td>にはその下の行にある
一番左側の<td>内の表を1段上の右に移動させたいと考えております。
しかし、実際には行間の移動はされず、右の<td>は空欄となり、
その下の行は左から開始されています。
この現象を解消するには、ボタン押下時に非該当<td>の非表示だけではなく
表自体の整形までスクリプトで行う以外に方法はないでしょうか。
それ table にする意味あるの？
table 使わずに display: inline-block か flex 使うほうが楽できると思うよ
2chの書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
これは、2chのバグだろう
" を、\" とエスケープすれば良いかも
無い。なぜかというと、そういう動作をするものは、表じゃない。
(行と列に意味があるものではない)
3つずつ並んだ社員番号でしかない。
の言うように、inline-blockな要素として並べるのが一番まともだと思うよ。
divで作った3つ分の幅持たせた枠に、
inline-blockなspanを並べるのが一番きれいだと思う。
ありがとうございました、できました！
いまボタンをさくせいしており、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>
$('#btn2').click(function(e) {
$("#table_test")
.find("div").show().end()
.find("div[id $= '04']").hide();
});
div[id$=“04”] {
display: none;
}
というスタイルを追加する方がスマートかな
ありがとうございます！
色々なやり方があるのですね、勉強になりました。
「04を非表示」は、なんとか色々参考にしながらできたのですが、
「04“以外”を表示」がどうしてもできないのです。
いただいたサンプルのように、シンプルに1行で実現できる式はあるのでしょうか。
04以外を表示って、
全部表示して04隠すのと何か違うの？
function a(num) { // 引数numからhtmlを生成 }
a(num);
$(btn).click(function() { a(num); });
こんな感じが理想的
自分で作れ
$("#table_test")
.find("div").show().end()
.find("div[id $= '04']").hide();
});
ID:???(506/507)
0527 Name_Not_Found 2016/09/14 19:00:17
div[id$=“04”] {
display: none;
}
というスタイルを追加する方がスマートかな
すみません、自分の記載があやまっていました、、、
正しくは04以外を非表示です。
もうしわけありません
何度も投稿、もうしわけありません。
529さんの内容で問題ありませんでした。
お手数をお掛けしてすみませんでした。
この場合、最初にすべて隠してから特定のidだけを表示するという方法ですが、2段階にすることなく、「04以外のid」を指定する記述の方法はないものでしょうか。
伝わりづらくてすみません
やる意味があんまり感じられないけど、$('#table_test div:not(#04)')
が1番見た目わかりやすいかな。
ただ、そのdivのon('click')で自分だけを表示させるなら、
$('#table_test div').on('click',function(){
$('#table_test div').hide()
$(this).show()
})
の方が楽そう。
初歩的な方法
ifで04じゃないのに対して非表示
$("#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();
});
});
クソなやり取りしてるんじゃないよ。
まずJavaScriptだけでどうにかしようとするな。
ユーザーインターフェースは、JavaScriptとHTMLとCSSを
組み合わせてやるもんだ。組み合わせると言っても密な状態にはしないが。
まず、showとかhideをするものたち。これに共通の名前がついてないのが悪い。
前提として名前を正しくつけろ。
そうすりゃ、わかりやすいコードで実現できる。
ttps://jsfiddle.net/71s545Lu/ $(function() {
$('#buttons').on('click', 'button', function(e) {
$(".month").hide().filter('#month' + $(this).val()).show();
});
});
ttps://jsfiddle.net/71s545Lu/1/ 本来はJavaScriptは状態だけを管理しするもので、
その状態でどう表示するかっていうのはCSSの責務。
今回の例は状態に対応する表示のパターンが少ないからあまりメリットは
感じられないだろうけど、状態によってあちこちのブロックを表示したり
非表示にしたりする場合は、このパターンが便利。
なおCSSが冗長になる問題はSCSSを使えば解決できる。
ttps://jsfiddle.net/71s545Lu/2/ 大抵はこっちのほうが良いだろう。
はデザインがもっと複雑になった場合に使う。
ttps://jsfiddle.net/71s545Lu/3/ 皆さん、いろいろとありがとうございました！
教えていただいたパターンを色々試し、希望する形ができました。
最近jqueryを試し始めて、基礎がわかっていなくてすみません。
色々サンプルありがとうございました。
教えていただいた内容を取り入れてやってみます！
などとしたときに unkoではじまるnameを持つ要素一覧が取得できますが
そのときの nameの種類ｂﾌ一覧は どうしたら取得できますか？
こんな感じかな
$.unique($("[name^=unko]").map(function(){return this.name}))
$.unique($.map($('[name^=unkno]'), function(e) { return e.name }));
バージョンによっては動かないのかな
漏れなぞ、あれこれと、jquery-ui のデザインのテーマを決めて、
ダウンロードするだけで達成感を得たわw
もう、お腹いっぱい。コーディングは、せんでもええ
もしくは最後にget()が必要。
$.unique($("[name^=unko]").map(function(){return this.name})).get()
普通はjQueryオブジェクトはDOM要素が入った配列なんだが、
mapを使った場合は、returnした要素が入っているjQueryオブジェクトになってる。
jQueryオブジェクトのままでその後の処理ができるならこれでもいいけどね。
でもなかなか扱いが難しい。どういうときに便利なんだろうかね。
jQuery#forEachやjQuery#filterが普通に使えるし
あと、は重複削除してほしいといわれているわけでもないのに jQuery.unique を使うのが意味不明
継続処理で重複検出時に例外を返す仕様だったらどうする？
もしくは、重複を許容する仕様だったらどうする？
× jQuery#forEach
○ jQuery#each
> あと、は重複削除してほしいといわれているわけでもないのに jQuery.unique を使うのが意味不明
それこそに言うべきでは？ｗ
どっちにしろそれくらい質問者が調節すればいい
がやってたから真似しただけｗ
すべてはが悪い。
544は実に聡明。何も悪くない。
そんな回答するくらいなら回答しない方がマシだからレスするな。
>543を見過ごしたのは自分だが、真似しただけで>543に責任を押しつけはないだろ
それでは「質問の要件は全く見ていません」「回答者に文句言いたかっただけ」と白状しているようなものだ
言いがかりをつけたいだけにしか読めないぞ
jQuery.uniqueに関しては>543-544は同等に悪い
要件は種類の一覧なんだから重複なしだろ。
↓お前このクイズに正解してみｗ
オセロのコマは何種類あるでしょうか？
ttp://nazo-nazo.com/sp/cat398/post-73.html 要件を見てないお前が悪い。
ｂﾌが鍵だなｗ
要件は種類ですよ？
なるほど、「種類」は見てなかったな
しかし、「種類 = 重複削除」となる発想がよく分からん…
例えば、次の名前一覧があるとする
・田中太郎
・田中咲夜
・山本祐一
・榊原加奈子
・Ken
・Julia
・カカロット
「名前の種類を出して下さい」という問に対して名前を重複削除して上のリストをそのまま出す人がいるか？
普通は「性別」「人種」「国籍」「姓」などのカテゴライズする基準を決めて分類すると思うが
の分類法が分からんと「nameの種類」を出すことは出来ない
つまり、相変わらず、jQuery.uniqueを使う理由が分からん
> 「名前の種類を出して下さい」という問に対して名前を重複削除して上のリストをそのまま出す人がいるか？
いるだろｗ
> 普通は「性別」「人種」「国籍」「姓」などのカテゴライズする基準を決めて分類すると思うが
いつ分類の話になったんだよｗ
今は「名前の種類」の話だろ。
だから、「名前の種類」とは何だ？
名前そのものが種類ならそれは種類ではないだろ
「名前の一覧」と「名前の種類の一覧」がどうして同じ結果になるんだ？
> だから、「名前の種類」とは何だ？
種類っていうのは同じもの（名前の場合は、その文字）を
一つとして数えた場合の数のことでしょ？
> 「名前の一覧」と「名前の種類の一覧」がどうして同じ結果になるんだ？
同じじゃないよ。種類は同じ名前があった場合は一つとして数える。
「名前の一覧」と「名前の種類の一覧」が同じ結果になるのは
すべての名前が違う場合のみ。
nameの基準で見て、ｂﾌが共通するものに於いて、
その全体の内容をわかるようにしたものなんだよ
「ｂﾌ」の形態が不明なら「種類」は定義できないんだよｗ
以下のスクリプトにて、div要素の内、
①idが'1G'から始まる要素以外を隠す
②最後が'05'で終わる要素以外を隠す
としたいのですが、実行してみると
①は実行されるのですが②が実行されません。
コード上でどこかおかしなところがあるのでしょうか。
$("#tasktable")
.find("div").show().end()
.find("div").not("#tasktable [id ^= '1G']").hide().end()
.find("div").not("#tasktable [id $= '05']").hide().end()
書こうとするんだろうね。
読込速度とか変わってくるものなのでしょうか
.find("div").not("#tasktable [id ^= '1G']").hide().end()
ここでnot("#tasktable [id ^= '1G']")以外はすでに不可視状態
.find("div").not("#tasktable [id ^= '1G'], #tasktable [id $= '05']").hide()
読み込み速度なんて、0.1ミリ秒レベルの世界の違いだよｗ
気にするだけ無駄。
それよりも、開発速度の方を気にした方がいい。
読みやすいコードと読みにくいコードで数時間の差は簡単にでる思ったほうが良い。
ちょっとの違いで数万円の違いだよ。バグの修正で数日かかったりしたら・・・？
読み込み速度を考えるのは、コードの可読性に満足できるようになってからでいい。
$("#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();
と同じ事
ありがとうございます。
確かに1G以外はすでに不可視状態なのですが、
最初が1Gでありかつ最後が05のものは表示されると思いました。
05かどうかが判定されていないみたいなんですよね。
まずはコードの可読性なんですね、心がけるようにします！
つまり、あなたは上司に「この掲示板のログから名前の種類の一覧を出してくれ」と指示を受けたら「重複削除した名前のリスト」を提出する
「名前の一覧を出してくれ」と指示を受けたら「重複削除していない名前の一覧」を提出するわけだな
正直、あなたは思い込みで独断先行するタイプにしか見えない
の言うことも正解だが、何万行にでもなると
理想的なセレクターの活用、コーディング、モード(use strict)
の違いで差は出てくるのは確かだよ
種類を聞かれたんだから、
単なる数じゃなくて重複を省いて種類で答えるよｗ
ポケモンは何種類？
ドリンクは何種類？
魚は何種類？
この聞き方で重複は省きますか？って聞くようだったら
仕事できないやつだと思われるよ。
name一覧 = {
unkoa: 1,
unkob: 1,
unkoc: 2,
unkod: 1
};
(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);
}());
「数を出してくれ」なんて指示を受けてないんだが、どこから数が出てきた？
ん？ だから数じゃなくて種類を答えたいのなら
全種類書いてくれて良いんだよ。
（質問１）ポケモンの種類すべて答えてくれよ。
（質問２）その種類は何種類だと思う？ｗ
> ポケモンは何種類？
「ポケモンの種類」って何の種類だよ
君がいいたいのは「ポケモンの種族は何種類？」じゃないのか
常識的な感覚の持ち主なら回答する前に分類を尋ねる
分類名が何も書かれてないのだから例えば、「今までにリリースされたポケモンのゲーム作品の種類」を答えられても文句は言えないぞ
分類を隠して質問したら回答不能なケースはいくらでもある
日本人は何種類？
掲示板は何種類？
パソコンは何種類？
お前仕事できなそうだなｗ
種類の意味がわからなければ、
聞けばいいじゃないかｗ
でも明らかな場合にそれを聞くのは
それもまた仕事できなそうに見えるけどなｗ
> などとしたときに unkoではじまるnameを持つ要素一覧が取得できますが
> そのときの nameの種類の一覧は どうしたら取得できますか？
nameを持つ要素一覧が取得できますがといっていることからも
「nameを持つ要素一覧」が何かははっきりしている。
この流れで「nameの種類の一覧」の意味がわからないとしたら
仕事辞めたほうが良いよ。
「nameの種類ｂﾌ一覧」はわからんだろ？ｗ
俺からするとおまえは思い込みで突っ走りそうで安心して仕事を任せられないタイプだよ
そのnameの種類で意味がわからんやつがいるのか・・・
下記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">
曖昧なものをより厳密にしようとするのはプログラマの性であり、必要な事ももある
ここで「融通が利かない」とか言い出す奴はプログラマなんて止めてしまえ
顧客とのやり取りで曖昧にしてきた事が後になって問題になるケースはよく聞く事だ
あらゆる状況を想定して厳密にコードを書くのは良い事だ
他人のふりをするのはやめなさい。
>542のふりをする人って誰かいたっけ？
本物のなら他人のレスに文句を言う前にする事があるのでは？
お前だよお前。ちゃんとお礼を言え
キミがなら
> そのときの nameの種類ｂﾌ一覧は どうしたら取得できますか？
まずは「ｂﾌ」を修正するのがプログラマとしての性だ
なぜ俺がだと思ったのかさっぱりわからん
542を否定する立場をとっている俺が本人なら自虐趣味のある人って事になるが
542へレスしたいならにいってくれ
・質問に対する解釈が割れているのに「nameの種類ｂﾌ一覧」の意図を明らかにしない
・回答に対して解決したのか、解決しなかったのかを書かない
質問者本人が荒らしてないとしても荒れている場を見て何とも思わない時点で不誠実でいい加減な性格が透けて見えるよね
行追加ボタンでテーブルに行が追加されるたび、
リストボックスで選択可能の値を全行同等に書き換えたいです。
1行だと1のみのリストボックス
2行だと1.2のリストボックス
と言うように。
その際、選択されている各値は保持しておきたいです。
（再選択時に選択可能の値が書き換わってるような感じ）
可能でしょうか？
また、どのような処理がスマートでしょうか？
模索でいいからソースもとに質問する
誰にも意志が伝わらないよ
セレクトボックスのことか？
質問もう少しかえます。
テーブルに3行のデータがあります。
セレクトボックスの列を保有しています。
セレクトボックスには1～3までの値を選択出来るようになっています。
仮に1行目は1、2行目は2、3行目は3が選択されていたとします。
そこで行追加ボタンを押下したら、行が一行増えます。
そのタイミングで全行のセレクトボックスの値は1～4が選べるように変更になります。
1行目～3行目はそれぞれそのまま1、2、3が選ばれたままとしますが、再選択時には1～4が選択できるようになります。
うまく説明できなくてすいません。
少し濁している部分もあります。すいません。
例えば県を選んだら市を選び直すセレクトボックスがあると思います。
あんな感じで、なおかつ市はリセットされずに既存の値のままでいてほしい、というイメージです。
そのセレクトボックスのイベント
目的は何？
セレクトボックスのイベントではなく、行追加のイベントになります。
内容はぼかしてます。もう少し入り組んだ画面なのですが、わからない箇所だけ取り出してます。
目的はとりあえず置いててください。
すいません…
行追加のタイミングでajaxでリストボックスを全行作り直す感じですか？
trをcloneして全selectにoption要素ノードをappendすればいいのでは
対象のselect要素ノード郡にoption要素をappendしてからtrをclone→appendでいけるな
選択状態までcloneされるからもう一手間必要だが
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();
});
こんな感じかな？
なるほど。
毎回作るのではなくcloneで量産すればいいんですね！
その際valueにもともとの値をセットすれば、ちゃんと選択されていたものが選択された状態になる感じですか？
試してみます。ありがとう。
function createList() {
セレクトボックス作成関数
var html = '<select>';
for (var i=0; i<$('table tr').length; i++) {
html += '<option value="" + i + ''>...';
}
html += '</select>';
return html;
}
行追加後に全行の列0を空にして新しいselectに入れ替えて
行のインデックスの値にする
cloneするのは追加の一行だけだからvalueにセットするのは初期値
既存のselectはoptionを追加するだけなんだから何もしなくていい
すいません、理解できました！勘違いしてました。
作り直したCreateListは一個持って
appendだけすればいいですかね。
valueは必ずiとは限らず、
上から3、4、2、1とかバラバラの場合もあります。（選択による）
作り変え前に値を保持しておけばいいですね？
あっ…すいません、これ
セレクトボックス作り変えるんじゃなく、
オプションのみ追加することって可能なんですか？？
オプションのみの追加は可能
例
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>');
この場合optionのappendだけでいけそうですね。
参考になりました。ありがとうございました。
ボタンを押すことで、IDにある特定の文字列が含まれているDIVのみを表示させようとしています。
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"も出力対象となってしまうのでしょうか。
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);
});
}
保存しなくても参照すればできるよ
おそらく、<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が表示される）
ttps://jsfiddle.net/aay29p0j/ 1Gと２Gを入れ替え（どちらも表示されない）
ttps://jsfiddle.net/e6v7qonj/ .find("div[id ^= 'G-1G'][id $= '04-M']").show().end()
「+」は要らない
追加で質問します。
これってセレクトボックスを全て同nameにしておけば、一行で完結したりします？
の通り
前からG-1G、後ろから04-Mにマッチするものを取得したいなら
こんな感じ↓
ttps://jsfiddle.net/e6v7qonj/1/ できる
例
ttps://jsfiddle.net/vzta8zw3/ こういうのは、何でをまとめられる単位でグループに対して
classを設定して、そのclass単位で処理するんだよ
ありがとう。
じゃ、同クラスにして、
appendしたら一行ですむのかな？
行追加ボタンのイベントで、
セレクトボックスのクラス名指定して、
optionのlength+1の値をoptionに追加したら、クラス属性のセレクトボックスには全てオプション追加されてると？
これみたらやはりoption追加したらそれまで選択されていた値がリセットされちゃう感じですね。
どうやって保有しておけばいいんでしょうか？
おそらくリセットされるのはサイトを開いたときにhtmlも再読み込みするからだと思う
option追加ボタンを追加してみた
適当にそれぞれセレクトしてから「option追加ボタン」を押すと
こちらの環境では選択は保持されたままだった
ttps://jsfiddle.net/vzta8zw3/1/ わー！何から何までありがとうございました！
上のRUNボタン押下したらリセットされちゃったのでどうかなと思いましたが。
一行ですみますね！ありがとう。
このサイトも便利ですね。使わせてもらいます。
どうもありがとうございました。
閉めた後にすいません。
同じ値が重複されないようにするには、どうするのがスマートですか？
ボタンを押下するとどんどん同じ値が追加されていってしまうのですが…
どう追加したいのかでかなり変わってくる
（１）あらかじめ決まったワードがあるなら、配列にでもいれるか。
この例は「option追加ボタン」を押すごとに、決まったワード['RhA','RhB','RhO','RhAB']から順々に
一つずつ追加していき、全て入れ終わったら停止するというパターン
ttps://jsfiddle.net/vzta8zw3/3/ （２）入力した値を入れたいのならテキストボックスでも作るとか
ttps://jsfiddle.net/vzta8zw3/2/ （２）入力した値を入れたいのならテキストボックスでも作るとか
ttps://jsfiddle.net/vzta8zw3/4/ 1,2,3と追加して3を追加する前に、すでにあるなら追加しないという動きにしたい
日本語の説明で理解出来ないなら最小限のHTML/CSS/JavaScriptぐらい書いたら？
説明を日本語でおおざっぱに書いておいて回答ではコードがないと理解できないとか、そちらの環境を想定してHTML/CSSを書く手間を考えてないよな
をスルーした理由もその辺にあるんだろうなと思ってるが
数字の連番になっているなら最後のoption.valueを参照しえインクリメントするとか
「どうすればいいですか？」ではなく、アルゴリズムをまず考えて実装方法を考える癖をつけた方がいい
そうですね。作り変えます。ありがとうございました。
(function() {
var jq=document.createElement('script');
jq.src='
ttps://code.jquery.com/jquery-3.1.0.min.js'; document.body.appendChild(jq);
})();
として読み込みには成功しました。
そこで質問があります。
今やっているのは、まずコンソールを開いて↑のコードをコピペ、
つぎに、jqueryを使ったコードをコピペ。
という風に手動の作業が段階的になっています。
それでは微妙に面倒なので、何か良い解決策はないでしょうか。
外部からjquery読み込み終わったタイミングでjqueryを使った処理、という風にしたいです。
よろしくおねがいします。
（timeoutの方法は既にやりましたので他の方法があれば）
window.addEventListener('DOMContentLoaded', function() { は？
> 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に入れてもらうってことが出来ない場合なんだろうねｗ
書いてみたかっただけ。
var jq = document.createElement('script');
jq.onload = function() {
// 好きに使え
};
jq.src = '//code.jquery.com/jquery-3.1.0.min.js';
document.body.appendChild(jq);
})();
まあこんな感じだろうね。
厳密にやりたいならnoConflictもやる必要がある。
ありがとうございます
なぜか長文だと書き込みが飛ばされてレスできないので
調べてみます・・
ありがとうございます
みなさんに教えてもらった通りonloadやらDOMContentLoadedを試してみたところ
load後にスクリプトは動いてくれましたが
どうも思った結果が得られません
つづく、
長文というかコードを貼り付けるとエラーになるみたいですね
（レスしようとしていた内容の大半を失ってしまったので）仕方ないので以下略します
さんの//好きに使え
の部分をconsole.log($('#trad>a'));にして
ttp://echo.2ch.net/hp/subback.html
で実行しました
問題は、結果がaタグ要素一つしか得られないところです。
期待するのは、aタグが詰まった配列のjqueryオブジェクトです。
ありがとうございました、できました！
[id ^= 'G-1G']+[id $= '04-M']")の意味を取り違えて理解していたようです。
本当にありがとうございました。
画像1
画像2
画像3
こういう風にリストから画像選んだ時にだけ画像を読み込むスクリプトちょうだい
意味不明すぎる
画像を選ぶ前にまずその画像を読み込まないと選びようがなくね？
別の画像を表示したいのか？
最初は何も表示されてない状態でリストから選んだ時にだけ表示したいんだよ
例えばweb漫画とかだと全ページ一気に読み込むんじゃなく
ページ選んだ時にだけ画像読み込むじゃん
「選ぶ」と入ってもマウスイベントには色々有る
ttps://jsfiddle.net/x137cnf7/ zipでくれ
コンソールにはあらかじめ$があるみたいで
それが優先されてるだけだった
ブックマークレットでやったらいけた
でもなぜonloadはダメなんだろ
最初に
var $ = jQuery;
ってしておけばいけるとおもう(未検証)
指定した順番通りに非同期で画像差し替える参考になるサンプルある？
ありがとうございますできました
具体的にはの//好きに使えの部分に
var $ = jQuery;
console.log($('#trad>a'));
を代入です
$(this).closest('.form-group').hide('slow', function(){ $target.remove(); });
});
こんな感じでボタン押してフォームパーツを削除、という風にしているのですが、
appendなどで追加したフォームパーツ（class="form-group"）に対しては全く動きません。
appendなどで追加した要素にも、jsファイルに記述した関数を適用させるにはどうすればいいですか？
$('body').on('click', 'button', function() {});
オリゴ糖
同じ質問がマルチポストされてるから参考にしてみては？
ttp://echo.2ch.net/test/read.cgi/hp/1463395557/794-
あっちのスレでもルールの範囲内でアドバイスされているだけ
> ですが、jQueryを使って作る側のスレであって、こんなjQueryプラグインありませんか？と聞くスレではありません。
foo
<div>bar</div>
</div>
この場合jqueryで"foo"のみを取り出すにはどうすればいい？
$("#target").text()だと"foobar"になってしまう
正規表現以外でよろ
$.trim($('#target').contents()[0].data);
$('#target').contents()[0];
$('#target').contents()[0].data.trim();
サンキュークズども
すまんこっちのほうがいいかも
$('#target').contents().eq(0).text().trim();
$('#target').clone().find('*').remove().end().text()
このappendした'errortext'をさらにwrap('<span class="help-block"></span>')したいのですが、
よりシンプルに書こうとすればどうすればいいでしょうか？
便宜上'errortext'としたため、そのやり方は採用できそうにないです；；
$(errorFormGroup).contents().wrap('<span class="help-block"></span>');
意味がわからんから動きをHTMLタグだけで書いてくれ。
元がどうで、それをどうしたいのかを
<span class="help-block">errortext</span>
</errorFormGroup>
結果としてこうなら
errorFormGroup.append('errortext')の後に
何かのプロセスがあるなら
これでおｋですかね？
var os, ua = navigator.userAgent;
if (ua.match(/Win(dows )?NT 10\.0/))
alert("こんにちは");
問題ないがjQueryと関係ないなｗ
みんなChromeなの？
全く訳も解らず
ネットで検索したのを組み合わせてるんですが
jQueryに関する記述が書いてあるんですかね？
オワコンっていうかFirefoxに統合された。
だからFireBugなんてものは存在しないと言えるし、
Firefoxを使っているならばFireBugを使っているのと同じとも言える。
ttp://echo.2ch.net/test/read.cgi/hp/1439005423/l50
+ jQuery 質問用スレッド vol.7 +
ttp://echo.2ch.net/test/read.cgi/hp/1466750494/l50
自分で、確かめればいいだけ
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の他になんかなかったかな
そういうDOM要素と関係ないものはlodash使うと良いよ
ttps://lodash.com/docs/4.16.2#isEqual 具体的にカウント部分（var hit）はどう表現するの？
jQueryは関係ないからスレ違い
reduce使えば？
型まで同じでないといかんか？
瑣末な処理なら、
.joinして文字列同士比較する、
stringifyして文字列同士比較する方が良いのでは。
比較も、文字数が必要なら変換後の文字列同士をxorすると同じ部分が吹き飛ぶので、残ってる部分数えるとか。
mapで外側の変数触るのはいささか気が引けるからreduce使いたいな。
ttps://lodash.com/docs/4.16.2#intersection ttps://lodash.com/docs/4.16.2#difference ttps://lodash.com/docs/4.16.2#zip ttps://lodash.com/docs/4.16.2#groupBy ttps://lodash.com/docs/4.16.2#flatMap と言いたかったが直積はどれだろう？
chromeのコンソールってエンター押すと実行されちゃいますよね
これOFFにして実行は別の方法にできませんかね・・？
それが無理ならWindowsとかOSの機能を使って
特定のウインドウだったら～みたいな方法で作れるかもしれない。
shift押せば済むだろ?
まさにそれが（誤エンター含め）塵も積もればでとてもストレスになります
俺は逆にEnterで実行されないとストレスになるな
Enterでsubmit出来ない、submitボタンまでフォーカスを持っていってクリックしないとsubmot出来ないフォームとか、制作者を小一時間問い詰めたい
ようするに、マウスでクリックするのが当然の感覚でキーボード入力する人のことを全く考えてないんだよな
tabキーでsubmitボタンまでフォーカスを持っていくのが面倒くさくて仕方ない
Enter誤入力なんてしないし、本人の自己責任だし、キーボードからマウスに手を持っていく時間が勿体ないし
いや・・別に即実行をなくしたいandなくなる、わけじゃなく
Enter実行をやめる代わりにShift+Enterなどで実行できればいいんじゃないですか・・？
君自身がで「ちりも積もれば」といっているじゃないか
1行コードでも複数行コードでも毎回Shift+Enterを入力するのは苦痛だ
複数行なんてそれ程入力する機会があるわけでもなし
1行入力の方が圧倒的に多いので現行仕様が望ましい
Chromeのコンソールの使い方間違ってるんじゃないか？
なんか独自で書いた便利スクリプトを動かす場所にしてる気がする。
あそこはデバッグ用途なんだが。
え、ええ。そうですよ？
一行コードで毎回Shift+Enterで実行するのが苦痛な人はEnter即実行にすればいいだけだし
複行コードで毎回Shift+Enterで改行するのが苦痛な人はShift+Enter（仮）で即実行にすればいいだけだし
切り替えればいいだけですよ
仮にそういう機能があったら、あった方がいいじゃないですか・・
なかったらなかったで、もちろん仕方ないのでどうでもいいわけですが
あなたの求める仕様では複数行でも最後にShift+Enterを押さなければならないのだから「どんな場合でもShift+Enterを押さなければならない」のが苦痛だってことなんだが、伝わらないな…
誤入力防止用にアドレスバーや検索バーでEnterを殺してShift+Enterで遷移させているようなものだ
---
最も、誤入力防止という意味では
・コンソールで誤入力→もう一度一から入力
の手順が無駄なので
・テキストエディタにコード入力→コンソールに貼り付け
・ローカルにHTTPサーバをたてる→ローカルのHTML/JSに直接入力
の方が効率が良いと思うが
コンソール上で過去のコードをコピーするのは範囲選択がテキストエディタと比較して面倒くさい
ストレス軽減を目的とするならテキストエディタ上でコード入力が最適というのが自分の結論だ
また、正常動作することが保証された(検証済みの)コードは問題ないが、トライアンドエラーを繰り返す前提だと同じようなコードを何度も実行することになる
そうすると、一から何度も入力はやってられないのでテキストエディタからコードのコピペを繰り返す
こうなるとコピペ動作すら面倒になるので結局ローカルにHTML/JSを用意してローカルテストする方が効率が良いことに気が付く
だから、俺はコンソールはエラーが発生しないことが予め分かっている簡易コードしか実行しないようになった
もコンソールを使う目的をはっきりさせた方が良いと思うね
Goolgeにフィードバックすればいいんだ
スレ違い
var hoge = "a-b";
hogeをsplitで分割して二つの変数に入れたいです
var a,b = hoge.split("-");みたいに出来れば良いと思ってるのですが
var fuge = hoge.split("-");
var a = fuge[0];
var b = fuge[1];
と書くしかないんでしょうか？
var hoge = { a: "a", b: "b" };
hoge.a
hoge.b
或いは
var hoge = [ "a", "b" ];
var a = hoge[0];
var b = hoge[1];
"a-b"が何かを参照した文字列ならどちらにしても配列に置き換えた方がいいよ
＞誤入力防止用にアドレスバーや検索バーでEnterを殺してShift+Enterで遷移させているようなものだ
普段から複数検索ワード入力して一気にサイト開く作業が多い人なら
一行検索バーより複数行バー検索の方が楽だよね？
Shift+Enter（仮）実行（Enter改行）つまり「普通のテキストエディタ」と、
Enter実行（Shift+Enter(仮)改行）つまり「一行コンソール」
この機能が仮にあるなら、「便利な方に切り替えるよね？」という話をしているのを理解してる？
どうして「Shift＋Enter機能搭載したらEnter機能がなくなる」と勘違いしてるの？
var hoge = "a-b";
var [a, b] = hoge.split("-");
(function(a, b) {
console.log(a + ':' + b)
}).apply(this, hoge.split('-'))
リストを作りたいのですが、
リストアイテムのHTMLがかなり複雑になっており、
リストアイテムのHTMLは複数のページで共通です。
シンプルなリストの場合
$("#list").append("<li>アイテム1</li>");
とかで追加できると思うのですが、
$("#list").append("<li>長い長～～～～～い複雑なHTML</li>");
…という実装は避けたいです。
できれば部品HTMLとして外部ファイルにして読み込みたいです。
が、JQueryのloadのような非同期読み込みも避けたいです。
underscore.jsのtemplateといものを見つけましたが
「複数のページで共通」というとこがうまくいかない感じです。
何か良い方法(または定番の方法)はありませんでしょうか。
template要素
回答ありがとうございます。
そんな要素があるんですね。
しかしながらこれをどうやって複数ページ間で共有するんでしょうか？
画面１、画面２、画面３・・・ の一部分に同じテンプレートを使いたいのです。
非同期読み込みを避けたいならサーバサイドで同期出力すればいいんじゃない？
JavaScriptならXHRの同期読み込みぐらいしか思いつかない(勿論、非推奨)
非同期読み込みを排除している時点で選択肢は限られる
まず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のテンプレートリテラルでも頑張れるけど。
複数のページで使っているから、変更があったら、手に負えない
JavaScript一箇所に書けばいいだけ
ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings Yahooのように「ウェブ 画像 動画 辞書 知恵袋 地図」のリンクをクリックで
FORMの送信先を変更するにはどうすれば良いでしょうか？
よろしくお願いします。
onclickで
document.formName.action="送信先URL";
document.formName.submit();
でどう？
> Yahooのように「ウェブ 画像 動画 辞書 知恵袋 地図」のリンクをクリックで
> FORMの送信先を変更するにはどうすれば良いでしょうか？
YahooはFORMの送信先は変わってない
<form name="sf1" action="
ttp://search.yahoo.co.jp/search;_ylt=何々" method="get"> <span> <a id="search" hidefocus="true" href="
ttp://rdsig.yahoo.co.jp/_ylt=何々">ウェブ</a></span> </form>
</div>
右クリックから、要素の検査をすると、F12開発者ツールが起動する
たぶん「ウェブ 画像 動画 辞書 知恵袋 地図」で、href= の所が変わる
Knockout.js
pukiwikiにてWiki作成を行っています
ttp://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 -->"
知るわけ無いって。わざわざ試してあげるような人もいないよ。
コードについて一番理解してるはずだしね
もし答えが帰ってこないならコードがアップデートされてないということなので使わない方がいい
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>
IE4やIE5じゃjQueryは使えないって（笑）
<script>タグの中で<% %>は使ってはいけません。
絶対にです。
まぁまぁｗ
DOM4よりはマシだから。
しっかしDOM4の実装ってなかなか進まないな。
ようやくFirefoxがNodeのbeforeやafterをサポートしたらしい。
これってjQueryのbeforeとafterを真似したんだろうなっていうのは
言うまでもないけど、Nodeのコレクションに対するbefore、afterがないんで、
やっぱりjQueryの劣化版
DOM manipulation convenience methods - LS
ttp://caniuse.com/#feat=dom-manip-convenience 全然対応していない。
で、それはそれとして説明見てフイタｗ
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なんだｗ
ポリモーフィズムの範囲をどこまで広げるかの違いでしょ
標準のDOMならなおさら、むやみに多義的にしない方がいいだろう
そこでjQuery最高と唱える方がずれてる
すぐれてるからだろｗ
jQueryはDOM要素ではなくてDOM要素のコレクションに対して
メソッドを用意しているところだよ。
$.ajax({
//
}).done(function(data) {
if (data.deleted == false) {
// ここでdoneを中断しエラー処理（fail）を実行させたい
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// failの処理
});
例外throwすれば良いんじゃね？
Wiki作って何に使うん？
一旦、別のプロジェクトとして、画像が表示されるだけの、単純なソースコードで実行してみる。
そこから少しずつ、複雑なものに変えていく
スクリプトレットの<% ～ %>は、JavaScript内ではなくて、HTML内で使うのでは？
非同期処理なのに、例外でcatchできる？
だれがcatchするって言ってるんだ？
ご回答ありがとうございます。
<script>タグの中で <% out.println("alert('****');"); %> を記述したらalert処理が実行できたので、記述してもいいものだと思ってました、、、
<script>タグ内では適さないのですね、勉強になりました。
でやりたいことの最終形は、チェックボックスにチェックをつけると、ajaxでサーバーに「チェックボックスのvalue値」を送信し、
サーバーサイドでそのvalue値を条件としたデータベースの更新です。
ajaxでの送信は「成功！！」と表示されていることから、正常に通信できていると思います。
ただ、この処理は画面の遷移なく行いたい為、submit処理ではなくajaxで行おうとしています。
他の情報サイトも色々みているのですが、いまいち同様の事例がありません。
①チェックボックスがチェックされた時の動作を<script>で記述する。
②<script>内のajaxでチェックボックスのvalue値を送信する。
③サーバーでvalue値を取得する。
④サーバーで更新処理を行う。
この④の処理を何とか画面のjspファイルに記述できないかと思い<% %>で記述していました。
③④について、具体的な実現方法がわからなくて困っています。
わかる方がいらっしゃれば、教えていただけないでしょうか。
クライアントからは、その処理のURIへ、要求するだけ
ttp://i.imgur.com/y8QIVfC.jpg li.photoを上から３つ、それぞれ最初の画像だけを取りたい
（htmlタグは改変できない）
$('li.photo:lt(3) img:eq(0)')としましたが期待する結果にはなりませんでした
できればセレクタ一行でやりたいのですが無理でしょうか
HTMLを起こすのが面倒なのでコードは書かないが、nth-childを使ったら？
やってみましたができませんでした
ちなみにこのサイトです
ttp://mantan-web.jp/gallery/ $('li.photolatest__news:lt(3) img:first-child');とすると、liの画像それぞれ４枚が取得されました（この例だと計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)')；
です（計４枚）
これをもっと短く書けないかなと・・・
$('li.photolatest__news:lt(3) :first-child > img')
でできないのは、あなたが提示したHTMLと実際のHTMLの構造が全く異なるから。
できました。ありがとうございます
766では、imgそれぞれを何かしらの要素で包まないといけませんでした
ちなみに766の<img><img>・・・のようなものは$('li.photo:lt(3) :first-child');でできました
ttps://jsfiddle.net/2p9hkcdz/ ttps://jsfiddle.net/2p9hkcdz/1/ ajaxでredirect.javaにpostしてるんですかね？
だったらredirect.javaに
③サーバーでvalue値を取得する。
④サーバーで更新処理を行う。
サーバからステータスを返す
の処理を書けばOKです。
ちなみに＜script＞に＜% %＞を書いちゃいけないルールなんて
ありません。ちゃんと意味を理解して使う分には問題ありません。
サーバサイドで動的にクライアントスクリプトを生成する場合
などに普通に使います。
ただし上記の意味が理解できないなら使わないのが無難です。
条件後出しで申し訳ないのですが
・サーバサイドは使わない
・ｊｓファイルにHTMLを書かない
という制約があります。
HTML＋JSで作る通信なしのブラウザアプリというイメージです。
さんのレスでいうところの
2とAはNGなので、1-B、1-C、3 が選択肢となり得ますが、
手動埋め込みはメンテナンス性悪いし、
外部ファイル非同期読み込みは遅い上に部品が複数になってくると
読み込み完了のタイミング関連がややこしそうなので、
1-Bの「ビルドツール使って各HTMLにtemplate埋め込み」が
最適解ということになるんでしょうか？
リストに限らず、たとえばヘッダ、フッタが共通のブラウザアプリを
作るときって、どうやって実現するのが一般的なんでしょうか？
回答ありがとうございます。
コードはJSPで書いています。
その中で、「チェックボックスにチェックをつけたらデータ更新する」を
<script>処理で行っていたため、<script>に<% %>を記述していました。
JSPのEL式(<sql:update>)での更新も考えたのですが、<script>から
サーバーサイドへ「チェックボックスのvalue値」を引き渡すところで
ajaxを用いようとしており、サーバーサイドでのvalue値の受け取りのところで
躓いていました。
回答ありがとうございます。
使う上ではやはり理解した上でつかわないとだめですよね、わかりました。
本当は、コードを記述しているredirect.jsp内で完結させたかった為、
POSTの対象をredirect.jspとしていたのですが、自身を対象にできるのか
不明だったため、更新用のredirect.javaに変更しました。
③サーバーでvalue値を取得する。
④サーバーで更新処理を行う。
の処理をredirect.javaに記述する際は、servletと同様の処理を記述すれば
よいのでしょうか。
「underscore.js template 外部ファイル」で検索！
デザインパターンは、AngularJS など、自分の使っている、フレームワークのやり方に従うだけ
JSPなど、自分の使っている、フレームワークのやり方に従うだけ
やっぱこの解決策ってないの？
doneはthenと同じ動きだと思ってた。
いつもthenやcatchばかり使ってるからな。
Promise互換だから、将来Fetch APIに置き換えるときも
引数の調整程度ですむ。
ただしFetch APIは404とかがエラーになってくれないから
まさにthenの中で例外throwしてcatchで処理するって流れになるだろうけど
}).then(
funtion(){
}
,function(){
});
アカンの？
だめ。要求を満たしてない
$('body').on('click', 'a.hoge', function(){
fun();
return false;
});
上記を下記の様にしたいです
$('body').on('click', 'a.hoge', func);
return false; を適用させるにはどうすればいいのでしょうか？
func 内で preventDefault も return false も呼ばないのなら無理
そもそも、preventDefault は関数内のどこに差し込むかによって条件付き呼び出し出来るようになってるし、常に呼び出す仕組みは考慮されてない
妥協点としては preventDefault を差し込んだ関数を返す汎用関数をユーザ定義するぐらい
という正解が見えないの？ｗ
まあfun()が抜けているけど。
基本的なところで本当にもうしわけないのですが、
$.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になってしまって困っています。
ajaxはURL（URI）としてアクセスできるならば
相手が何であろうと関係ない。
return function() {
orig();
return false;
}
})(func);
みたいにラップするとか
出力フォルダに、OutputPath とか、何か名前が付いているだろ
でも普通、プロジェクトの階層構造と、デプロイ後の階層構造は、異なる。
その出力フォルダは、デプロイ後の階層構造では、異なる場所になる
プロジェクトの階層構造と、デプロイ後の階層構造の、対応表を見れば？
また、公開ディレクトリルートからの階層の書き方も、決まっている
ありがとうございます。
urlにクラスのパスではなく、ソースファイルのパスをしてしていました。
a.jspからの相対パスではうまくいかなかった為、b.javaの絶対パスを設定したところ、正常にクラスを見つけられるようになりました。
今回のajaxでは
dataType:
今回の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で記述しなくてはならないのでしょうか。
だから何で作るとか全く関係ない。
そしてそれはJavaの話だからここでするな
お前がどのURLでそのJavaアプリの処理が呼び出されるように
Java側で設定しているかだ。それはJavaの話なんだからここでするな。
ttp://itest.2ch.net/test/read.cgi/tech/1476706523
ソースファイルにリクエストして意味があるのはせいぜいソースコードを非同期に読み込みたい時ぐらい
index2.htmlのリンクを踏む際はajax関数を無効化のように考えたのですが記述の仕方もわかりません
ご教示お願いします
という相対パスをやめて
<a href="
ttp://hogefuga.com/index3.html">リンク</a> みたいに絶対パスでしてみてはどうでしょうか
JavaScriptにもjQueryにも関係ないってわかってる？
もしかしたら回避するパラメーターが$.ajaxにあるかもしれないし
ありがとうございます。
ご指摘の通りにURLを変えてみたのですがかわりません。
試しにajaxの適応外にしてみたのですが、案の定丸々ページが更新されてしまいます。
そうなんですか？jQueryの関数なのでJavaScriptのジャンルかと思ったのですが、HTML５か通信関連で聞いたほうがいいのでしょうか？
どうやらHTML上に同じボックス要素があったという初歩的なミスが原因でした。
ありがとうございました。
ttp://www.g-g2016.com/ このように右から左に自動で流れるスライドショーを作りたいのですが
slickなどを使ってもうまく動作しませんでした。
学校の講師にもなぜ動かないのか分からないと言われて困っています。
簡単に設置できるものでお勧めないでしょうか？
ここはそういうスレじゃありません。
自動で流れるスライドショーを
jQueryだけを使って自分で作るスレです。
設置して終わるなんてものは、自分で探せ
var call = arguments.callee;
$.ajax({url: url, data: data}).then(function(){});
}).then(call);
'use strict'にて書き直したいのですがこの場合
arguments.calleeはどのようにすれば良いのでしょうか？
その意味不明なサンプルは何だ？
関数の中でcall使ってないし、
定義されてないcall使ってるし。
もう少しまともで必要最低限なコードにしてから来い
バグってるもの持ってくるな
テンプレに書いてあったね
ごめんね
$.Deferred().resolve().then(function(){
var call = arguments.callee;
$.ajax({url: url, data: data}).then(function(){
}).then(call);
});
間違っていました
ご教授の程宜しくお願い致します
> ご教授の程宜しくお願い致します
ご教示の程宜しくお願い致します
関数に名前つけてあげればええねん
$.Deferred().resolve().then(function call(){
$.ajax({url: url, data: data}).then(function(){
}).then(call);
});
ああ、なるほど
簡単に考えれば良かったんですね
迅速なご返答ありがとうございました
ttp://https://jsfiddle.net/1rq466sg/">ttps://jsfiddle.net/1rq466sg/ 後学のために ： Name_Not_Found [sage] 2016/10/23(日) 15:44:25.19 ID:???
function func() {
console.log(this); // { a: 1, b: 2 }
}; func.call(obj);
strictモードの場合、func内でthisを使用しても良いのでしょう？
又、this以外で参照する方法は他にあるでしょうか?
function loadingIcon() {
return '<i class="fa fa-spinner fa-spin fa-fw"></i>';
}
これはhelper.jsなどにそのまま記載し、使用するのがベストでしょうか？
それとも何かでラップしたほうがよいのでしょうか
普通に参照すればいい。
var obj = { a: 1, b: 2 };
function func() {
console.log(obj); // { a: 1, b: 2 }
};
func();
thisを使ってはいけないなんてルールは存在しない。
HTML上にそのまま書くのがベスト
JavaScriptを使うところじゃない。
俺ならこう書く
(function loop() {
$('ul').animate({left: '-250px'}, {
duration: 10*1000,
easing: 'linear',
done: function() {
$(this).css({left: 0})
loop();
}
});
})();
ttp://https://jsfiddle.net/1rq466sg/1/">ttps://jsfiddle.net/1rq466sg/1/ありがとうございます
アップデートしました ： Name_Not_Found [sage] 2016/10/23(日) 16:28:57.12 ID:???
ttps://jsfiddle.net/23md1mtx/ ありがとうございます
call()の必要ないってことですね？
普通に解決しました
動的にテキスト（アイコン含）を切り替えているのですが、
HTML上にそのまま書く、という手法はどうすればいいのでしょう？
飛ばす必要無いだろ。
動的に切り替えてる所に入れれば良いだけ
うるせーよ。解決済みにレスすんな
ondropでローカルファイルをブラウザにドロップした時のファイル名はevent.originalEvent.dataTransfer.filesで取得可能なのですが
ドラッグ中のファイル名、もしくは拡張子を取得するにはどうすればいいのでしょうか？
検証してみましたがonDragEnter onDragOver onDragLeaveのeventにはそもそもファイル情報が入ってないみたいなので
調べる気しないけど
event . dataTransfer . items[n] . type
から得られる
＜ajax側＞
$.ajax({
url:
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のほかに
考慮が必要だったりするのでしょうか。
name: "あ"
}
ありがとうございます！解決しました！！
ドラッグ&ドロップ今まで学んだことが無く何日間も悩んでた事なのでレスじゃ言い表せない程の感謝です
あほか。
答え言う前に聞くわ
encodeURIComponentは何の目的でやってんの？
よくわかってなくてすみません。
最初、name: "あ"とやっていたんですが、
サーブレット側には文字化けしてわたっていました。
そこで、自分なりに調べたところ、
「jQuey日本語リファレンスをみると、サーバに送信するデータは
クエリー文字列に変換されてGETリクエストとして付加されるとあったので、
URLエンコードは自動的にやってくれると思いましたが、
POSTの場合はこちらで変換した値を指定してあげないとダメ。」
という解説があり、またencodeURIComponentをつけてやれば文字化けは発生しないとの
サイトがあった為付与していました。
encodeURIComponentはURLに変換する関数であることは
認識していたのですが、どうやっても解決せず困っている次第です。
jQuey日本語リファレンスは絶対に見てはいけないサイトだ。
あそこに書いてあるのは古くて今は使えないものばかりだからだ。
ネットから消し去りたいものの一つ。
js STUDIO
ttp://js.studio-kingdom.com/jquery/ 2013.03.13
ver1.9の内容に更新しました。
最新情報を見たいなら公式サイトみて、どうぞ
ttp://api.jquery.com/ jQueryのバージョン1.9での変更点・違いのまとめ。IE8対応だが，1.8とはAjax等のAPIが異なり，プラグインが動かない問題が多発。リファレンスは2.0と共通
ttp://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がうまく行ったせいで未だに上位にランキングしてるが
絶対に参考にしてはいけないサイトだ。害悪でしかない。
1.8 → 1.9 では大きな変化が有った。
【2013年5月】1.9の次は1.10 & 2.0。これは殆ど変わっていない。
ttp://computer-technology.hateblo.jp/entry/20150703/p2 > jQuery バージョン 2.0と1.10での，変更点のまとめ。
> 1.9とAPIは同じ
【2014年1月】次の1.11 & 2.1 も変わっていない。
ttp://computer-technology.hateblo.jp/entry/20150703/p1 > APIは前のバージョン（1.10, 2.0）と変わらない。
【2016年1月】 次の1.12 & 2.2 はマイナーな機能が増えている程度
ttp://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
ttp://qiita.com/fmy/items/345a264a1cf2e2a73f62 ここは結構変更点が多いけど、それまでの変化は少なかったから、
1.9との違いがこれだけといっていいぐらいなんだよ。
丁寧にまとめまでしてもらいまして・・・
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[]
にしてもできませんでした。
変数の配列を送信することはできるのでしょうか。
配列を渡すという仕組みはHTTPの仕様にはない。
キーと値の組み合わせ（ただし同じキーを使うことは可能）
これしかないんだよ。
だからPHPやRailsでは、キーに names[] という風に[]をつけることで
namesは配列だよ。そして複数同じキーがあるよ。という
特殊ルールを作ってる。
Javaの場合はしらん。これはJavaScriptやjQueryの話ではない。
$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: {
"name[]"': moji_array
},
お返事ありがとうございます。
さんのやり方で無事できました！
ありがとうございました！
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が変更されないのは、なぜなのでしょうか。
2chのバグだろう
書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
" の代わりに、\" とエスケープすれば、どうだろう？
$('#result1').html('${row2.STATUS}');
の下に、console.log(変数名)を書いて、変数を5秒ごとに確認すれば？
JavaScriptに別の言語を混ぜてはいけない
そんなことをしてもうまく動かないのは当たり前
instanceof だと特定のclassってことしか確認できないですよね
「同じclass」の定義を詳しく
というか、jQueryの質問ではないのでjsスレで質問したら？
勿論、の件も補足した上で
+ JavaScript の質問用スレッド vol.122 + [無断転載禁止]©2ch.net
ttp://echo.2ch.net/test/read.cgi/tech/1472426483/
すいません。そうします
二つのインスタンスが同じかどうかであれば、
===で比較すれば良い。おそらくあんたが欲しがってる答えはこれだろう？
instanceofは特定のクラス、またはそのサブクラスかどうかを調べるもの。
インスタンスからクラス名を知りたいのであれば
obj.constructor.nameかな。
ただし少し注意が必要
ttp://blog.livedoor.jp/dankogai/archives/51756459.html 勘違い↓質問者がここでJavaScriptの質問することを狙っているようにしか見えん
JavaScript & jQueryやからええんやで
JavaScriptを抜きにしてjQueryは在り得へんさかいな
情報集積の場という専スレ本来の観点から言っても
情報が分散するような形態は利用者にとってメリットがないので避けるべき
jQueryにはJavaScriptは不可欠なんやさかいな
しかし、はの指摘を全く理解してないな
誰がそんなこと言うたんや？
ほんまアホやなｗ
あなたが頓珍漢な論を繰り出すからなんだが
「jQueryにはJavaScriptは不可欠」は否定しないが、はjQueryの質問ではないからその論理は無関係だろう
「JavaScriptにはjQueryが不可欠でないのではこのスレで扱うべきではない」という論に何か反論があるのかね？
関数名なんてスコープが違えば同じ名前が存在しうるとか、Function#nameがNon-Standardな古い記事を持ち出すとか、jQueryだけを触ってるからESの知識が身に付いてないんじゃないか
ttps://tc39.github.io/ecma262/#sec-function-instances-name jQueryを使ったら一行でもJavaScriptの標準API使ったらあきまへんの？
ここが嫌でおしたらプログラム板に行けばええやおまへんかいな
ほんまけったいなこと言いはりまんな
ほっほっほっｗ
それはjQueryでコードを書く場合の話だろう？
あなたがjQueryを書くことは自由であり、それを止めるつもりは毛頭ない
「JavaScriptの質問をここですべきか、専用スレですべきか」の本題からずれた方向に論点をずらして「別スレに行け」とは勘違いも甚だしい
JavaScript & jQuery 質問用スレッド
おまはんのような制限は毛根もおまへんで
ここはおまはんのブログとちがうえ～ｗ
テンプレを変えてないからここはまだjQueryスレだと思うけどね
> ここはおまはんのブログとちがうえ～ｗ
それはあなた自身にはあてはまらないのかな
ちょうどいい頃合いだし
ついでにIDも出せってな
ここは俺様の城だから嫌なら出ていけ、といっているように聞こえる
自分一人で管理してるつもりなんかな
また、共存させてはいけないルールは存在しない
個人のローカルルールは知らんがな
流れ見たけど、スレタイとは戻したほうが良いと思う。
以前はこんなスレタイだった
【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
でいいと思う。
も長ったらしくてわかりづらい。顔文字も鬱陶しい
vol.5の
ttp://echo.2ch.net/test/read.cgi/hp/1452081417/1
これでいいと思う。
ttp://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。
そこまで行くなら”用”も抜きたいな
jQuery 質問スレッド vol.◯
jQuery覚えたてのk路は楽しくてよく使ってたけど、なんかめんどくさいだけという結論に達した
特にページ遷移後にDOMの変更がすべて消えるのが困る
URLにパラメータ渡してあげればいいだけの話では・・？
もしくはjavascriptだけでやりたいのなら、変更パラメータを渡して再描画するとか
すまん、戻るボタンの時ね
Twitterがまさにそうで、
別ページ→Twitter
でTwitterでログをajaxで読んだ後、別ページに戻り、再度Twitterにalt+右キーで進んだ時に読み込んだログが消えている
この問題で色々悩んだけど、ページャーの方が早いって結論に達した。
twitterのは単に仕様なだけ（過去ツイートを多く読み過ぎている時の弊害）なので
なにもtwitterの真似をする必要はない
twitterもその気になれば、ツイート時間の差分を渡すことで、F５押そうがalt+右キー押そうが、
一度開いた差分ログを消さずに表示させることが可能
その代わりトラフィックが倍どころか何十、何百倍にも膨れ上がり自滅する
ajaxは動的ページ遷移目的だけじゃないので（ページャの方が早いという理屈はよくわからないが）もちろん静的ページ実装で問題なし
荒らしが昨日付けでこっそり7スレ目を重複立てしてるから
もうアンタもアンタのスレタイ＆テンプレ案で7スレ目を立ててきていいぞ
支持するから
jQuery 質問スレッド vol.7
ttp://echo.2ch.net/test/read.cgi/hp/1478055094/
乙
このスレのほんま気持ち悪かった
//例として、formの送信ボタンならこれで取得できる
$('[type="submit"]');
//クラスでもこれで取得可能
$('[class="class_name"]');
//bodyを取得したい時は？
$('[elementsname="body"]'); //無い
属性セレクタの中で要素名で取得したい場面がありましたが、無理でしょうか
無理なら素直に
$('body')
を使います
無理
element.tagNameみたいにプロパティで取得するなら可能だけど
というか、属性セレクタで要素名を指定したい意図が分からん
$('body') を使用して下さい
ありがとうございます。
$('body') でいきます。
ブラウザinput要素を使ったデバッグを試していたんです。
これ自体微妙ですが、そこは見逃して下さい。あくまで試験的にやっていることなので
（普段は開発ツールやコンソールを使っています）
var foo,bar;
foo = $("input.foo").val();
bar = $("input.bar").val();
$("button").click(function(){
//何かさせる
$('['+foo+'="'+bar+'"]');
});
属性セレクタに要素名使えたら統合できて便利と思ったのですが、無理なら諦めます。
ってことは、$('['+foo+'="'+bar+'"]');の形を崩さずそのまま再利用できて便利ってことかな
単に、セレクタに○○=要素名の形式があるかないかを知りたいのだろうかと思ったけど
分岐してコードが長くなるのが嫌ってことなのか
だとしたらvar fooだけにして入力を「class class_name」や「body」にして
あとは成形なり分岐なりすればスッキリすると思うけど
その前提だと class="hoge fuga" に対して bar === "hoge foo" の指定を強制して bar === "hoge" でマッチしないという融通のきかなさがあるよね
属性セレクタが [att~=val] にスイッチ出来るならいいと思う
(一応、foo === "class~", bar === 'hoge' で出来るけど、もやもやする仕様だ)
汎用性を高めるなら、タイプセレクタ用の input要素を増やすか、セレクタ文字列指定用のinput要素にする方向がいいと思うなあ
あと、"[]" 等の予約文字とかも使えるようにエスケープ処理が入っているのか、とか細かい仕様が気になる
ttps://jsfiddle.net/rm4qjhmg/ ex) body, input, id foo, class hoge, class fuga, alt puu, #foo, .hoge, .fuga
などに対応
仕様が分かりにくい&空白を含む属性値を指定できない
はclass hoge hoじゃなくて.hoge.hoで、
class以外の空白属性は知らん
あと、空白が3つ以上あるセレクタ(ex: body #hoge .foo)も指定できないな
ttps://jsfiddle.net/c0wdu24t/ 何をやりたいの全然わからないが、デバッグ？なら
エンドユーザーじゃなくて開発者が使うものだろ？
ならコレでいいじゃん
var selector = $("input.selector").val();
$("button").click(function(){
//何かさせる
$(selector);
});
属性セレクタだけじゃなくてセレクタで使えるものはなんでもできる
まあ、汎用性が犠牲になっている感は否めないので、が比較的いい妥協点なんじゃないかね(セレクタ使えるし)
質問お願いします。
スライドショーの上に常に違う画像を重ねて表示させたく
ttps://allabout.co.jp/gm/gc/417216/2/ を参考にしてスライドショーはできたのですが
上に画像を重ねる方法がわかりませんでした。
知恵袋で似てる質問はあったのでチャレンジしてみたのですが
上記のサイトとは違うコードの組み方のようで結局出来ずに終わりました。
ほとんど調べながらコピペしてる状態の初心者なので、初歩的な質問かもしれませんが
もしご存じの方がいらっしゃいましたら教えていただきたいです。
また、解説してるサイト等ありましたら貼っていただけると助かります。
よろしくお願いします。
z-indexで重なり順を指定すると書いてあるじゃない
再現可能なコードも出てないし、これ以上は答えようがない
ttps://developer.mozilla.org/ja/docs/Web/CSS/z-index ありがとうございます
重ねる画像のclassの分け方が悪かったようで先ほどできました。
貴重なスペースありがとうございました。
今の時代だと垂直タブとかはまず見ることもないし
希少性バツグンだと思う
チャンスがあればどんどん使っていきたいスペースのひとつ
だとsuccessとerrorの場合の処理を分けられますが、
$.post( ...
の場合にはそれが出来ないようですが、なぜですか？
失敗した場合の処理をしたいのですが
ハック目的、まぁブラウザの不具合解消のために使うことはありますが、
position;absoliteなどと合わせて使うことってありますか？
使います
初心者なので出来ればサンプルコードを教えてください。
ttps://jsfiddle.net/u7Ls2xk0/ まじっすか・・ちょと勉強します
jQueryのサイトに書いてあるよ。
探してきてここにリンク張って！
dom_hanbetsu = functionみたいなローマ字使うのはよくないと最近思ったので
こういう場合どういう名称がいいんでしょうか？
getNodeType
domHanketsu
isElementとかisDocumentとかisNodeとかが妥当だと思う
isDOMObjectならギリ分かる
DOMの後にOと大文字続くの気持ち悪いな
仕方ないけどね
略称なのに？
iPhoneとかいう素晴らしいネーミングが
思いつかないんだよｗ
DomObjectもどのインターフェースまで含むのか曖昧だしな
大文字の略語はそのままが主流だぜ
略称だけどDOM自体はオブジェクトを差すわけじゃないから重複せざるを得ない
isDOMObjectでもいいと思うけど、isNodeが最も綺麗だと思う
Interfaceで分けるのが美しいと思うから個人的には同意見だが、NodeListやHTMLCollectionはisNodeでは判定出来ない
「判別」の要件が不明な以上、isDOMObjectでいいのかも分からんし、いいとしてもどこまでDOMObjectとしたいのか分からんわけで質問者の情報待ちだが
chrome用のjsでWebAbornをベースに文字列置換したいんだけど
'[転載禁止]'
とかの "[]" がマッチしないのはなぜ？
UTF-8でエンコードして \u5Bとかでも無反応
括弧の中の文字だけしか認識しない
'\[転載禁止\]'とかエスケープしても中の文字だけしか認識しない
'[転載禁止]'.match(/\[転載禁止\]/g);
一応確認だけど、[転載禁止]と[無断転載禁止] 間違えてない？
拾ってきたjsを書き換えてるので
どこにそれを記述すれば良いかも良くわかってないレベルです
[転載禁止]と[無断転載禁止]は両方ともNGワードとしてセットしてありますが
どちらも出力される結果は[]になります
WebAbornでググるとトップヒットで出てくる
ttp://webaborn.herokuapp.com/とは違うの？ 👀Rock54: Caution(BBR-MD5:b95868ef2c0ed5e765a4d10ada4cf289)
それです
それに
[転載禁止]
[無断転載禁止]
で記述しても[]が残ってしまうので色々調べてやってみたんですが
うまくいかない
いけたけど
本文中にある
[WebAbornダウンロード]
で実験
吐き出されたjsはこれ
ttp://www.dotup.org/uploda/www.dotup.org1056067.zip.html 別に"["だろうが数値参照だろうがおなじ
もうちょい言うとxpathとかやや独特な物を使っているので、まずはjQueryやjsうぃ使って、
・配列のリスト作成
・置換
するのがいいと思う
だめでした
入力し終わったら、[] ボタを押してください。
となりました
なぜかボタ "ン" まで消えてる
とりあえず基本的なところから勉強してきます
ありがとう
をもう一度確認したらタイプ1の方なので[]の前後含め1行丸ごと置換され[]も消えるが
自分の望む挙動は「単語単位での置換(タイプ3の方）」なので両者を比較検討
candidates.snapshotItem(i).nodeValue = candidates.snapshotItem(i).nodeValue.replace(new RegExp(ng_words[j],"g"), abornString);
この行が原因という予測のもと検証したところRegExpの誤爆とわかりました
原因解明のきっかけになり助かりました
ありがとう
のファイルをjavascriptで選択させるようしたいのですが
$('#f').prop('files')[0] = file;
とやっても変更できません
どうすればいいのでしょうか？
jsでファイルは変更できない
もしできてしまうと、アクセスした瞬間にPCのファイル全部抜き取るということができてしまう
ただローカルで動かす場合はローカルのファイルを取得できた気もする
ありがとう色々と納得できた
ページ開いた瞬間そんなjavascript勝手に動いたら恐ろしいもんね
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
ttp://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
ttp://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
ttp://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5
ttp://echo.2ch.net/test/read.cgi/hp/1465399470/
■次スレ
jQuery 質問スレッド vol.7
ttp://echo.2ch.net/test/read.cgi/hp/1478055094/
最近環境を整えて方法が分かる人はいますか？
つまりコンソールでもeslintが実行できるように。
俺はそれをatomでやってるけどな。
あー、俺がVisual Studio Codeをインストールしてみれば良いのかｗ
eslintレベルじゃないがデフォルトでもそれなりに動いているな。
eslintはプラグインを入れれば良さそうだ。
アドレスを
ttp://IPアドレス:ポート番号.ページ名 で表示した場合、動作はサクサク動きます。
しかし、上部にリンク用メニューページを持ってきたかった為、
フレーム分割をして、下部に作成したコンテンツページもってくると
一気に重くなり動作しなくなってしまいます。
これはなぜなのでしょうか。
また、重さを解消させる方法はないものでしょうか。
多分セキュリティエラーが起こってると思う
まぁ。開発ツールを見れば全部書いてる
一応chromeでは動作確認済み
$('form button[type="submit"]').on('click', function () {
$(this).prop('disabled', true).html('処理中');
$(this).closest('form').submit();
});
// $(this)2回は後で修正予定
ttps://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);
})
二重送信しているようにしか読めない
ボタン幅の維持 + html5のinput requiredに対応
$('form').on('submit', function () {
var button = $(':submit', this);
var buttonWidth = button.width();
button.disableButton(true).html(loadingIcon() + '送信中').width(buttonWidth);
});
ありがとうございます。
Ｆ１２で調べてみます。
ちなみに、「フレームを使うのをやめる」とありますが、同一ウィンドウで
メニューとコンテンツ画面を独立させたい場合、
フレーム以外だとどんなものがありますでしょうか。
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>
