jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
jQuery 質問スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478055094/
■関連スレ
JavaScript の質問用スレッド vol.130
https://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
https://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
https://echo.5ch.net/test/read.cgi/hp/1465399470/ >>54
<div class="100%wide_center_box">
<div class="500px_center_box">
テキスト
<div class="IMG">500で表示画像</div>
テキスト
</div>
</div>
----
.100%wide_center_box img {
max-width: 1000px;
margin: 0px auto;
}
htmlはいじれません。cssとスクリプトのみ書けます。
なので「可能なら」手っ取り早く画像直前で親クラス閉じタグ追加し、
好きなサイズで画像をセンタリング表示させ、
最後に親クラス開始タグ追加すればいいかとbeforeとafterで試みましたがうまく行かず、、
<div class="centerbox">
<div class="500box">
テキスト
</div>←追加
<div class="IMG">css指定した任意のサイズで画像表示</div>
<div class="500box">←追加
テキスト
</div>
</div> >>55
画像の数は不特定多数？いくつかの固定数？
後者の場合、ファイル名は不特定？いくつかの固定数？ >>49
jQueryにそんな機能はないし、>>39で説明できてないけどね >>57
DOMの扱いにくさを説明しているだけだろ？ >>58
>>15とは無関係だね
>>50で当人は捨て台詞を残してるけど、彼の意見を正確に理解した人はいないわけで >>55
$('.IMG').each(function(){
var $img = $(this).find('img');
var $parent = $(this).parent();
var $contents = $parent.contents();
if ($img.width() > 500) {
$img.width(1000);
var $this = $(this);
var $div = $('<div class="500px_center_box" />' ).text($contents[2].textContent);
$contents[2].textContent = '';
$parent.after($this, $div);
}
});
こういうことかな？
.500px_center_box 内にインライン要素が入ってたらまた違うけどね そもそも、できたらいいな＝できないことをコード化しろって >>53
>親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
はcssだけでできなくもないがかなり条件があるので>>56に答えてくれんと何とも書けない 他スレより。ただしおすすめはしない。
自分的には、気持ち悪いしそもそも右に幅があるなら最初からその幅で固定する。
<select id="hoge">
<option>ああああああああああああああああああああ</option>
<option>いいいいいいいいいいいいいいいい</option>
<option>ううううううううううううううううううう</option>
</select>
$('#hoge').on('mouseover', function(){
$(this).width('300px');
});
$('#hoge').on('mouseleave', function(){
$(this).width('100px');
}); >>63
ほかスレじゃ、ここを見た人が分からんだろ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/366
それにそのコードはjQueryはいらない
HTMLとCSSだけでできる
なので元スレの方に答えを書いた 勘違いと認めて謝罪までしてるのに更に追い詰めるヤツ
会社で嫌われてるんだろうな そうやってレスするから、
レス返すしかないだろ
お前が悪いんやで HPで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
5J59HFYTNJ 今UIのAccordionを使用してますが項目が増えたので
https://www.meanthemes.com/demo/meanmenu/demo.html
の動作のように２層化させたいです（デモの+-は不要）。
<div id="a">
<h3>
<div id="b1">
<h3>
<div id="b2">
<h4>
<div id="c1">
<h4>
<div id="c2">
var $a = $(document.getElementById('a'));
$a.accordion();
この場合、
var $b2 = $(document.getElementById('b2'));
$b2.accordion();
と加えればいいのでしょうか。
また、b2レベルが多数ある場合
$b3.accordion();、$b4.accordion();、・・・
などとその都度増やさないといけないのでしょうか。
お願いします。 まず
var $a = $(document.getElementById('a'));
$a.accordion();
↓
$('#a').accordion(); <div id="a" class="accordion">
<h3>
<div id="b1">
<h3>
<div id="b2" class="accordion">
<h4>
<div id="c1">
<h4>
<div id="c2">
$('.accordion').accordion(); 何となく動くようなら十分だろ
そんなに心配ならフルFlashででも作っとけ レスありがとうございます。
>>74
$aは他で何回か使っているので73のようにしてたのですが
$('#a')でないといけないのでしょうか？
>>75
それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。 >>78
> $aは他で何回か使っているので73のようにしてたのですが
メソッドチェーンを使えばいいので一つの関数内で何回も使う必要はない
別のイベントハンドラで使うならば、その都度取得した方がいい
イベントハンドラが違うということは要素に変化がある可能性があるから
別の関数で使うならば、関数の分割の仕方が悪い
何回も呼び出されてパフォーマンスに影響をあたえる場合は変数に入れるという手もありだが
そんな事例は少なく、一般論として短い書き方である$('#a')としたほうがよい
> それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。
ならまとめられる部分だけまとめればいい >>78
結果的には同じなのでいけない、間違いということではない
$(...) 【 jQuery(...) 】 はjQuery API を使用するということ
jQuery API では$('#a') というセレクタが用意されているので
わざわざインターフェイスからメソッド継承で jQuery API を使用する必要はない >>77
明らかにリファレンスやサンプルソースと違う場合、バージョンアップなどで不具合の可能性を残すことになる
つまりその時点で問題点を抱えることになり、己で首を絞めてるようなもの
疑問や不安が出るのは自然であり、今動けばいいなどと安易な輩と一緒に仕事してる人たちが気の毒だわ ＞ならまとめられる部分だけまとめればいい
無茶言うな〜 >>81
馬鹿だな
そんなこと言ってちゃなんにも使えないって言ってるんだよ
不安で不安で何もできないより、適当に動く方がいい
そもそも見る方の環境も様々なのがWebだからね
バージョンの際には問題があれば対処すればいいだけ
そもそも流れの速いWebで同じライブラリやコードをいつもでも使おうと考える方が間違い んなこたない
どんだけ暇人なんだ
その1件とは限らんだろ
まさか10年単位で使おうってわけでもあるまい >>82
UI使っててそれはないわな
なら裸で書くだろ
ちなみに$aか$('#a')かはどっちでもいい
好みで使っとけ >>78
何度も使うから、変数a にキャッシュしたのか
#a が永久に変化しないのなら、それで良い。
ただし、const, let か、定数を明記しておくこと >>79
まとめるがよくわかりませんが全て異なる処理の部分もあるので結局idの方がとなってしまいます。 javascriptもしくはjqueryでhtml文字列を渡したらサニタイズしたものを
返してくれる関数無いですか？ >>90
javascriptでサニタイズする関数は無いよ
何が目的なのか解らないけど
$('<hoge>').text().html() で特殊文字はエスケープ出来るけど >>92
ブラウザ側でsocket.ioで受信したデータをサニタイズして表示しようとしています。
$('<hoge>').text().html()の使い方についてですが、
<hoge>の部分は何でも良くて、textメソッドにサニタイズしたいタグが含まれる
可能性のある文字列を入れると戻り値としてサニタイズされた文字列が返るという
ことでしょうか？ ほらくそ、真面目にサニタイズとかに答えるから
サニタイズ言うなキャンペーン読んでこい
今後サニタイズ言うな
正しい言葉で質問し直せ
でないと答えられんだろうが サニタイズ言うなキャンペーン読んできましたが、
結局どうしたらいいのか良く分かりません。結局どうすればいいのですか？
サニタイズ言うなということは、HTMLタグを無効化するとか言えばいいのですか？ 無理に難しく言わずに用語を知らないのなら、
どうしたいのかを書けばいい socket.ioでブラウザ（クライアント側）に送られてくるデータは他のユーザーが
送信したデータなのでHTMLタグなどを含んでいます。
（リアルタイムチャットサイトを作っています）
なので、受信したデータのHTMLタグなどを無効化したいです。 そういうのは無効化なんていわないんだよ。まあいいや
まずな、ブラウザに送られてくるデータっていうのは
サニタイズとか無害化とか無効化しようと考えるな。そのまま使え
でだ、問題が有るときはそのデータを「画面に表示するときだけ」なんだよ
言ってる意味わかるか？ 計算に使ったりメッセージを組み立てる時とか
そういうときには、無効化する前のデータを使うってことだ。
そして一番最終段階、画面に表示するときにHTMLタグをタグとして表示するのではなく
（無効化ではなく）文字列として表示すれば良いんだよ
その場合にやるのは、<> という文字を < > に変換（HTMLエスケープ）するってことだ。
これが本当にお前がやりたいことだ。
無効化とかサニタイズという言い方じゃ、こういうことをしたいのかって分からんだろ？
例えば <> を消したり大文字に変換したとしても、HTMLタグとして表示されないわけで
目的（サニタイズ）は達成できてるとも言える。
それからJavaScriptにはURIエスケープは有るがHTMLエスケープはない
文字列置換で自分で作ることはできるが。そもそもそんなことをする必要がない。
なぜなら、jQueryであればhtml()メソッドを使ってデータを表示されるだけで
自動的にHTMLエスケープが行われるからだ 言葉が適切でなかったことを謝ります。
詳しく教えていただきありがとうございます。 jQueryも不要
要素作って textContentに設定するだけ
（改行スタイルを CSS white-spaceで設定する） hとdivの関連性が崩れてる
UIだとカスタマイズや変更が楽だしKBも対応してるんだよな
UI使わないにしてもwhite-spaceなんぞ使わなくてもできるよ なんだ、<, > などの文字が、<, > に変換される、HTMLエスケープの事か
DOM 操作とか、<script> タグなどは、気を付けた方がいい バリデーション、エスケープ、フィルタリング、サニタイズ
勘違いや境目や定義の曖昧さで紛らわしくなる場合がある
>>96がごもっとも ソース内に一箇所だけ書かれてる「class="ランダム英数字"」を
新規にwrap()追記する際にwrap('<a href...内に
その「class="ランダム数字"」を記入することってできます？
class="(.*?)"ですかね？でも貼り付けがわからず、、
同要素、クラス内の検索置換ってのは見つかるんだけど、
ソース全体から正規表現で拾ってきたものをある場所にペーストする、ってのがわからず、、
よろしくお願いします！ ランダム英数字の定義で、[A-Za-z0-9_] なら、\w。
アンダーバーを含まないなら、[A-Za-z0-9]
クラスを持つ、すべての要素から、半角英数字だけのクラスを取り出して、
最初の1つが見つかったら、return false; で、each 内から抜ける
wrap については「jQuery, wrap／wrapAll／wrapInner」で検索して
$( '[class]' ).each( function(){
if ( /^[A-Za-z0-9]+$/.test( $(this).prop('class') ) ){
console.log( $(this).prop('class') );
return false;
}
} ) > console.log( $(this).prop('class') );
www こっちに誘導されたんで来ました
jQueryで別ファイルからヘッダとフッタを読み込みってことやったんですが、処理は上手く行っているようだが
サーバーのファイルを更新してもjQueryで読み込むから日付チェックをしていないようで古いものがキャッシュから読まれてしまう
こう言うの抑止する方法とかありませんか？
当方webに関しては殆ど素人です >>113
いまどうやってるかを書かないと
エスパーするしかないと思う
たとえば$.getでとってるなら
cache: falseとか
(日付チェックとは違うけど) >>114
すみません。ググったらなんとかなった
$(function () {
$.ajaxSetup({
cache: false
});
});
足したら直りました
ちなみに、ここで動画管理のアプリ配っています（Windows10用）
http://www7b.biglobe.ne.jp/~megatherium/
webは、ほぼ素人なので夜中に焦りましたわｗ すみません、質問です
html内にボタンを設置し、そのボタンをクリックすると他のページからメールフォームを読み込むページを作成しているのですが、
メールフォームは読み込みこめたのですが、メールフォームに付いてる住所の自動入力のスクリプトが適用されません
どのようにすればよいでしょうか？
<!-- ボタン・インクルードスクリプト -->
$('#*** a').click(function(){
$('#***').load('***.html #*** ');
return false;
});
<!-- 住所の自動入力スクリプト-->
$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
#postcode'
],
address : {
'#address1' : '%3',
'#address2' : '%4%5'
}
});
});
当方、超初心者なので説明が下手かもしれませんがどうぞ宜しくお願いします そこまで初心者なら勉強しろ
ここは自ら勉強するものが躓いたときに聞きに来るところであって
コードを丸投げして直してもらうところではない
それが嫌なら有料でやれ >$(window).ready( function() {
「$(document).ready()」と「$(window).load()」の違いが分からないのなら、以下を使う
$(function() {
// ここに処理内容を書く
});
それに、これらは最初のページの読み込みに反応するだけで、
後から、非同期(Ajax)で読み込んだ部分には反応しない
自分で、one(), on() で、要素にイベントハンドラーを付けて、処理すれば？ >>119
ありがとうございます！！
出来ました！ ｊQuery というより javascript に関する質問なのですが、よろしくお願いします。
<select id="sel">
<option value="a">A</value>
<option value="b">B</value>
<option value="c">C</value>
<option value="d">D</value>
</select>
<div id="img"></div>
こんな感じのとき、#sel の選択中に A〜D に応じるイメージを #img に表示したいと思っていますが、
option に hover イベントを仕掛けてもうまく行かないように思います。
選択項目が変化していることを知る方法はありますでしょうか？
$('#sel').change( function(){ hogehoge.. } ) はうまくいきます。 >>121
すいません。
<option>の閉じは</option>です。 >>121
正確に言うとDOMの話なんでJavaScriptの話じゃないけどな。
JavaScriptはブラウザ以外でも動く。ブラウザ特有のものはJavaScriptではない >>123
121, 122 です。それは失礼しました。
で、答えは？ buttonをクリックしたら特定のdivの中にある画像をクリップボードにコピーしたいの
ですが、jQueryあるいはJavaScriptで出来ますか？ >>127だけどごめん、画像ならできないかも
やったことない >>121
根本的にUIに沿わない
あくまでselectはセレクトボックス selectはUIじゃないぞ？
UIはブラウザベンダーが決めてる。
HTMLとしてはselectは複数のoptionから選べるってだけの機能
そのUIをどう実装するかは関係ない
またよくある手としてJavaScriptでselectをブラウザ標準から
拡張することもよくある話
なので>>121はselect使うべき >>121
そういうのタッチデバイスで意味ないから
>>131
そういうユーザ操作ひっくるめてUIでないの？ >>125
Electron を使えば？
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017
この本を読めば？ Electronでふと思い出したがVisualstudio codeって使い心地どうすか
俺が描くのってHTMLCSSjQueryだけなんだけど >>137
起動がやや重い(Atomよりはマシ)が起動後はスムーズで悪くない VS Code で、Windows で、Ruby も楽々。
コンソール画面には、PowerShell
Emmet, SASS, MD やら、これが無料で、笑いが止まらない www
【Microsoft Tech Summit】APP017 PowerShellの新しい相棒 Visual Studio Code
https://www.youtube.com/watch?v=0zo6z0yHrGk .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa');
とするのはあり? >>140
それだと静的に付けたclassまで消えちゃうじゃん >>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>143
$('.aaa').removeClass(function(i, v){
return v.split(' ').slice(1).join(' ');
});
こういう感じでもええんやで 一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる >>144
aaaが必ずしも最初に来る保証がない場合は？↓とか
>>145
UI含めてライブラリで勝手に付けられたりするからな >>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・ >>148
ライブラリで勝手につけられると言っても
せいぜいbootstrapみたいに btn btn-primary btn-lg active ぐらいなもんだろ？
一つの要素に4つとかそのぐらいの数しかいらない
これもbootstrapのCSSの設計上これだけいるってだけで、
JavaScriptから設定するクラスだとやっぱりそんなにいらないと思う
まあ推測するに
<div data-state="a"></div>
<div data-state="b"></div>
<div data-state="c"></div>
<div data-state="d"></div>
みたいにやればいいのに、classで
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
こんな風にやろうとしてるんでしょ？
だからe, f, g が増えたらリセットするために、e, f, gのクラスを消すように
メンテナンスしなくちゃいけない！ってなってるんだと思うよ。
つまりやっぱり使い方が間違ってる。
前者のやり方であれば、当然data-stateを初期値に戻すだけでいい 管理が大変って今どうやってて何が大変なのか分からん。
var myTags = 'bbb ccc ddd';
で管理して
$('.aaa').addClass(myTags);
$('.aaa').removeClass(myTags);
$('.aaa').toggleClass(myTags);
とか普通に使うんじゃダメなの？ ■ このスレッドは過去ログ倉庫に格納されています
