のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,646,100人
昨日:no data人
今日:
最近の注目
人気の最安値情報

私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

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

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
レスフィルター : (試験中)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
1 : Name_Not - 2017/10/23(月) 06:31:18.14 ID:???.net (+101,-30,+0)
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 : Name_Not - 2017/10/23(月) 06:32:06.08 ID:???.net (+63,-30,-86)
■テンプレ案
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 : Name_Not - 2017/10/23(月) 06:33:03.88 ID:???.net (+43,+13,+1)
テンプレここまで
4 : Name_Not - 2017/11/21(火) 21:10:07.35 ID:???.net (+24,-30,-267)
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 : Name_Not - 2017/11/21(火) 23:24:04.99 ID:???.net (+38,-30,-56)
>>4
順序が入れ替わるのなら index() は無意味なので
className から取るしか無いと思う
var num = (elm) => elm.attr('class').match(/a\d+/)[0].replace(/a/, '');
console.log(num($('#ro')));
6 : Name_Not - 2017/11/22(水) 01:59:23.08 ID:???.net (+5,-30,-102)
>>4
class名をデータのように扱うなら、data-*属性を使う実装に変える方がいいと思う
classでやるなら、classListから正規表現を使う

> attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
そもそも、class名から数字を抽出する処理が無駄なわけでclass名を使うことがナンセンスかと
7 : Name_Not - 2017/11/22(水) 21:18:09.81 ID:???.net (+2,-29,-46)
無駄ナンセンス、やはりそうですか。
data-は動的に変更した時点で即CSSと連動できましたっけ?

a○は
.a1 {}
.a2 {}
.a3 {}
というふうにCSSのためなのです。
8 : Name_Not - 2017/11/23(木) 11:07:21.49 ID:???.net (+97,+29,-22)
>>5
こういう記述はまだ早いという人のほうが多いんじゃないかな
今のうちこれにしても数年後スタンダードになってるとも思えん
9 : Name_Not - 2017/11/23(木) 13:52:01.23 ID:???.net (-1,-30,-20)
>>7
[data-hoge=a1] {
}
で定義できるよ。
10 : Name_Not - 2017/11/23(木) 16:08:20.34 ID:???.net (+35,-29,-27)
datasetをcssでも使うならjQueryの.data()以外で読み書きしないとだめだな
11 : Name_Not - 2017/11/23(木) 16:59:14.28 ID:???.net (+57,+29,-51)
即連動できるかに対して定義できるよって
ajax見たいにキャッシュ無効にできて即DOM書き換えられればいのにな
12 : Name_Not - 2017/11/23(木) 17:22:25.58 ID:???.net (+61,+28,-69)
11だが俺も書き方悪かった
ようは誤解招きかねない書き方だなと

ネイティブjsでも書き換え必要→なら最初からattrでいいんじゃね?→
data-でなくユーザ指定の属性はいいのか、と
これやっちゃってる人多いと思う
13 : Name_Not - 2017/11/23(木) 21:38:30.89 ID:???.net (+68,+29,-21)
>>8
かっこつけて先走りしたはいいが後で書き直すパターンかもな。

>>10
開発者?はなんでこんな設計にしてしまったのだろう。
これでしかできなかったのかね。
14 : Name_Not - 2017/11/24(金) 22:48:48.23 ID:???.net (-1,-29,-8)
無難に独自属性attr()でやる(すでにやってる)ことにします。ありがとう。
15 : Name_Not - 2017/11/26(日) 15:52:35.16 ID:???.net (+106,-29,-77)
jQueryはCSSは相性いいが、jsとCSSはいまいちだな
オブジェクト(連想配列)がCSSのプロパティと連動できれば最高なんだが
16 : Name_Not - 2017/11/26(日) 16:01:37.03 ID:???.net (+32,-17,-18)
DOMではCSSは取得出来ないからな
相性どころか次元が違う
17 : Name_Not - 2017/11/27(月) 04:53:42.11 ID:???.net (+51,+23,-8)
もう入り始めてるけどCSS Typed OMで記述は長くなるかもしれないが
ロジック的にきれいに書ける
18 : Name_Not - 2017/11/27(月) 20:35:28.42 ID:???.net (+2,-20,-15)
だがjQueryは元はjs
19 : Name_Not - 2017/11/27(月) 21:38:57.34 ID:???.net (+27,-20,-2)
元jsなw
20 : Name_Not - 2017/11/28(火) 02:56:02.42 ID:???.net (-1,-29,-49)
document.styleSheets すら参照できないjQueryとDOMを比較するのもどうかと思った
21 : Name_Not - 2017/11/28(火) 09:35:39.74 ID:???.net (-1,-29,-67)
document.styleSheetsを引き合いに出すのはちょっとね
DOM APIでもdocument.styleSheetsを弄るのは最終手段で気持ちの悪いことだし
22 : Name_Not - 2017/11/28(火) 20:50:26.26 ID:???.net (+57,+29,-22)
そうかね
俺はインラインスタイルを多用するコードの方が気持ち悪く感じるな
23 : Name_Not - 2017/11/28(火) 22:02:45.18 ID:???.net (-1,-29,-22)
まあ、classやattributeでスタイルを書き換えるのがメインだから、setterとしての.css()には魅力を感じないというのはある
24 : Name_Not - 2017/11/28(火) 22:14:14.27 ID:???.net (+37,+5,-45)
>>16
言うまでもないがjQueryはセレクタが便利
jsのノード取得ももっと拡張するとか
25 : Name_Not - 2017/11/28(火) 22:26:03.38 ID:???.net (+37,-30,-87)
>>15がいっているのはこういうことだろうが、
jQuery(element).css({color: 'black', 'background-color': 'white'});
classでやれることをインラインスタイルで代替する事はまずない
インラインスタイルや!importantは基本避けるべき技術だな
26 : Name_Not - 2017/11/28(火) 22:57:05.02 ID:???.net (+77,+20,-19)
だなって、インラインスタイルや!importantが出てくる意味がわからん
27 : Name_Not - 2017/11/28(火) 23:21:50.21 ID:???.net (-1,-29,-28)
(attr()で属性変える=CSSも変わる)
(オブジェクト変える≠CSSも変わる)
だな
28 : Name_Not - 2017/11/29(水) 01:34:48.51 ID:???.net (+91,+29,-38)
.css()がインラインスタイルを書き換えている事を知らないんだろう
jQueryしか触ってないからDOMの基本も分かってない
29 : Name_Not - 2017/11/29(水) 20:33:02.73 ID:???.net (+9,-13,+2)
誰に言ってるんだよ{
30 : Name_Not - 2017/11/29(水) 21:03:16.39 ID:???.net (+58,+30,+0)
31 : Name_Not - 2017/11/29(水) 22:07:15.65 ID:???.net (+57,+29,-4)
26だがインスペクタも見てるから嫌でも気がついてますが
32 : Name_Not - 2017/11/29(水) 22:26:44.38 ID:???.net (+101,+29,-16)
>>25
>>15がいっているのはこういうことだろうが、

残念ですが違います
33 : Name_Not - 2017/11/29(水) 23:14:20.01 ID:???.net (+104,+29,-55)
>>28
そういう意味じゃないだろ?
DOMオブジェクトの要素からCSSが取得できないってことだろw
お前こそ基本が分かっていない
34 : Name_Not - 2017/11/30(木) 00:00:12.46 ID:???.net (+53,+26,-2)
>>19
何が違うん?
35 : Name_Not - 2017/11/30(木) 00:16:38.16 ID:???.net (+71,+7,-18)
オブジェクト変えるでcss()だけしか出てこなかったのかね
36 : Name_Not - 2017/11/30(木) 07:14:56.48 ID:???.net (+71,+29,-15)
>>33
「CSSが取得できない」が抽象的すぎて何をいってるのか、さっぱり分からん
もっと、具体的に書いてくれ
37 : Name_Not - 2017/11/30(木) 07:59:24.41 ID:???.net (+98,+20,-43)
>>15
イメージを言語化できてない感があるから
jQueryとDOMで何が違うか、コードに書き表してみたら?
38 : Name_Not - 2017/11/30(木) 08:04:14.53 ID:???.net (+31,-30,-37)
element.style, getComputedStyle, CSSRuleList
DOMにCSS捜査のために必要なオブジェクトは十分に揃ってる
39 : Name_Not - 2017/11/30(木) 11:13:44.08 ID:???.net (+114,-30,-151)
>>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 : Name_Not - 2017/11/30(木) 19:16:20.61 ID:???.net (+46,+29,+1)
>>40
htmlからして無茶苦茶
44 : Name_Not - 2017/11/30(木) 20:31:49.13 ID:???.net (+62,+29,-12)
>>38
めんどくささが全然違うのをさも同等にできるかのように引き合いに出さなくてもいいよ
45 : Name_Not - 2017/11/30(木) 20:38:58.38 ID:???.net (+67,+29,-50)
>>39
「オブジェクト(連想配列)がCSSのプロパティと連動できれば最高」はどこへ行った?
あと、>>35とは解釈が違うな
46 : Name_Not - 2017/11/30(木) 20:42:55.46 ID:???.net (+57,+29,-23)
>親要素を無視して

子孫要素は、親の位置から、相対的に指定するものじゃないの?
48 : Name_Not - 2017/11/30(木) 21:02:23.59 ID:???.net (+72,+30,-53)
>>39
第三者が想像で書いてる時点で不毛だなあ
また、「残念ですが違います」だけ返されて終わりそう >>32
本人は何がどう違うのか説明する気はないみたいだし、議論の価値なしかな
49 : Name_Not - 2017/11/30(木) 21:12:44.20 ID:???.net (+32,-29,-32)
(オブジェクト変える=CSSも変わる、ができるといいな)
だな
50 : Name_Not - 2017/11/30(木) 21:54:33.89 ID:???.net (+111,+29,-24)
>>37
想像できなければ無理に入ってこなくてけっこう
どうせまたクセの強いコードやライブラリでどうこうするだけだろ
ちなみに擬人化なら俺がしたるで
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド


トップメニューへ / →のくす牧場書庫について