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/ document.styleSheets すら参照できないjQueryとDOMを比較するのもどうかと思った document.styleSheetsを引き合いに出すのはちょっとね DOM APIでもdocument.styleSheetsを弄るのは最終手段で気持ちの悪いことだし そうかね 俺はインラインスタイルを多用するコードの方が気持ち悪く感じるな まあ、classやattributeでスタイルを書き換えるのがメインだから、setterとしての.css()には魅力を感じないというのはある >>16 言うまでもないがjQueryはセレクタが便利 jsのノード取得ももっと拡張するとか >>15 がいっているのはこういうことだろうが、 jQuery(element).css({color: 'black', 'background-color': 'white'}); classでやれることをインラインスタイルで代替する事はまずない インラインスタイルや!importantは基本避けるべき技術だな だなって、インラインスタイルや!importantが出てくる意味がわからん (attr()で属性変える=CSSも変わる) (オブジェクト変える≠CSSも変わる) だな .css()がインラインスタイルを書き換えている事を知らないんだろう jQueryしか触ってないからDOMの基本も分かってない 26だがインスペクタも見てるから嫌でも気がついてますが >>25 >>15 がいっているのはこういうことだろうが、 残念ですが違います >>28 そういう意味じゃないだろ? DOMオブジェクトの要素からCSSが取得できないってことだろw お前こそ基本が分かっていない オブジェクト変えるでcss()だけしか出てこなかったのかね >>33 「CSSが取得できない」が抽象的すぎて何をいってるのか、さっぱり分からん もっと、具体的に書いてくれ >>15 イメージを言語化できてない感があるから jQueryとDOMで何が違うか、コードに書き表してみたら? element.style, getComputedStyle, CSSRuleList DOMにCSS捜査のために必要なオブジェクトは十分に揃ってる >>37 //css #hoge { color: red; } //html <div id="hoge">文字はred</div> //id hoge のcolorを取得 var jqCss = $('#hoge').css('color'); console.log(jqCss); var ele = document.getElementById('hoge'); var jsCss = document.defaultView.getComputedStyle(ele, null).getPropertyValue('color'); console.log(jsCss); こういうことだろうな <div class="幅500px"> <iframe class="IMG"><img 幅800画像></div> aaa </div> 上記ソースはテンプレでいじれないものとして。 幅500pxクラス内に写真が貼られた場合のみ</div>要素を追加し、 画像幅制限を解放し最後にもう一度幅500pxクラスを追加したいのですが、 クラスコードがそのまま文字クラスとして挿入されません。 $('.IMG').before('</div>'); $('.IMG').after('<div class="幅500px">'); 希望は: <div class="幅500px"> </div>←追加希望 <iframe class="IMG"><img 幅800画像></div> <div class="幅500px">←追加希望 aaa </div> 👀 Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f) >>40 質問を具体的にさせていただきますのでどなたかヘルプ願います。 <div class="A"> // 500px幅の画面中央寄せブロック テキスト <div class="IMG"> 画像(100^1200px) </div> テキスト </div> 上記ソースをいじらず、500幅制限ブロック内で それを越える幅を持つ画像が挿入された場合のみその画像を 最大幅1000pxまでを条件に拡大させて 親要素を無視して画面センタリグさせる方法はないでしょうか? >>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() で、要素にイベントハンドラーを付けて、処理すれば? ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.0 2024/04/24 Walang Kapalit ★ | Donguri System Team 5ちゃんねる