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/ >>42
imgのwidthを取得して、imgのwidthが500px以上なら1000pxに拡大する
img或いは、div.IMGののmargin-leftを-250pxにすれば良いんじゃないの? >>38
めんどくささが全然違うのをさも同等にできるかのように引き合いに出さなくてもいいよ >>39
「オブジェクト(連想配列)がCSSのプロパティと連動できれば最高」はどこへ行った?
あと、>>35とは解釈が違うな >親要素を無視して
子孫要素は、親の位置から、相対的に指定するものじゃないの? >>43
このテンプレにランダムサイズの画像が入るときがある場合がある、という感じなので、
その都度計算してmarginとpaddingとかではなく単純に親要素を無視して、
もしくは>>40のように親の閉じタグを追加、末尾に親開始タグを入れられないかと、、 >>39
第三者が想像で書いてる時点で不毛だなあ
また、「残念ですが違います」だけ返されて終わりそう >>32
本人は何がどう違うのか説明する気はないみたいだし、議論の価値なしかな (オブジェクト変える=CSSも変わる、ができるといいな)
だな >>37
想像できなければ無理に入ってこなくてけっこう
どうせまたクセの強いコードやライブラリでどうこうするだけだろ
ちなみに擬人化なら俺がしたるで >>47
$('.IMG').each(function(){
var $img = $(this).find('img');
if ($img.width() > 500) {
$img.width(1000);
$(this).css({'width': '1000px', 'margin': '0 auto'}).parent().before('<div class="A">add</div>').before(this);
}
});
こんな感じかな >>51
<div class="1">
<div class="A">
テキスト
<div class="IMG">画像</div>
テキスト
</div>
</div>
これが以下のようにA親要素の上に来てしまいました。
<div class="1">
add
<div class="IMG">拡大化された画像</div>
<div class="A">
テキスト
テキスト
</div>
</div>
これだとテキストと画像の順番が変わってしまいますね。
やはり単純に親要素範囲内のテキストははみ出さずに、
親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
というのは無理な話なのでしょうか。。 というかjQueryの前にHTMLとCSSで
before と after を作ろうか?
それさえあれば変換する方法は簡単な話だ >>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
の動作のように2層化させたいです(デモの+-は不要)。
<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は、ほぼ素人なので夜中に焦りましたわw すみません、質問です
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
ありがとうございます!!
出来ました! jQuery というより 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まで消えちゃうじゃん ■ このスレッドは過去ログ倉庫に格納されています