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/ classの使い方違うと言われそうだがあえて質問。 <li id="i" class="hage hoge a1"> <li id="ro" class="hage hoge a2"> <li id="ha" class="hage a3"> 〜 <li id="ni" class="hage hoge a9"> <li id="ho" class="hoge a10"> liの数は10個固定。順序は動的に入れ替わる。 上のidは適当につけたもので、これは動的に変わらず(変えず)。 hage hogeはあったりなかったり、a○はどれかの数字で必ずある a○の1〜10の数は固定で他の数字が入ることはない。 a2←→a9など動的に入れ替わる。 で、任意の、例えば#roのa○のその時点での数字を取得するにはどうしたらいいでしょうか? attributesで取得して正規表現で探すとか…は面倒だし無駄だし。 属性使えばattr()で簡単にできるがclassでできないものかと思いまして。 >>4 順序が入れ替わるのなら index() は無意味なので className から取るしか無いと思う var num = (elm) => elm.attr('class').match(/a\d+/)[0].replace(/a/, ''); console.log(num($('#ro'))); >>4 class名をデータのように扱うなら、data-*属性を使う実装に変える方がいいと思う classでやるなら、classListから正規表現を使う > attributesで取得して正規表現で探すとか…は面倒だし無駄だし。 そもそも、class名から数字を抽出する処理が無駄なわけでclass名を使うことがナンセンスかと 無駄ナンセンス、やはりそうですか。 data-は動的に変更した時点で即CSSと連動できましたっけ? a○は .a1 {} .a2 {} .a3 {} というふうにCSSのためなのです。 >>5 こういう記述はまだ早いという人のほうが多いんじゃないかな 今のうちこれにしても数年後スタンダードになってるとも思えん >>7 [data-hoge=a1] { } で定義できるよ。 datasetをcssでも使うならjQueryの.data()以外で読み書きしないとだめだな 即連動できるかに対して定義できるよって ajax見たいにキャッシュ無効にできて即DOM書き換えられればいのにな 11だが俺も書き方悪かった ようは誤解招きかねない書き方だなと ネイティブjsでも書き換え必要→なら最初からattrでいいんじゃね?→ data-でなくユーザ指定の属性はいいのか、と これやっちゃってる人多いと思う >>8 かっこつけて先走りしたはいいが後で書き直すパターンかもな。 >>10 開発者?はなんでこんな設計にしてしまったのだろう。 これでしかできなかったのかね。 無難に独自属性attr()でやる(すでにやってる)ことにします。ありがとう。 jQueryはCSSは相性いいが、jsとCSSはいまいちだな オブジェクト(連想配列)がCSSのプロパティと連動できれば最高なんだが DOMではCSSは取得出来ないからな 相性どころか次元が違う もう入り始めてるけどCSS Typed OMで記述は長くなるかもしれないが ロジック的にきれいに書ける 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文字列を渡したらサニタイズしたものを 返してくれる関数無いですか? ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.1 2024/04/28 Walang Kapalit ★ | Donguri System Team 5ちゃんねる