元スレjQuery 質問スレッド vol.8

みんなの評価 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ

/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで

1 = :

JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。

JavaScriptの質問は関連スレで質問して下さい。

■前スレ
jQuery 質問スレッド vol.7
http://mevius.5ch.net/test/read.cgi/hp/1478055094/

■関連スレ
JavaScript の質問用スレッド vol.130
http://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
http://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
http://echo.5ch.net/test/read.cgi/hp/1465399470/

2 = :

■テンプレ案
http://fiddle.jshell.net/6ksf2087/show/light/

■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ－ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

3 = :

テンプレここまで

4 = :

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でできないものかと思いまして。

5 = :

>>4
順序が入れ替わるのなら index() は無意味なので
className から取るしか無いと思う
var num = (elm) => elm.attr('class').match(/a\d+/)[0].replace(/a/, '');
console.log(num($('#ro')));

6 = :

>>4
class名をデータのように扱うなら、data-*属性を使う実装に変える方がいいと思う
classでやるなら、classListから正規表現を使う

> attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
そもそも、class名から数字を抽出する処理が無駄なわけでclass名を使うことがナンセンスかと

7 = :

無駄ナンセンス、やはりそうですか。
data-は動的に変更した時点で即CSSと連動できましたっけ？

a○は
.a1 {}
.a2 {}
.a3 {}
というふうにCSSのためなのです。

8 = :

>>5
こういう記述はまだ早いという人のほうが多いんじゃないかな
今のうちこれにしても数年後スタンダードになってるとも思えん

10 = :

datasetをcssでも使うならjQueryの.data()以外で読み書きしないとだめだな

11 = :

即連動できるかに対して定義できるよって
ajax見たいにキャッシュ無効にできて即DOM書き換えられればいのにな

12 = :

11だが俺も書き方悪かった
ようは誤解招きかねない書き方だなと

ネイティブjsでも書き換え必要→なら最初からattrでいいんじゃね？→
data-でなくユーザ指定の属性はいいのか、と
これやっちゃってる人多いと思う

13 = :

>>8
かっこつけて先走りしたはいいが後で書き直すパターンかもな。

>>10
開発者？はなんでこんな設計にしてしまったのだろう。
これでしかできなかったのかね。

15 = :

jQueryはCSSは相性いいが、jsとCSSはいまいちだな
オブジェクト（連想配列）がCSSのプロパティと連動できれば最高なんだが

16 = :

DOMではCSSは取得出来ないからな
相性どころか次元が違う

17 = :

もう入り始めてるけどCSS Typed OMで記述は長くなるかもしれないが
ロジック的にきれいに書ける

18 = :

だがjQueryは元はjs

19 = :

元ｊｓなｗ

22 = :

そうかね
俺はインラインスタイルを多用するコードの方が気持ち悪く感じるな

24 = :

>>16
言うまでもないがjQueryはセレクタが便利
jsのノード取得ももっと拡張するとか

25 = :

>>15がいっているのはこういうことだろうが、
jQuery(element).css({color: 'black', 'background-color': 'white'});
classでやれることをインラインスタイルで代替する事はまずない
インラインスタイルや!importantは基本避けるべき技術だな

26 = :

だなって、インラインスタイルや!importantが出てくる意味がわからん

28 = :

.css()がインラインスタイルを書き換えている事を知らないんだろう
jQueryしか触ってないからDOMの基本も分かってない

29 = :

誰に言ってるんだよ{

30 = :

>>26

31 = :

26だがインスペクタも見てるから嫌でも気がついてますが

32 = :

>>25
>>15がいっているのはこういうことだろうが、

残念ですが違います

33 = :

>>28
そういう意味じゃないだろ？
DOMオブジェクトの要素からCSSが取得できないってことだろｗ
お前こそ基本が分かっていない

34 = :

>>19
何が違うん？

35 = :

オブジェクト変えるでcss()だけしか出てこなかったのかね

36 = :

>>33
「CSSが取得できない」が抽象的すぎて何をいってるのか、さっぱり分からん
もっと、具体的に書いてくれ

37 = :

>>15
イメージを言語化できてない感があるから
jQueryとDOMで何が違うか、コードに書き表してみたら？

38 = :

element.style, getComputedStyle, CSSRuleList
DOMにCSS捜査のために必要なオブジェクトは十分に揃ってる

39 = :

>>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);

こういうことだろうな

41 = :

>>40
htmlからして無茶苦茶

44 = :

>>38
めんどくささが全然違うのをさも同等にできるかのように引き合いに出さなくてもいいよ

45 = :

>>39
「オブジェクト（連想配列）がCSSのプロパティと連動できれば最高」はどこへ行った？
あと、>>35とは解釈が違うな

46 = :

>親要素を無視して

子孫要素は、親の位置から、相対的に指定するものじゃないの？

48 = :

>>39
第三者が想像で書いてる時点で不毛だなあ
また、「残念ですが違います」だけ返されて終わりそう　>>32
本人は何がどう違うのか説明する気はないみたいだし、議論の価値なしかな

49 = :

（オブジェクト変える＝CSSも変わる、ができるといいな）
だな