jQuery 質問スレッド vol.8
レス数が1000を超えています。これ以上書き込みはできません。
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が取得できないってことだろｗ
お前こそ基本が分かっていない オブジェクト変えるで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
の動作のように２層化させたいです（デモの+-は不要）。
<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は、ほぼ素人なので夜中に焦りましたわｗ すみません、質問です
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
ありがとうございます！！
出来ました！ ｊQuery というより 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まで消えちゃうじゃん >>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>143
$('.aaa').removeClass(function(i, v){
return v.split(' ').slice(1).join(' ');
});
こういう感じでもええんやで 一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる >>144
aaaが必ずしも最初に来る保証がない場合は？↓とか
>>145
UI含めてライブラリで勝手に付けられたりするからな >>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・ >>148
ライブラリで勝手につけられると言っても
せいぜいbootstrapみたいに btn btn-primary btn-lg active ぐらいなもんだろ？
一つの要素に4つとかそのぐらいの数しかいらない
これもbootstrapのCSSの設計上これだけいるってだけで、
JavaScriptから設定するクラスだとやっぱりそんなにいらないと思う
まあ推測するに
<div data-state="a"></div>
<div data-state="b"></div>
<div data-state="c"></div>
<div data-state="d"></div>
みたいにやればいいのに、classで
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
こんな風にやろうとしてるんでしょ？
だからe, f, g が増えたらリセットするために、e, f, gのクラスを消すように
メンテナンスしなくちゃいけない！ってなってるんだと思うよ。
つまりやっぱり使い方が間違ってる。
前者のやり方であれば、当然data-stateを初期値に戻すだけでいい 管理が大変って今どうやってて何が大変なのか分からん。
var myTags = 'bbb ccc ddd';
で管理して
$('.aaa').addClass(myTags);
$('.aaa').removeClass(myTags);
$('.aaa').toggleClass(myTags);
とか普通に使うんじゃダメなの？ >>153
myTagsをその都度変えるということ？ data-はクセあるからな
キャッシュの問題
CSSに反映されない
$.hasDataはイベント有無で変わる
classの方が楽で自然に書ける場合はある >>153
すでにbbbがあるか否かの判断がめんどくさくね？ 質問はランダムに動的に追加されるclassだけを削除する方法
dataなんて言ってないだろ？ｗ >>157
どうでもよくね？
<div class="aaa ccc ddd" />
に
$('.aaa').removeClass('bbb ccc ddd');
しても
<div class="aaa" />
になるだけだろ？え、俺なんか勘違いしてる？？ >>156
なんか勘違いしてね？
jQueryのdataじゃなくて
data-x属性だぞ
普通にCSSで使える
[data-name=value]とか書けばいい .red-text { color: red }
.red-background { background-color: red }
とかしてるんじゃないの？
まあ使いかたが悪いってことだよね >>156
あとdata()前後とかな
>>160
ならdata-はいらんがな >>159
上にもあったがライブラリのクラスはそれを書かなくてはならない。
つまり仕様が変わると変えなくてはならない。
これは将来的に面倒な要素を残すことになる。
また、仕様変更でeeeが加わった場合にそこも書き直さなくてはならない。
>>140なら自分の初期設定したいクラスだけ書けばいい。 >>163
静的クラスのほうの仕様は変わらない前提？ならいいんじゃない >>161
２個ならず多い場合に、個別に設定＝変更する場合ならありじゃないの？
背景色だけ変えるとか 勝手な憶測書いてそれ前提で否定する人って何が目的なんだろ >>162
> ならdata-はいらんがな
HTML5違反をして、独自属性をつけるって話？
そりゃそれならいらんだろうなｗ だがそこは論点じゃない
classではなく独自の属性を使えという話
classを使うと「値のリスト」にしかならない。classという名前は固定
だからclassに自分の知らない値が入ることを考慮する必要が出てくる
独自属性の場合、「独自属性とその値」になる
独自属性には自分の知らない値は入らないので、classを使うよりも
取扱が簡単になる >>166
推測しかできないような
中途半端な書き込みをするなってことだろｗ >>161
横レスだが何が言いたいのかはっきり書いてくれないかな
それだといくつかに取れる
>>168
なら手順的には先ず尋ねるべきだな >>169
> 横レスだが何が言いたいのかはっきり書いてくれないかな
クラス名 = スタイル になっているということだよ >>169
> なら手順的には先ず尋ねるべきだな
尋ねる前にヒントだけしかかかないような書き込みしてるだろ
>>151
> ヒントだけ書くとスポーツやトラフィックや・・・
ヒントしか言わないやつは推測で答えられても文句は言わない >>167
classは、すべての要素に対して使用することが出来る「分類名」
data-は、ｈｔｍｌの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」
勘違いするなよｗ >>168
どう中途半端？
>>140 こういう書き方はあり？(yes|no?)
>>141 yes
単純明快、しかもすでに解決済み。
横から妄想書いてるのがゴチャゴチャ言ってるだけでは。 妄想とは>>161などな。
すでに論点完全に外れてるからな。 >>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化（aaa)
条件2→aaaの一部の状態を変化（bbb)
条件3→aaaの一部の状態を変化（ccc)
条件は単なるifだけじゃないぞ
ユーザ入力や関数などな >>173
> data-は、ｈｔｍｌの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」
だから独自データだからdata-*使えってことでしょ？何が言いたいのか分からん
data-*の使い方がわからないっていうのならサンプル見つけてあげるよ
https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>
Custom data attributes (e.g. data-foldername or data-msgid) can b
<li data-length="2m11s">Beyond The Sea</li>
<p>The third <span data-mytrans-de="Anspruch">claim</span>
Here, the data-has-payment-request attribute is
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
こういう使い方をする。この要素は「○だ」みたいな言い方ではなく
この要素の「○は△だ」みたいな時にdata-*を使うと良い
一番上の例だと、この要素のtextureはdeep pileだみたいな言い方ね
これをclassに入れて、class="carpet deep-pile" みたいにしてしまうと、テクスチャの種類が増えるたびに
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが今の話題
「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる
特に属性セレクタの (https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors より)
> [attr~=value] attr という名前の、値がスペースで区切られた項目リストであり、うち 1 つが正確に "value" である属性を持つ要素を表します。
↑ これはカスタム属性をclassと同じようにスペース区切りの値として使うことを目的として作られたようなもの
（class以外でスペース区切りで値を入れるものなんてないでしょ？） だれか >>176 が言ってることを
説明できる人いる？ >>177
>>140の質問に対しては>>174の通り解決している
根本的に受け答えの問題で質問の主旨を理解しよう 【悲報】現在自演中の>>141さん、質問主の>>140からは完全に無視されていたｗｗｗｗｗ >>178
なるほどな、それがわからないからわけわからん書き込みが湧いてるのだな
説明も何もそのままだぞ
逆に何がわからないのか聞けばいい やっぱり>>176が言ってることを説明できない＝意味不明だから誰も理解できなかったようだね 理解できてる人もいるのに誰もとはいかに
大雑把な例えだが
役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
新入社員で女性社員はbとcになる はぁ？ 説明できる人いる？って聞いただろ
誰も答えてないのになんでいると証明できる？ >>183でわからないならそれでいいんじゃない
誰も困らないから >>183
関係ないけどそんな仕事したなあ
新入社員の名前は明るい緑で、女性の名前は明るい赤でっていわれて
じゃあ女性の新入社員の名前の色はどちらにしますかってきいたら
話きいてた? 明るい緑と明るい赤に決まってるでしょ? >>183
> 役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
> 新入社員で女性社員はbとcになる
それがどうしたの？
>>177にも書いているが
「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる
<span class="person" data-position="officer data-proficiency="newly" data-gender="female">
[data-proficiency="newly"] {
font-weight: bold;
}
[data-gender="female"] {
color: red;
}
複数の異なった属性を、属性名をつけずに全部クラスに入れるから
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが
今の話題だって言ってる >>186
あるある
ちなみに補足しておくと以下の場合も考えられる
上書きで後者指定優先（あまりすすまないが）
全て色とは限らず、色形位置などかぶらない状態
全て色でもその社員の同じ位置とは限らない
顔胴体背景、更に擬似要素で別部分
>>188
data-とは話は分岐されている
というかアンカ追え アンカ？ こんな感じだろ
145 自分：Name_Not_Found[sage] 投稿日：2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる
↓↓↓↓↓
147 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 21:59:16.24 ID:???
たしかになんでそんなクラス付け外しするんだ
↓↓↓↓↓
151 名前：Name_Not_Found[sage] 投稿日：2018/01/29(月) 21:22:55.42 ID:???
>>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・
↓↓↓↓↓
>>151
> ヒントだけ書くとスポーツやトラフィックや・・・
ヒントしか言わないやつは推測で答えられても文句は言わない
↓↓↓↓↓
176 名前：Name_Not_Found[sage] 投稿日：2018/02/01(木) 21:24:32.76 ID:???
>>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化（aaa)
略
↓↓↓↓↓
182 自分：Name_Not_Found[sage] 投稿日：2018/02/03(土) 09:55:44.12 ID:???
やっぱり>>176が言ってることを説明できない＝意味不明だから誰も理解できなかったようだね アンカたどればわかるが、
結局のところ一つの要素に、そんなにクラスを
設定する必要があるってのがそもそも間違いなんだよ。
一つのclassにいろんな属性をごちゃ混ぜでぶち込むから
管理できなくなってるんだろうが。
data-*を使って属性の種類ごとに分ければ良い
異なった属性を全部classに入れるな >>191
>一つのclassにいろんな属性をごちゃ混ぜでぶち込む
どれのこと？ >>192
アンカたどれ
これのことだ
145 自分：Name_Not_Found[sage] 投稿日：2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる
もっとたどるならこれのことだ
140 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 10:57:06.54 ID:???
.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa');
とするのはあり?
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと $('.aaa').removeClass('bbb ccc ddd・・・');
で一つづつremoveClassするのは大変だからって
$('.aaa').removeClass() してしまうのは
>>142が指摘したとおりの問題が有る
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
となるのは、classに複数の異なった属性を属性を入れてしまうから
管理が面倒になるほどの自体になる。
そして>>183もその通りのことをやってしまった。
複数の異なった属性を一つのclassに入れてしまうから
classの値がたくさん増えることになり管理が面倒になる >>190
だろっていちいち書くなよ、うざいな
専ブラ使ってないのか？ >>195
5ちゃんねるの使い方の話は、別件だからおいておこうか？ >>194
全然面倒ではないが何か？
こういう案件自体はあるだろ > 全然面倒ではないが何か？
質問者が面倒だって言ってるのに
何を言ってるんだおまえは？ >>176がわからない→例え>>183
やってしまったもなにもないわな
アンカで追えてないのか話が混ざってる気がする >>193それは見てますよ
それのどこが一つのclassになのでしょうか？ >>199
それ俺が書いたんだけど？
質問者が面倒だって言ってるから、
俺がclassに複数の異なった属性を入れるのがいけないと指摘した
異なった属性を混ぜ込まなければclassにそんなに多くのものを入れることはない
「一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる」
最初から質問者に対してそう指摘している
で、おまえは誰？何をやった？ >>201
> それのどこが一つのclassになのでしょうか？
一つの要素にclass属性は"一つ"しかありませんよｗ
data-*属性はいくつでも作れますがね >>203
>>194に”複数の異なった属性を一つのclassに入れてしまう”と？
ついでに質問いいすか？
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか？
リセットするときどうするのでしょうか？
もし各data-*ごとに消すならaddＣｌａｓｓとさほど変わらない気がしますが それもだが上に出てたライブラリで勝手に～はどうするんだろうな
むろんdata-*を否定するわけではないが >>188
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。
>>188でどう解決するのか。
同じく聞きたい。 >>204
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか？
そう。attrメソッドで変える。
そもそもdata-*は別にjQueryのdataメソッドのための属性というわけじゃない
jQueryのdataメソッドが先に作られ、HTML5の仕様としてdata-*が作られた
dataメソッドの初期値としてうまく整合性が取れそうだから統合されたが、
もともと関係ないもので、data-*を属性として使うなら、attrメソッドを使う
> もし各data-*ごとに消すならaddＣｌａｓｓとさほど変わらない気がしますが
値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
5個の値があれば、最大15個の値を管理する必要が出てくる
data-*を使えば3つでいい（今は数が多くて管理が大変という話だというのを思い出そう）
グループと値として管理できるのがメリット
また値として排他であってもclassだと値の組み合わせが作れてしまう（例えば、class="black white red yellow"）
もちろんこの場合の動きとしては未定義でいいんだが、data-color="black" とかいう使い方なら
他の値が同時に設定されていることを考えなくて済む
>>206
> それもだが上に出てたライブラリで勝手に～はどうするんだろうな
ライブラリが勝手につけたものは無視すればいい。classという一つの属性を共用して
使っているわけじゃないので、自分以外のことは考えなくて良い
もちろんライブラリでもdata-*を使っていて名前がが被る可能性があるが、
それはclassの値でも一緒の話だし名前の付け方を工夫すればよい >>207
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。
値は増えるが、グループが増えることは少ない
それに加え
グループが増えたとしても、既存のコードには影響が出ない
classをつかっていると、既存のコードが参照しているclassに
自分の知らない値が入ったぞ！ということになり
それに対応するのが大変という話だが
data-*だと、既存のコードが参照してないグループ（data-*属性）が
追加されただけなので、既存のコードとは無関係となる もうちょっと具体的に話をする
classに全部ぶち込むと、スペース区切りで複数の値を入れることになる。
data-*であればそんなことをしなくて単体の値を指定できる。
っていうことは、
let resetValue = {
"data-color": "white",
"data-size": "M",
}
みたいに初期値を書けるってことだよ
これがクラスだと
let resetValue = {
"white": true,
"black": false,
"red": false,
"blue": false,
"m": true,
"l": false,
"s": false,
"ll": false,
// それ以外の知らない値はそのまま変更しない（消してはいけない）
}
としなければいけなくなるということ
そして、色やサイズのパターンが増えたらどうすんの？ということ
ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ ちなみに初期値に設定するのは
$("#id").attr(resetValue)
だけでいいで？ attrはハッシュ値を受け付けるからよ >>208
グループも何も静的1個（または2個）で済む方法がある>>140
>>142のことはスッキリしない人がいるかもしれんだろうが>>141ならそれでいいんじゃね >>141の「ええよ」は、その一つ前のレスの質問者（>>140）へのレスであって
>>142の問題があるけどどうする？に対する「ええよ」じゃないぞ？（時系列注意） というか、 ＞＞142で
> それだと静的に付けたclassまで消えちゃうじゃん
という指摘にたいして
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
って悩んだ挙句の妥協案じゃんｗ
それからもっといい案（data-*）が出てるわけでしょ
ほんと時系列注意なｗ んなこたわかってる
そもそも>>140だって元々>>142の問題を承知で書いてる
だからわざわざaaaを付け直してるんだろ だがdata-*を使ったもっといいやり方には
気づいていなかった >>208
おおまかわかりました、が
>他の値が同時に設定されていることを考えなくて済む
はclassでも同じことではないでしょうか？重複する変な付け方してなければ
.aaa {color:}
.bbb {size:}
とした場合>>210の
>としなければいけなくなる
の関連がよくわかりません >>217
classだとね、<span class="t-sharts red m">
となっている時に、例えばラジオボタンの変更に従って
Tシャツの色とサイズを変更したいって時に
addClass("blue l") だけじゃだめでしょ？
他の値（red m)が残ってしまうでしょ？という話だよ
もちろんこれはバグなんだが、そもそもこうなってしまうのは
classがスペース区切りで複数のクラスを入れるものであるというHTMLの仕様によるもの
data-*だとその縛りがないので単一の値を入れるものとこっちで勝手に仕様を決められる
<span class="t-sharts" data-color="red" data-size="m">
とあるとき、attr({"data-color": "blue", "data-size", "l"}) とするだけでいい
classでやろうとすると >>210みたいな色のリストを持たなければいけない
その他の色やサイズのリストとその初期値をすべて持って置かないといけない >>218
質問者 = 初心者 と仮定すると（この仮定は概ね正しい）
初心者がいいやり方を決められる訳がない いいやり方は上級者が決める
だがいいやり方は、簡単なやり方とは限らない
いいやり方をするには技術が必要な場合があるからだ
（スポーツとかに置き換えればわかるだろう）
いいやり方をやるための技術力が初心者にはなく
いいやり方を選択できないことも有る。
だがこれは、やり方が良いか悪いかの話ではない
初心者が決めたのは良いか悪いかではなく、
いいやり方を自分がやるかどうかを決めただけ >>140の質問を要約すると、
・動的に追加されたclassの削除再追加を一括で行いたいが、
$('.aaa').removeClass().addClass('aaa'); とするやり方は間違っていないでしょうか?
この質問に対して「あり」以外に答えはない >>222
「あり」が間違いなんて誰も言ってない
もっといいやり方があるって話だ
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 >>223
もっといいやり方がありますか？
という質問は見当たらないけどｗ (9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 ○○なことをしたいのですが、いいやり方はないでしょうか？
この質問に対して「ある」「ない」以外に答えはない その寄せられた「意見」に対して「不評な意見」が出てるんだよｗ どうして「不評な意見」が出るのか？
ズバリこれねｗ >>220
いや、218はここで他の人が言ってたことだが >>219
removeClass()が不要というのはわかるが
他の値（red m)が残っていい場合と、残ってはいけない場合と、その時々による
今回は残ってはいけないとは言ってないが残したくない様子は伺える
<span class="t-sharts" data-color="red" data-size="m" data-material="silk">
の場合結局
attr({"data-color": "blue", "data-size", "l", "data-material". "cotton"})
としないとsilkが残るので同じじゃね？
それとライブラリなど自分でコントロールできないclassも消したい場合
removeClass()のほうが楽に消せるし手っ取り早い 要は静的に付けたclassは変更しないようにしたいということだから
意図する要素にだけ id でも data でも 静的に付けて於けばどうでもいい事
classでやりたいなら個人の勝手
$(el).removeClass().addClass() は単なるメソッドチェーンなんだから否定するのはおかしい
ただの主観に過ぎない 苦しいなぁｗ 頑張ればできると言ってるだけで
やりづらいだけじゃねーか >>219
詳しくありがとう
でもdata-○○○の○○○は持つ必要があるし（たぶん）
>しなければいけなくなる
理由がいまいちピンときません
それとdata-*でtoggleClassしたい場合どうするのでしょうか？ >>234
toggleClass使いたいならclass使えば良いんじゃね？ 上の流れと別件として、読んでで気になったので
>>167の、HTML5違反をして、独自属性をつけるって話？の箇所
data-hogeでなく
HTML <tag hoge=値>
CSS [hoge] {}
jq attr('hoge', '値')
は違反ってことですか？
そのソース（原文）を知りたいです >>238
このタイミングでそういうレスをした意図がわからないが、
一応言っておくと今回の話題ににはそれが使えない
class="a foo" やclass="a bar" とあるとき、 一発で
class="a baz" にすることはできないから HTML で、使えるタグ名・属性名は、決まっているだろ
タグ名の所に、そのタグ内で使える、属性名が書いてあるはず >>241
どういうこと？
理由を書いてないから推測するしかないが
1. data-*属性は使ってはならない
→ 使ってもらうために仕様が存在する
2. CSSは属性でスタイルを適用してはいない
→ 適用していいから属性セレクタが存在する
3. data-*属性は値を入れるだけ。CSSの属性セレクタの対象としてはいけない
→ そんなことはどこにも書いてない
4. data-*属性はJavaScriptから読み書きしてはいけない
→ JavaScriptから使わないで何に使うの？CSS用途だけっていいたいの？
5. jQueryではdata-*属性ははdataから使わなければいけない
→ DOM APIのgetAttributesつかってOKなんだから同等のjQueryのattrもOK >>242
data属性（カスタム属性）を使うのはその人の勝手
classで用が足せることで本人がそうしたいならその人の勝手
何も間違ってはいないだろ？ >>242
//css
div[data-hoge="before"]{ background-color: gray; }
div[data-hoge="after"]{ background-color: orange; }
//html
<div data-hoge="before">あいうえお</div>
<input type="button" id="btn" value="cosole" />
//js
$('#btn').on('click', function () {
console.log("静的な値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に値をattr('data-hoge', 'after')に変更する");
$('div').attr("data-hoge", "after");
console.log("動的に変更した値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に変更した値をattr('data-hoge')で取得: ", $('div').attr('data-hoge'));
});
data()で参照するとキャッシュされた値を出してくるので動的に変更する場合は注意が必要
attr('data-*')で参照すれば問題はないけどね htmlはdata-*で、jqならattrだけでいいんだろ？>>208が言うには $(el).attr('style', 'color: red; background-color: black;');
なんて面倒なことやらないだろ？
$(el).css({'color': 'red', 'background-color': 'black'});
こうするだろ？
何のためにjQuery使ってんの？ってこと >>247
それ好きにすりゃいいレベルの例じゃね？
こんなんまでこっちはまちがいーこっちにしろーとか押し付けられんの？ｗ https://w3techs.com/technologies/overview/javascript_library/all
w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。
またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる
だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される >>245
> なにそのくそ仕様誰得なの？
もともとdata-*属性なんてなかった
jQueryのdataの方が先に作られた
jQueryのdataはdata-*属性を書き換えるものじゃない。
メモリの中に要素に関連づいたデータを持たせるためのもの
だからdata-*属性ではもたせられないようなオブジェクトでも持たせられる
data-*は属性はjQueryのdataの初期値としても使われるってだけの話
そしてdata-*属性は、属性なのだからattrメソッドで操作すれば良い >>247
> 何のためにjQuery使ってんの？ってこと
jQueryオブジェクトのためだよ
別にdataメソッドのためじゃない >>247
> $(el).attr('style', 'color: red; background-color: black;');
> なんて面倒なことやらないだろ？
> $(el).css({'color': 'red', 'background-color': 'black'});
> こうするだろ？
面倒くさい以前に意味が違ってる。
前者はstyle属性まるまる入れ替え。値を文字列としてそのまま使う
後者はJavaScriptからみたstyleプロパティの値。
既存のスタイルを残して、指定したものだけ置き換えるだけ
例えばこういうHTMLがあって
<span id="id" style="color: #000">red</span>
attrで取得したときは 'color: #000' が返ってくるが
cssメソッドだとcolorの値は 'rgb(0, 0, 0)' となる。
attrとcssは本来は目的によって使い分けるもの
ただstyleの場合、属性として読み書きすることが少ないってだけ >>251
大変勉強になりました。くそ仕様とか言ってごめんなさいm(_ _)m >>253
>>247はそんなことを言ってるんじゃないだろ？
$(el).css('color', 'red');
$(el).hover(
function(){ $(this).attr('style', 'color: blue;'); },
function(){ $(this).attr('style', 'color: red;');}
);
なんてやらないだろ？ってことだろ >>255
だって、それだとstyleについているかも知れない
color以外のものまで変わってしまうじゃん
そういう将来的に不具合の元になるような
ことはやらないよ。それが>>253に書いて有ることだよ >>256
attr()は単なる文字列操作
css()はハッシュ関数で値を操作できる
どちらが有利かということだろ >>257
違う
attr()はその名の通り要素の属性値を変更するもの
DOM APIで言えばsetAttribute/getAttribute相当のもの
それに対してcss()は、要素の属性値ではなくDOMのstyleプロパティの値を読み書きしている
style属性とstyleプロパティは、そのまま一対一で対応しているわけではない
例えば <span style="background: border-box">と属性で指定した時、
element.style.backgroundColor は initialとなる。属性には何も書いていないのに設定される
さらにcss()による読み込みは単純にstyleプロパティを読み込むだけじゃなく
window.getComputedStyle() を使って最終的なスタイル情報を取得している。
具体的に言うと span { color: red } 、<span style="background-color: blue">
とあった時、attrでは"background-color: blue"としかわからずcolorがredであることは分からないが、
css()ではcolorがred（正確にはChromeではrgb(255,0,0)）ということがわかる
またcss()による設定もDOM API的にはelement.style.color = 'red' のような形で実行される
それが最終的に要素の属性に反映されるのだろうがそれはブラウザがやっていることで、どういう属性になるかは不明
例えば .css({borderTop: '1px', borderBottom: '1px', borderLeft: '1px', borderRight: '1px'}) とすると
style="border-width: 1px; border-style: initial; border-color: initial;" となった（Chromeの場合）
またcss()は一部のプロパティに対してはベンダープレフィックスを自動的に追加する機能も持っている
まとめるとattr()は要素の属性をそのまま読み書きするもので、
css()は、読み込みはDOMが解釈した要素の（実際の）スタイルを読み書きし
要素の属性をそのまま読み込んだり反映したりしているわけではない
要素の属性をそのまま変えたいときはattr(), DOMのstyleプロパティとして変えたいときはcss()
使う目的が違っている >>251
>data-*属性ではもたせられないようなオブジェクト
とは例えば何でしょうか？
{'plice': '100', 'size': 'L'} のようなオブジェクトならattrメソッドで取得設定できるが関数とかかな？ >>258
ハッシュ(値) → 値
属性(名称) → 文字列
これだけのこと >>259
それ、もたせられないよ。
どの要素にも有るグローバル属性のtitleを使って
$('#id').attr('title', {'plice': '100', 'size': 'L'} );
console.log($('#id').attr('title'));
これで試してみ、 [object Object] という文字列になってしまう
JavaScriptのオブジェクトは、文字列ではないので属性値として使えないからね
（正確には強制的にtoString()が呼び出され文字列に変換してしまう） >>260
>>258で反論してることを一切無視して
話を戻そうとしても無駄ｗ
お前が言ったそれが間違っていることは>>258に書いた。
それに対して無視すること自体が
お前が間違ってることをお前自身で認めたようなもんだよｗ >>261
なんで変えてるのでしょうか
そりゃtitleには入れられないでしょうからそれならこれで
$('#id').attr({title,: 'hoge', target: '_blank'}); ようは
$(el).attr('style', 'color: red; background-color: black;');
なんてしないし
$(el).css({'color': 'red', 'background-color': 'black'});
は更に（最終的によほどでないと）しないし、style持ち出すのは話別なんじゃないの、と >>263
> $('#id').attr({title,: 'hoge', target: '_blank'});
それは、title属性にhogeという文字列を入れる
target属性に_blankという文字列を入れるという意味で
入れてるのは文字列になってる
俺は属性にオブジェクト入れられないって言ってるの
少しは頭使ったら？ それ言ったらこれもだから？だな
>入れてるのは文字列になってる
>俺は属性にオブジェクト入れられない つーか、やってみればわかるのにな
priceをpliceと書き間違えるようなやつじゃ無理かｗ
var hash = {price: 100, size: "L"};
$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}
$('#id').attr('data-value', hash );
console.log($('#id').attr('data-value')); => [object Object]
HTML属性用のattrだと文字列化されるからハッシュを入れることはできない
↓はおまけ。attrだと文字列化されるから数値を入れても文字列に変えられてしまう
$('#id').data(hash);
console.log(typeof $('#id').data('price')); => number
$('#id').attr(hash); // data-を付けずに、price属性、size属性を作ってるからHTML5的には違反
console.log(typeof $('#id').attr('price')); => string >>268
attrでは属性にオブジェクトは入れられないよ
>>269で証明済み でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
toggleClassや他のclassの削除はスルーなんかな それはJSONを使ってオブジェクトを文字列にすればって意味なので
属性にオブジェクトを入れてることにはならない
加えてJSON文字列に文字列化（シリアライズ）できないものや
情報が失われてしまうものがオブジェクトに
含まれている場合にもやっぱり対応できない
例えば関数とか日付型とかDOM要素とか。
JSONを拡張して頑張れば、少しはましになるかもしれないけど
DOM要素のシリアライズとかまず無理だろうね >>272
> でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
誤解されるような書き方をするな。わざとか？
> toggleClassや他のclassの削除はスルーなんかな
すでに回答済みだったはずだが？
もう一回書いてやると、
<span class="button color-white size-M">
みたいな書き方をしていて、colorは全12色みたいにもっと色があって
sizeにもS, M, L, LL みたいに複数サイズがあったとする
これをclassを操作して
<span class="button color-red size-l">
のように変えるのは大変。コード側に全ての色を定義して一旦全部
removeClassするか、全てのクラス値を列挙してプリフィックスで見分けるようなコードが必要になる
そういう使い方の場合、data-*属性のほうが、classを使うより良いという話
<span class="button" data-color="white" data-size="M"> を
<span class="button" data-color="red" data-size="L"> に書き換えるならば
$(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
こういう話が先にあって、その流れでdata-*やら属性やらが「classよりいい」と言ってる propっていう関数もなかったっけ？
あれはどういうときに使うべき？
使い分けの方針を教えてください。 >少しは頭使ったら？
>priceをpliceと書き間違えるようなやつじゃ無理かｗ
こういう余計なこと書かなきゃいいのに
それで嫌われてるんだろうな
あ、自分で部下に頼れると自慢してた人かな？ｗ >>261
$('#hoge').attr({'data-price': '100', 'data-size': 'L'});
alert($('#hoge').attr('data-price'));
「1つの属性に」オブジェクトを入れられないということでいいですよね
>>265
入れられないというか同時設定できるだけということでいいですよね
http://semooh.jp/jquery/api/attributes/attr/properties/ >>278
> 「1つの属性に」オブジェクトを入れられないということでいいですよね
最初からそう言ってる。属性は文字列しか受け付けられないから
オブジェクトを入れようとしても文字列化される
data()メソッドはもともと要素に紐付いたデータを保存するための仕組みで
オブジェクト等自由に入れることができる。
data()メソッドはdata-*属性と無関係・・・と言いたいところだが
data()メソッドの初期値として利用される。だけどそれだけ。
基本的にはdata()メソッドはdata-*属性を読み書きするものじゃない
> 入れられないというか同時設定できるだけということでいいですよね
複数の属性に同時設定できるという機能を、属性にオブジェクトを代入できると
勘違いしてしまったかわいそうな人がいるという話。
何も言うが属性にはオブジェクト入れられない。入れられるのは文字列だけ。
だからattr()メソッドを使って複数の属性に値を入れようとしても、
入れられるのは文字列だけ。値がオブジェクトだと当然設定することはできない。
つまり
$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
みたいに、属性の値がオブジェクトになっていれば当然入れることはできない なるほど、attrで設定できるのは文字列だけってことだな >>262
<el data-*= 'value'>
$(el).data('value')
この値の扱いの違い例えてを言ってやって上げてるのに
おまえのオツムでは理解できないみたいだね <el data-*= 'value'> ってなんだ？
まさか * がいろんな文字を意味するってことすら
分かってないのか？ ちょっとかわいそうなんで>>281に教えてあげると
$(el).data('value') で（あくまで初期値としてだが）
読み取るのはdata-value属性
data-*属性ではない。
data-valueという属性の名前になるんだよ >>279
>>259=>>278ですがどうも
それまでの他の書き込みに惑わされました
pliceは指摘ありがと（きついけど） 結論としては、attrメソッドは属性に文字列を設定するものだから
当然オブジェクト入れられない、入れようとしても文字列化されるので
実質意味がない。
それに対してdataメソッドは内部的に要素に関連したデータを
持たせる物。だから文字列以外のオブジェクトをもたせることができる
同じdataで惑わされているようだが、attr(data-*)とdata(*)は
本質的には別物 pliceといえばspliceとsliceでいつも混乱します。どうやって覚えたらいいですか？そもそもスライスは分かるけどspliceってどういう意味ですか？
APIにマイナーな英単語使うなや糞メリケンファック >>288
わかってるお前が解説しろ
本当に分かってないのはお前だろうからさ >>286
>>279の
>$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
>みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
は（私は最初から）ｏｋですが、とすると
>>208の
>例えば、class="black white red yellow"
なんてことはせず、するなら例えば
class="black m cotton"
である場合、208のグループ化にメリットありますか？ >>291
自分で調べてなかったの？
attrはHTMLの属性を読み書きするもの
propはHTMLの属性ではなくDOMのプロパティを読み書きするもの
DOMのプロパティを読み書きした結果、属性に反映されるかも知れないが
それはブラウザが勝手にやっていること
なので例えばchecked属性が空の時でも、attrで読み取るとundefiendであるが
DOMプロパティ的にはfalseなのでpropを使うとfalseになる
参照先がHTMLの属性かDOMのプロパティかの違いだよ
その点でattr()メソッドとcss()メソッドの関係と似ているね。 >>290
> なんてことはせず、するなら例えば
> class="black m cotton"
> である場合、
どういう意味？ まず日本語 >>293
>>189のような場合は別として各classがかぶらない
blackはredやgreenになり、mはlやsになり
blackはmがあろうがなかろうが何の値だろうが関係なく、mもしかり
という場合です >>294
> blackはredやgreenになり
それをclassで実現するの大変なんだわ
だって、"hoge black" とかあって、
この内blackだけをredにするわけだろ？
この時、blackとred以外にどんな色があるかは不明とする。
またhogeはhoge以外にもどんなものが来るかは不明とする
この場合に、blackをredにする方法、どういうのがある？ >>296
私ではありませんが>>153や>>140とか
でも前者はmyTagsをいじるのかえって大変ですね >>297
そういうこと。それに比べてdata-*属性を使えば
単純な一メソッド呼び出しで完結してしまう それが合理的な方法であることは分かったけど>>140には「.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく」って書いてあるから質問に対する答えになってなくね？
結局>>140に対する回答はどうなるの？ >>299
回答なら書いてあるじゃん
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと 直接的には書いてないけど、つまり>>140の質問に対する答えは「なし」ってことね。 >>298
でグループ化とは？
>>299
静的に付けたclassが消えるのはいいとしてhasClassどうすんだ？ってなかったっけ？ >>302
> でグループ化とは？
>>208に書いてあるよ
> 値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
> classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
> 5個の値があれば、最大15個の値を管理する必要が出てくる
> data-*を使えば3つでいい（今は数が多くて管理が大変という話だというのを思い出そう）
> グループと値として管理できるのがメリット >>302
> 静的に付けたclassが消えるのはいいとしてhasClassどうすんだ？ってなかったっけ？
hasClassって、この場合、blackか？redか？greenか？・・・・その他色々な色か？って
ループでぐるぐる回していま何色か調べるってこと？
そりゃ大変そうだな。 data-*属性をCSSのクラスリストのように使う方法
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
> [attr~=value]
> attr という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に value と一致する要素を表します。
↑属性セレクタとしてこれがあるからできるんじゃないかと思ってみたら、
やっぱりできるもんだなぁ。data-*属性でhasClass相当ってこれでいいでしょ？
https://jsfiddle.net/s9epbv2k/
-------- html
<ul>
<li data-test="foo bar">1</li>
<li data-test="foo bar baz">2</li>
<li data-test="foo baz bar">3</li>
<li data-test="baz foo bar">4</li>
</ul>
-------- css
[data-test~="baz"] {
color: red;
}
-------- js
$('[data-test~="baz"]').on('click', function() {
alert($(this).text())
})
$('li').on('click', function() {
alert($(this).is('[data-test~="baz"]'));
}) >>269
var hash = {price: 100, size: "L"};
$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}
ほう、price が数値型か。
ためになった 立ち返っていうとですね
data属性を使わなくてもidとclassでどうにでもなることだとなんだけどねｗ >>304
全て調べるとは限らないぞ
greenが含まれているか否か、それだけの場合もある >>305
孫以下はどうするよ？has使うか？回りくどいな >>309
今はhasClassとの違いだったよね？
まずhasClassはこう書けるというのを示してくんない？
hasClassで孫以下はどうするのよ？
それにしても $(this).is('[data-test~="baz"]') は最強だな
セレクタ使うから、$(this).is('span [data-test~="baz"]')
みたいなことまでできるのが容易に思いつく
hasClassで孫以下はどうするのよ？ セレクタよりなるべくメソッド使いたいもんだな
toggleClassはできそうだが問題は他のライブラリがつけたクラスだな
無視するかはその人次第なのでそうしろとか有り得んわ > セレクタよりなるべくメソッド使いたいもんだな
お前の好みなんかどうでもいい > 無視するかはその人次第なのでそうしろとか有り得んわ
無視するかはその人次第なので、
そうしろとか有り得んわ
なんて、お前が決めることではない そうだな、data-かclassかはお前が決めることではない 単にこの問題に対してdata-*の方が優れているという
ことを論理的に説明しただけ。
これは決まっている事実を公表しただけ
俺が決めたわけじゃない 詳細がわからない以上どっちもどっちだろ
どちらが優れていると確定できるわけがない
上で同じようなこと書いてる人がいたが各々好きにすればいいだけ >>316
話がごっちゃになってるぞ
最終的に選ぶのが聞いた人であって、
今回の話にdata-*が有利なのは単なる事実だ もともとclassでやると・・・の管理が面倒って話だからな
最初っからclassでは大変だっていう自覚はあったわけだ
それをどう解決すべきかがわからずclassで頑張ろうとしていただけで
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと data-でもそれはそれで面倒な点があるかもしれんだろうに
解決策は最初からほぼわかってた
ただ確信が持てないので聞いただけだろ
＞とするのはあり? かも知れないなら、まず最初に質問者に聞くべきだな
自分の想像で、問題あるという前提で話をするのはやめろ 仕様がこれ以上変わらないなら答えは「あり」
業務アプリ作ってんじゃねーんだぞアホらしい > 140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
$('.aaa').removeClass().addClass('aaa');
> とするのはあり?
> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん
> 143
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
この一連の流れから明らかだな。
静的に付けたclassまで消えるのが問題だと認識してる。 >>321
> 仕様がこれ以上変わらないなら答えは「あり」
何言ってんだ？
removeClassが消えるのは嫌だけど・・・が面倒だって話だろ
ならもっといい方法がないか探してるってことだよ はっきりさせておこう。
この例では、classを使うよりdata-*属性を使ったほうが良い
ここまではみんなOKだよな ということは、あとはclassを使うか、data-*を使うかは
質問者が選ぶことだ。
回答者としては、質問者へ回答を書くのみ
classを使った案とdata-*を使った優れた案がでた
この段階でclassを押し付けるのはおかしい 質問者の >>140 と >>142 から
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
ということにたいして
> $('.aaa').removeClass().addClass('aaa');
という回答は
静的に付けたclassが消えるという問題があると
質問者と回答の双方が認識しているわけだ
問題があると認識してる時点で
この質問は「なしだけどしかたないのかなぁ」という話に変わったわけだ もし静的に付けたclassが消えてもいいというのなら
>>143は「静的に付けたclassが消えても問題ないです」とい
レスになっていただろう。
だが>143は、消えちゃうんだけど（それを避けようとすると）・・・の管理が面倒になる
という話をしているわけだ。
この流れで、もっと良い案、data-*属性を使ったやり方が出るのは当然だろう >>323
>removeClassが消えるのは嫌
捏造しないように
むしろいいかもしれんぞ 捏造も何もちゃんと書いてあるじゃん
> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん
> 143
> >>142
> そうなんだけど・・・の管理が面倒で みなさんいろいろすみません>>140です
こういうの書くと成りすましに見られるから控えていたのですが
>>328
静的に付けたclassは消えても問題ないです
ただのセレクタ役だし、またつければいいだけで >>331
> ただのセレクタ役だし、またつければいいだけで
ただのセレクタ役とは？
またつければいいというのは、どうやって？ >>332
こういうのがいるから後から書きづらくなるんだよな
スレに悪影響以外何者でもない
>>334
出てるじゃん >>330
嫌と書いてないのを君が証明してどうするよｗ >>326
押し付けてるアンカよろ
どっちでもいいは幾つかあるが >>335
でてるじゃんじゃなくて、
どこにでてるのかって話だ
>>334
で、ただのセレクタ役とは？
またつければいいというのは、どうやって？ どっちを使えとか押し付けてはいないな。
ただこの場合はdata-*属性を使ったほうが
シンプルに実装できるってだけの話だ 確かにいままで出た条件の範囲では
data-*属性のほうが良いかもしれないけど
もしかしたら、明らかになってない条件の中に
data-*属性じゃだめな理由があるかもしれないだろ！
お願いだ。それを誰か書いてくれ
このままじゃ負ける なりすましするなら最後まで本人になりきって
質問に答えなきゃだめだろｗ
中途半端なことをするから余計怪しまれる >>140
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
'.aaa'というセレクタで指定していることから静的に
追加したclassを変更する意図とケースは無いと見られる
後から追加されたclassNameは必ず後に追加されるので
>>144で答えは出ていると思うけどね >>344
条件次第だけどそうだと思うけどね？
jQueryでも古いバージョンにはセレクタのプロパティーがあったんだよね
最近のバージョンではなくなっているけど
$('.aaa').selector // '.aaa'
これを活用してインスタンスメソッドを作成しておくってこともできたんだけど 何こいつ問題あるかないかにこだわってるんだろう
しかも質問者じゃない人のレスで満足して。
誰かに問題ありませんって言ってほしいだけかよｗ
承認欲求ってやつだな >>343
> '.aaa'というセレクタで指定していることから静的に
> 追加したclassを変更する意図とケースは無いと見られる
静的に追加したclassっていうのを誤解してるんじゃね？
JavaScriptで追加したものじゃなくて、HTMLに書かれた
classって意味だよ。デザインの都合で。
JavaScriptの役目としては、コードで付けたもの以外は
そのまま残しておく。だからremoveClassで全部消えちゃうのは
まずいわけ >>345
> これを活用してインスタンスメソッドを作成しておくってこともできたんだけど
こっちはまったく意味不明。何がしたいのかさっぱりわからない。 >>347
>>144だと全部消えないだろ？
あくまで静的なclassNameは'aaa'での条件
質問の条件に対してことだよ
自己解釈しているのはアンタの方だろ？ｗ
>>348
これは以前のjQueryにおいてのこと >>349
だから.aaa以外の静的に付けたものは消えるじゃん
それにそのコードだとaaaが2番目以降に来ると問題が有るし > 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、1個とは限らないしね >>349
> これは以前のjQueryにおいてのこと
だから以前のjQueryだからって何なんだって話だ
jQuery 1.9.1で実行してみたが、
このように.aaaしか取れない
それで何がしたいのか
<span class="btn aaa">span</span>
alert($('.aaa').selector); // .aaa >>350
>>140にはそんなことは書いていないだろ？ｗ
最後に.addClass('aaa')で完結している >>352
セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド >>353
>>143に書いてあるだろ
勝手に完結させんな
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>354
> セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド
だから、<span class="btn aaa">span</span>
aaaを参照して静的に書かれたbtnまで削除してしまう
使えないメソッドですねって言ってんだよｗ そもそもselectorを使うってセンス悪いわ
セレクタがIDだったらどうするんだ？
セレクタが属性セレクタだったらどうするだ？
カンマで区切られた複数のセレクタだったら、
親子セレクタ、隣接セレクタだったら？
セレクタがクラスの場合に限り、セレクタに
一致するものを除いて削除するメソッドとか
設計的に気持ち悪い。selectorなくして正解だったな >>357
お前らって本当に頭悪いよな余計なことを妄想しすぎ
>>140の回答はだな
$('.aaa').attr('class', 'aaa');
これで良いんだよ
バカ >>356
> $('.aaa').removeClass().addClass('aaa');
この結果から他にclassが存在しないだろ
バカ >>140で話終わってないだろ
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと > 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、最初につけるclassは.aaaだけとは
限らないことが判明している。
つまり本当はこう言っているわけだ
$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa ・・・');
後者のほうが数が少なくてまだマシということだが、
両方ともやりたくないのは>>143からわかるだろう
（だからこそ>>140しか見ないようにしてるのだろうが）
この２つの・・・の管理をしなくて済むのが
data-*属性を使ったやり方なわけだよ >>358
それだと.aaaにデザインの都合で新たなクラスを
追加した時に、そのクラスまで消えてしまいますよね
それを避けるにはどうしたら良いのでしょうか？
なおデザイン側で追加されるクラスはわからないものとします >>362
あくまでも>>140の質問に対して率直に回答
結果としては < (elment) class="aaa" ...> にしたいということでしかない
それは質問に対しての回答ではなく、与太話でしかない
完結でしょ？ >>361
$('.aaa').removeClass().addClass('aaa'); と $('.aaa').removeClass().addClass('aaa ・・・');
でｈは全く結果が違うし、解釈も違うことが理解できないみたいだねｗ >>363
ここは質問スレです。私の質問に答えてください >>364
> 最初つけるclassは1,2個と少ないので楽かなと
「最初つけるclassは1,2個」の意味を考えましょう
$('.aaa').removeClass().addClass('aaa');
最初につけるclassが2個だとして、これのどこにそれが書いてありますか？ >>366
$('.aaa').removeClass().addClass('aaa');
↑
これのどこに最初のclassの数云々考える必要があるの？
結果は class="aaa" しかあり得ないだろｗ
>>361がclassが複数あるとか質問に沿わない自己解釈しているから言ってるだけ
なんで必死に絡んでくるのか意味不明 $().addClass('aaa'); とかしたら
jQueryが「classNameはaaa以外にありませんか？」とか一々聞いてくるのかよｗ 「最初つけるclassは1,2個」の意味を考えましょう 質問を見れば最後は"aaa"のみで完結してるじゃん
これ以上でも以下でもないと思うが外野の勝手な連想で
ただ意味をこじ付けているだけにしか見えない
学校で先生に問題はよく読みなさいと教わらなかったのかな？ >>140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり? >>361
両方ともやりたくないとは言ってないよ
やりたいことは
$('.aaa').removeClass().addClass('aaa'); または
$('.aaa').removeClass().addClass('aaa bbb');
つまりccc ddd・・・を消したいと >>332
そういうの荒れるからやめてくれ、マジで
ここ参考になるのに もーめんどくせーから
$(function () {
$(".aaa").each(function () {
$(this).data("originalClass", $(this).attr("class"));
});
}
して、必要に応じて
$(".aaa").each(function () {
$(this).attr("class", $(this).data("originalClass"));
});
するとかｗ >>372
$('.aaa').attr('class', 'aaa'); または
$('.aaa').attr('class', 'aaa bbb');
いわゆる初期化だろｗ >>372
> やりたいことは
> $('.aaa').removeClass().addClass('aaa'); または
> $('.aaa').removeClass().addClass('aaa bbb');
>
> つまりccc ddd・・・を消したいと
$('.aaa').text('').text('aaa bbb');
こんなことやりたいの？ >>370
ほんとそう思う
自分目線でこうあるべきと勝手に進めてるのが一部 >370
> 質問を見れば最後は"aaa"のみで完結してるじゃん
あんたの言う最後は>>140のことかな？
>>143でこう言ってるのは無視してるのかな？
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと >>379
> >>370は問題を最後まで読まないやつだなｗ
その通り $('.aaa').attr('class', 'aaa');
or
$('.aaa').attr('class', 'aaa bbb');
これが理にかなってると思う >>383
ただそれだとデザインの都合で
別のクラスが追加された時に
メンテナンスが必要になるんですよね
どうにかなりませんか？ >>384
> $('.aaa').removeClass().addClass('aaa'); または
> $('.aaa').removeClass().addClass('aaa bbb');
これをやるなら>>383の方がスマートで理論的と俺は見た
理由は最終的には'aaa'(単一)か'aaa bbb'(複数)のクラス名に意図的に置き換えるから
基本に数値にしても結果がわかっているなら num = 10 で良い、無理に nam = x + y などは不要
これはどんな言語でも同じこと >>385
デザインの都合でっていう話は完全無視？
<span class="aaa"> とあって、
デザイナーが この部分フォント大きくしたいなとか思って
<span class="aaa hoge"> みたいに変更すると
JavaScriptのコードの変更まで必要になってしまうんだよ
他にもclassってことは複数のaaaがあることが想定されるが
一つは <span class="aaa hoge"> 、もう一つは <span class="aaa hage">
だったりしたら、困るだろ
HTMLはプログラマとデザイナで共有している所だから
お互いに相手に影響を与えないようにしないといけない >>386
お互いに相手に影響を与えないようにしないといけないんだったら
気軽にお互いがsourceを都合で勝手に変えるもんじゃないだろｗ
共有しているのなら連携して修正しないとね >>387
連携っていうのは、受け渡しの部分を最小限にして
お互い独立して作業ができるようにすることだぞ
何もかもがお互いに影響していたら
連携というより相手の作業を邪魔することにしかならない 影響を受けないように気をつけて作るのが仕事なんじゃないでしょうか・・ そうだね。だからデザイナーがclassに付け足しても
コードは影響がないように作るって話なんだよ
やっとそこ（自分の担当外の仕事）まで考えられる人がでてきたか >>386
インスタンスメソッドぐらい作成しろよ
静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ？
$('$.fn.extend({
restoreClass: function () {
let arr = [];
$(this).attr('class').split(' ').map(function (a, b, c) {
a.indexOf('org-') !== -1 ? arr.push(a) : void 0;
});
return $(this).attr('class', arr.join(' '));
}
});
$('.org-aaa').restoreClass(); 誤：$('$.fn.extend({
正：$.fn.extend({ >>391
> 静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ？
> それは俺が>>210で提示したやり方ですね？
そんなコードを書くのが無駄だと言ったコードを
わざわざ書くとはｗ
> としなければいけなくなるということ
> そして、色やサイズのパターンが増えたらどうすんの？ということ
>
> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
> > whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ >>393
デザインの都合でで使うクラス名の管理はデザイナーのお仕事ですｗ >>391
それから、それ気持ち悪いコードですね。
インスタンスメソッドというから何かと思えば
jQueryプラグインですか？ ならjQueryプラグインの書き方で書きましょうよｗ
なってない。手本を見せてあげましょうか？
それからほれjQueryプラグインの作り方
https://learn.jquery.com/plugins/basic-plugin-creation/ >>394
はい？ですのでデザイナーに任せてデザイナーが
何をしようとコードには影響を受けないようにすべきですね。 じゃ、自由に任意の文字列を投げるようにしたらいいんじゃないの？ｗ
$.fn.extend({
restoreClass: function (str) {
let arr = [];
$(this).attr('class').split(' ').map(function (a, b, c) {
a.indexOf(str) !== -1 ? arr.push(a) : void 0;
});
return $(this).attr('class', arr.join(' '));
}
});
$('.org-aaa').restoreClass('org-'); >>391
まず先にバグを指摘しておきますね
org-bbb が org-aaa に変わってしまいます。
<span class="org-aaa">span</span>
<span class="org-bbb">span</span>
↓
$('.org-aaa, .org-bbb').restoreClass();
↓
<span class="org-aaa">span</span>
<span class="org-aaa">span</span> >>397
俺ならこうするなぁ。まdata-*属性使いたくないんでしょｗ
もしくは最初の初期化時にdata()メソッドで初期クラスを保存するとかね
<span class="aaa" data-original-class="aaa">span</span> >>399
それそれ、人の意図だからそれで良いと思うよ
data属性はあくまで適切な属性や要素がない場合を想定したものなので
classで賄えるんだから俺はclassを使用することを推薦するよ >>398
それはね、Bugといよりそのケースには未対応ってことなんだよ
サクッとインスタンスメソッドを作っただけなのでそれは筋違い あ、はい、バグだと指摘されたら「仕様です」ですねｗ はい、まともなコードに直してあげましたよｗ
古いIEでも動くように考慮してます。
$.fn.restoreClass = function () {
return this.each(function() {
var classes = this.className.split(' ');
var className = $.grep(classes, function() {
return this.indexOf('org-') === 0;
}).join(' ');
this.className = className;
});
};
$('.org-aaa, .org-bbb').restoreClass(); ごめん、訂正w
$.fn.restoreClass = function () {
return this.each(function() {
var classes = this.className.split(' ');
var className = $.grep(classes, function(c) {
return c.indexOf('org-') === 0;
}).join(' ');
this.className = className;
});
};
$('.org-aaa, .org-bbb').restoreClass(); そして、最新のブラウザだけで動けば良いコード
$.fn.restoreClass = function () {
return this.each(function() {
let classes = $.grep(this.classList, c => c.startsWith('org-'));
this.className = classes.join(' ');
});
};
$('.org-aaa, .org-bbb').restoreClass(); 別解
$.fn.restoreClass = function () {
return this.attr('class', function() {
let classes = $.grep(this.classList, c => c.startsWith('org-'));
return classes.join(' ');
});
};
$('.org-aaa, .org-bbb').restoreClass(); >>406のように特定の条件（わかるかな？ｗ）を満たせば
extendでもできなくはないですがね。
$.fn.extend({
restoreClass: function () {
return this.attr('class', function() {
let classes = $.grep(this.classList, c => c.startsWith('org-'));
return classes.join(' ');
});
}
});
$('.org-aaa, .org-bbb').restoreClass(); >>401
> それはね、Bugといよりそのケースには未対応ってことなんだよ
jQueryのプラグインの形式として使えるくせに、
jQueryで使えるセレクタを使ったら正しく動かないのはバグだよ
それなら関数にしたほうがまだマシ data-*属性使えばシンプルに解決できる問題なのに、変な仕組みを作って
コードを書いたのは良いが、バグありで
map使ってるくせに戻り値を利用せず、条件に応じてpushかするような
コードを書くようじゃぁ、まだまだ初心者ですね。考え方もコードも ┐(´ー｀)┌ﾔﾚﾔﾚ 建設的なレスをしないのに限ってああだこうだ言うんだよね >>409
class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな
ワロタ jQuery 仮想質問に答えて罵るスレッド
この方がこのスレに合ってると思う >>411
> class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな
まあ実際見てみれば明らかだよ
>>274にも書いたけど
<span class="button" data-color="white" data-size="M"> を
<span class="button" data-color="red" data-size="L"> に書き換えるならば
$(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
という流れで、 .removeClass()を使う時点で、おかしいと感じないとダメ
・・・はどうなっとるんじゃ？と
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
聞いてみたら↑案の定こういうレスが返ってきたわけで、
使い方間違ってるなーという話さ >>408
ツッコミどころをわざと作ってやってんだよ
その方が楽しいだろ？
案の定、必死に噛み付いて来てるしｗ >>413
> $(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
コーヒー噴いたじゃないかよｗｗｗ
それってね結局はこれと一緒
$(…).css({"color": "red", "font-size": "large"})
単にプロパティーを変更しているだけなんだけどｗ
脳内で満足してるだけ >>416
いや、服の色が赤で、サイズがLって意味だけど？
MとかLとかSとかLLで気づかないかね？ >>383
動的にということだから他の部分でも～Classメソッド使ってると思われ
その流れでremove/addClassの方が自然なような >>413
それtoggleClassは？在庫有無だけとか >>420
だからclassを使うのが間違ってるわけだから
そもそもtoggleClassもいらんのだよ。
単にdata-*属性に値を入れるだけ data-zaiko=true
data-zaiko=false
とかね >>421
間違っていることはないよ
どちらを使っても良いんだよ
脳内の問題 classっていうのは種類って意味だよ。
一つの要素がそんなに複数の種類になることなんてない。
通常は種類は一種類。OOCSSなんかは複数のスタイルで
継承関係を表しているだけで種類は一種類
activeとかdisableなんてのも本来はclassの用途としては
間違っている。実際input要素とかは別の属性だしね
悪影響がないならclassを使ってもいいけど
真偽値のみに留めておくのが良い
やりにくくなったらdata-*属性を使ったほうが良い 継承関係を表しているだけで種類は一種類？
class="dog male"
class="cat female"
種と性別はどっちがどっちを継承してるの？
本来はclassの用途としては間違っているってdata-の仕様が出来るまではみんな間違ってたってこと？ > 種と性別はどっちがどっちを継承してるの？
自分で書いてるじゃん。
class=種類は「種」だよ。
性別は属性 人間ならmaleとfemaleと見ただけで、それが性別であることはわかるだろうけど、
コンピュータから見れば、わからないからね。
各順番を片方逆にしていたら、
class="dog male"
class="female cat"
片方は dog で片方は female という種なんだと
認識してもおかしくない
これがプログラミング言語であれば、
var class = "male" なんてコードは書かないだろう 性別は属性って言ったって、data-できる前<div sex="female">と書いていたのか？
class使ってたんじゃないの？本来野郎はそこ説明しろよ。 >>429
昔classしか選択肢がない状況でclass使っていたからってなんだっていうのだろうか？
昔の話をするならば、IE6は複数のクラスを指定しても最後の一つしか認識しないバグが有るし
http://css-eblog.com/ie-css-problems/box.html
IE4、NN4の時代にはクラスには一つしか指定できなかった
http://www.tohoho-web.com/lng/200002/00020242.htm
HTML3.2だとそもそもclassが存在しなかった
https://qiita.com/anchoor/items/02e4af0f630f5f9b2470
昔の仕様を持ち出してきて、昔はclass使っていなかっただろ！とか
一つしか指定してなかっただろ！とか言うことに何か意味があるのか？ >>424
class属性は種類というより部類。例えば、aaa と bbb と ccc という種類がある
'aaa ccc' or 'bbb ccc' は種類によって分けた部類となる
HTMLは論理要素は意味を持つが物理要素は外見だけなので何の意味もなく
個々の意図でしかない classify分類する
classification分類
class = ??? ここ面白いな、。次のスレタイはこれで。
質問者の質問を元に自分で勝手に変更解釈して自分で答えを書くスレ。 まだやっていたのか
静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
WeakMapを使えば良いだけ >>437
ちがうよ
質問をお題に知識をひけらかしてマウントとるスレ
だろ >>438
まだやってるのはお前だけdata-*属性を使うことに対して異論は出てない
更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから、data-*属性ならば属性セレクタで対応は可能だが
WeakMapを使った場合は実現できない <ul class="aaa"l>
<li>リスト0</li>
<li>リスト1</li>
</ul>
<ul class="bbb"l>
<li class="selected">リスト2</li>
<li>リスト3</li>
</ul>
var obj = $('aaa li, bbb li');
console.log(obj); [ 0: li, 1: li, 2: li.selected, 3: li ]
console.log(obj.filter('.selected').index()); // 0
console.log(obj.filter('.selected').prev()); // length: 0
ul.aaa li と ul.bbb li を統合したobjから .selected の一つ前の要素を
取得したいのですがやり方間違っています？ >>444ですがhtmlにゴミが入っていましたのでこれになります
<ul class="aaa">
<li>リスト0</li>
<li>リスト1</li>
</ul>
<ul class="bbb">
<li class="selected">リスト2</li>
<li>リスト3</li>
</ul> >>421
それは意味が違うし、するにしても面倒
toggleClassは（引数なしなら）今の値の逆、つまり今の値が何かは関係ない
422だとこうなる
今の値取得->逆->設定 > 今の値の逆、つまり今の値が何かは関係ない
矛盾しとるんだが？ それにtoggleClass(引数なし)は
jQuery 3.0でdeprecated
https://api.jquery.com/toggleClass/#toggleClass2
もう使うなよ？ >>439
うん、それもあるな
しかもその知識は質問者の都合無視 >>444
全然しとらんやんけ
現在値を気にする必要ない redの逆って何？青になんの？
じゃorangeだったら？？？ toggleClassは（引数なしなら）今の値（red）の逆、つまり今の値が何かは関係ない > 今の値（red）の逆、つまり今の値が何かは関係ない
何このなぞなぞ
狐につつまれたような気分だ わかってるのにくだらない突っ込み多すぎ
redの追加削除 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない
誰でもすぐ分かるのにもうマウントに必死すぎて笑えるわ それが
<span class="aaa bbb ccc ddd ・・・">
を
<span class="aaa">
にする話と何が関係有るのでしょうか？ 今の値が何かは関係ないということは
ありでもなしでいいわけですよね？
<span class="">← なしです
なしの時にtoggleClass（引数なしなら）を実行したら
なんになるのでしょうか？ >>449
赤の逆色は青じゃない、緑
マンセル色相環 >>453
そんなにマウント取られたって言うのは可愛そうじゃね？
本人はマウント取られてないつもりかもしれんじゃん
わざわざあんたいまマウント取られたんだよって教えてあげるとかｗ スマンここは間違えた
酔っ払ってたわ
引数ありなら、ね 酒のせいにして何もかも間違っていたと言っていたほうが良いよ？
何一つあってないんだから >>450
> 今の値（red）の逆、つまり今の値が何かは関係ない
>>453
> 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない
？？？？
今の値は（red）なの？
有無のこと、あるなしのことなの？？？
redと有無って同じなの？？？ 次のスレタイ＝マウント取りたくてウズウズしているスレ マウント取られて悔しいのはわかるが、
マウントを避難するんじゃなくて
↓これをtoggleClassでどうしたいのかをさっさと書けばいい
<span class="aaa bbb ccc ddd ・・・">
を
<span class="aaa">
既出の話題ならはいらんぞ
・・・の管理が面倒くさいって話だからな >>461
ただの揚げ足取りでマウントすらになってない >>440
> 更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから
勝手に妄想で「静的につけたclassが動的処理で消える問題」と無関係な条件を付けて、あなたの思う方向に結論を向けられても困る
属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか > 属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか
わからんね。具体的に説明してみな なお、静的に付けたclassが消えてしまう問題は
質問者自ら、そうなんだけど・・・って言っている
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>465
toggleClass('bbb');
toggleClass('ccc');
toggleClass('bbb ddd');
じゃね >>471
そうすると、bbbとかcccとかdddとかが増えるたびに
メンテするのが面倒くさいっていうのが本題です ちなみに
静的に付けたclassが消えてしまうことは問題でもなんでもない
承知でやってること 承知でやっているがもっといい方法ないかなーってこと。 >>472
面倒は初期だけのことでeeeが増えてその処理(toggleClass('eee')など)が増えることは当たり前で面倒でもなんでもない >>477
じゃあ、data-*属性のどこが問題かの話を何故しないのですか？
もっと優れたやり方（data-*属性）を提示したんだから
もうclassに拘る必要ないでしょ良いでしょｗ
はいはい、classわすれたー
data-*属性でいきましょうー >>476
じゃあお前はそこで議論から外れてください。 >>469
属性なんだから、いくらでもremoveClassやsetAttributeで干渉できるだろ >>478
ありかなしか、次のレスで解決してるのでけっこうです
でも参考になりましたわ よい方法だろうがなんだろうがゴリ押しdataくんが大嫌いなのでdataは絶対使いません！ >>481
静的につけたclassが動的処理で消える 482の追記
data-属性はcssからめて別では使ってます
どうもでした >>484
じゃあclassを動的処理で消している部分をなくせば問題ないってことですよね。
=class使うなってことです。 >>486
属性を使うのを止めれば良い
お前が>>440で見当違いの事を言ってたから反論しただけなんだが、自分の間違いも認められないとは >>487
面倒だから解決方法を探してる
面倒じゃない人はお前ん中では面倒じゃないんだから
お前ん中の世界にいればいいって話 >>488
classも属性ですが？
属性を使うな、何を言ってるのでしょうか。
classが動的処理で消えるというなら、
data-*属性を使ってclassに一切触らなければ
classが消えることはありません。
反論どうぞ >>490
>>438を100回読み直せ
読解力が無さ過ぎてあきれる > data-*属性を使ってclassに一切触らなければ
data-*属性も動的処理で消せるだろ
アホなのか、こいつは >>491
読み返した所で>>438が馬鹿だとしか思えませんが？
なぜかって？classが動的処理で消える問題とか言ってるから馬鹿なんですよ。
classがremoveClass()でいっぺんに消した時に全部消えてしまうって話なんだから
data-*を使えばremoveClass()を使ったとしても消えることはない
そもそもclassを使わないのだからremoveClass()自体不要
>>438が馬鹿な理由わかりますか？この話をしてるのに
JavaScriptから消す方法があるの話を勘違いしてるんですよ
バカ以外の何物でもないでしょう
何か反論は？ > data-*属性も動的処理で消せるだろ
墓穴ほってるよなーｗ
動的処理で消せること自体は問題にしてないのにｗｗｗ >>438は問題に対する解を持っている
data君は問題とは思っていないし、全く別のベクトルで問題を指摘してる
お互いに問題とは思っていないのだから、平行線なのは当然の事
だが、data君は>>438が導き出した答えの意味を理解してないだろうな >>495
じゃあ理解してるお前が説明してみせたら？
そしたら逃げるんだよなーｗ data君が気が付いてない問題は、スコープでしょ
属性は公開されているわけだし、その答えに行き着くのは理解できるけどね 誰かここでスコープが関係してくる理由説明できる？誰もできないと思う
多分こいつ、自作自演してる。書いた本人だわ
自分にしか通じないことしか言ってない 今の属性の話に変数のスコープは関係ないからねｗ
関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ 解決してるのに解決してないと言い張ってどうしてもそれを使わないと納得がいかないスレ 何とも、面倒くさい奴だな
WeakMapを使ってコードを書く場面を想定しろ
> 静的につけたclassが動的処理で消える問題
静的処理とは別に動的処理だけで参照できる場所にデータを持てばよい
WeakMapで作られた変数のスコープはグローバルスコープにしなければ、外部から干渉されない
当然、静的処理でマークアップされたclass属性やdata-*属性と衝突する事もない
属性はDOM APIによって開けた環境にあるので、いくらでも外部干渉を受ける
つまり、属性は静的処理と動的処理が衝突してしまうという事だ >>502
じゃあ属性を使わずそのWeakMapを使って
cssで色をつける方法を書いてください ちなみにdata-*属性を使った場合はこう書きます
[data-hoge="foo"] { color: red } data君がどう言い訳するのかと思ったら、「論点のすり替え」か classの代わりとして使えないんじゃ、意味ないですからね 論点は最初からclassの代わりとして使えることが条件ですが？ >>498
スコープ君は質問者ではないよ
おれもなぜスコープが出てくるのかわかりませぬ 結局、変数のスコープで合ってるじゃん
自分で気が付かなかった事実を認めたくないから話題を逸らしてるんでしょ たぶん、data-*属性と聞いて、jQueryのdata()メソッド、要素に紐付いたデータを持たせたい
という話と勘違いしちゃったんでしょうねｗ
そんな話はしてない。もともとclassを使おうとしていて、管理が面倒くさい
どうにかならないかって話で、data-*属性をつかえばいいという流れ
data-*属性はclassの代替として使用できる。そして管理が楽になる
（classは名前無しで値しか入れられないが、data-*属性は、data-名前=値という組みで入れられるから） >>509
> 結局、変数のスコープで合ってるじゃん
日本語怪しい。わざと曖昧なことを言って論点をすり替えようとしている。
変数のスコープで何があってるのか。
そして今回の話にどう絡んでくるのか言ってみ
classの代替としてWeakMapが使えないのはすでに証明済み WeakMapを使う時点で変数に格納するのは分かり切っているんだが WeakMapを使う時点ってなんのこと？
class属性の代替としてdata-*属性を使うと管理が簡単だよ
CSSでも属性セレクタで使えるし
って話の中に、いきなり無関係のWeakMapがでてきたんでしょ？
WeakMapを使う"時点" なんてものは存在してない >どうにかならないか
まあ質問者はそんなこと言ってなくて回答者が勝手に作って話進めてるだけなんだけどなｗ 言ってますがなｗ
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと 質問者はありかなしかだけ
そのだいぶ後に追記してるだけ 俺は質問者ではないよ
ただの傍観者で「WeakMapを使えばいいのに」と思ったから横から口をはさんだだけ
少なくとも、>>438の問題はCSS適用外の仕様で考えているから、>>440や>>503に対しては「何を頓珍漢な事を」ぐらいにしか思っていない
元々、静的処理とは別のスコープを持つことを意図しているわけで、CSSが適用できないのは当然の事だ
何か知らんが、俺が取り上げている問題を無視して、俺が取り上げてもいない問題を勝手に持ってきて反論してくるから、正直疲れる
読解力がないというよりも読む気が無くて、自分の考えしか頭にないタイプなのかね >>513
静的につけたclassが動的処理で消える問題 質問を自分仕様に変えて自慢げに書くスレ
質問者が言ってもいないことを言ったと言い張るスレ 質問者が問題としてないことを問題として扱うスレ
ま、これはいいか
「こういう仕様ならこういう方法もあるよ」くらいなら > ま、これはいいか
> 「こういう仕様ならこういう方法もあるよ」くらいなら
俺もそう思う
条件付き提案に「そんな条件は許さん」と食って掛かる人間が一番困る >>518
class属性の代わりにdata-*属性を使うという話をしてる
その話にWeakMapが頓珍漢な答であることは明白
だから黙ってろって話 日本語読めないのかな？
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
----------
$('.aaa').removeClass().addClass('aaa');
とすると、.aaaに静的に付けたその他のクラスが消えてしまうという指摘を
>>142でやっていて
質問者>>143のレスの冒頭、
それはそうなんだけど。と認めている。
そして・・・の管理が面倒だけど、最初つけるclassは1,2個で楽かなといってる
最初つけるclassが何個でもいいし・・・の管理も楽になる手段として
data-*属性を使う方法を提案している。
ここまではいいよな？ data君はちゃぶ台返しをするから好きになれん
「スコープって何よ？⇒説明⇒いや、そもそもWeakMapの話なんてしてないから」
他人に説明させておいてそれはないだろ
「そもそもWeakMapの話なんてしてない」が結論ならスコープの説明を求める必要がない >>525
静的classと動的挿入classの管理が面倒だから分割したいって要件に読めるけど 「静的classと動的挿入classの管理が面倒だから分割したいって」ってどういう意味ですか？
他の人、誰か理解できる人いますか？
これ自分用語で誰にも理解できない文章ですよね 静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、名前を管理するのが面倒だから処理を分割したい、という意味だろ
スコープの下りを読めば分かるだろうに >>526
> data君はちゃぶ台返しをするから好きになれん
ちゃぶ台？ 最初からスコープ関係ないだろって言ってんだろ
↓ほれみろや。俺は関係しないと最初から言ってる。
498 自分：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:29:53.34 ID:???
誰かここでスコープが関係してくる理由説明できる？誰もできないと思う
500 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねｗ
関係するというのなら説明してみろって話
そして説明を聞いて、やっぱりスコープ関係してないじゃんかという結論
最初からスコープ関係ないって話をしてる。 >>529
だからスコープ関係ないって言ってんだろうが
いい加減にしろ
「何を頓珍漢な事を」ぐらいにしか思っていないぞ >>529
> 静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、
静的に付けたclass名がaaaで、動的に付けたclass名もaaaで
衝突してしまうと言いたいんですか？
では、最後の質問です。それはどこを見てそう勘違いしたんですか？
衝突ですよね。「衝突」「被る」「重複する」「同じ名前」など
それに類する言葉が使われているレスを指ししめなさい 指し示すっていうのは、あんたが読んで勘違いしてしまったレスなんで
自分で書いたレス読んで自分が勘違いしたなんて
アホなことはいわないようにねｗ というか、>>142が問題提起したものだろ
流れ見れば、誰ても分かると思うが これですね。>>142が問題点を指摘して
質問者の>>143が「そうなんだけど」と納得した流れです。
142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて >>530
関係ないと初めから分かっているなら、スコープの質問をしなければよかったと思うよ
質問するまでもなく、分かっているんだから >>536
オマエ馬鹿なのか？
スコープの質問なんかしてないが？
500 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねｗ
関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ こうやってスコープの説明じゃないぞっていっても
スコープの質問をしたと勘違いするバカが居るんだよなぁｗ こうやって、俺が何を言ったかをいちいち書いておかないと
話を捻じ曲げてくるからな。
ずーっと捻じ曲げようとしている。
だから何度も引用するわ このスレを「スコープ」で検索すると最初に見つかるのはこれ
497 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:28:06.66 ID:???
> data君が気が付いてない問題は、スコープでしょ
> 属性は公開されているわけだし、その答えに行き着くのは理解できるけどね
それに対する最初のレスで、すでにスコープが関係ないことを示している
関係有ることを誰も説明できない。だって関係ないもの。
498 自分：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:29:53.34 ID:???
> 誰かここでスコープが関係してくる理由説明できる？誰もできないと思う
>
> 多分こいつ、自作自演してる。書いた本人だわ
> 自分にしか通じないことしか言ってない >>541
俺が飽きるまで何連投でもするよｗ
せっかくの、お・も・ち・ゃｗ ここは質問スレではありません
data君のストレス発散スレです いいえ、質問に答えているだけです。
次から次へとくるよくわからない質問に
答えているだけです。 >>535
そうなんだけどは問題点としてではなくaaaが一旦消えること
aaaにCSS（見た目）は当ててないので閲覧者に不便はない
実際ブラウザで正常に動作する（＝だからいいではないが）からいいんだよ
別に問題とは思ってないし問題にはなってない >>548
動くかどうかじゃなくてメンテナンスコストの問題
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて >>553
attr()メソッド使えばいいで終わり $('.aaa')
.removeClass().addClass('aaa').end()
.attr('class', 'aaa'); >>548って最初の質問の時点で読み取れるよな
勝手に問題、困ってると解釈して勝手に修正しようとしてたわけだ > >>548って最初の質問の時点で読み取れるよな
その次のレスで覆ったんだよ data君は自分が優秀だと思っている
こんなところにいる底辺な奴らに自分が馬鹿にされていいわけがない
そうだ、明らかに馬鹿なこいつを煽ってやろう
馬鹿なこいつは自爆するからそこを追求してやればいい
そうして、皆が自分を優秀な人間だと認めるだろう >>569
次のレスってどれのこと？
質問者： 140 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 10:57:06.54 ID:???
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
質問者への問題点の指摘： 142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん
質問者の次のレス：143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
質問者の次のレスを解説すると
1. そうなんだけど => 問題点への指摘の同意
2. ・・・の管理が面倒で => 面倒な部分
3. 変更の度にそこも付け加えなくてはならなくて => ・・・の部分が変わる
4. 最初つけるclassは1,2個と少ないので楽かなと => 個数は不明だが、少ないのでまだましだということ
これに対してdata-*属性を使った場合は、全ての問題が解決する classは論外だが何でもかんでもdata-に頼るべきではない
<custom-postit data-form=circle
のように基本的に使うものであって、
ある特定のJS内で完結する場合の要素へのデータの紐付けはWeakMapを使うべき >>570
まだ続けたいのか
>>573
ｋｗｓｋ >>574
詳しく言うとJS内で完結するというのは主にCSSと連携しないってことだよ
CSSからJS内の変数は読み書きできないから変数の値が○○の時に色を変えるとかはできない
data-ならCSSと連携できるがそれが必要ないなら場合はJSでいい
もともとは全部classに入れていたわけだけど、classをCSSと連携しない使い方をしてるなら
data-ではなくJS側に全部持ってこれるということ
今回がどっちに当てはまるのかはしらないけどね ん？元はclass使っていたってことは、CSSと連携したいってことでは？
しきりにWeakMapを連呼してるのは、オブジェクトが消えてもメモリリークが
起きないってことを言いたいのかもしれないけど、それはjQueryのdata()メソッドでもできること
（質問者がdata()メソッドの存在を知らなかった可能性はあるけど）
http://api.jquery.com/jQuery.data/
> The jQuery.data() method allows us to attach data of any type to DOM elements in a
> way that is safe from circular references and therefore from memory leaks.
> We can retrieve several distinct values for a single element one at a time, or as a set:
もともとclassを使っていた以上CSSと連携させたいと思うのが普通で
それをJS側に持ってこれるとは思わないな。 > ん？元はclass使っていたってことは、CSSと連携したいってことでは？
ただの思い込み その理屈で言えば、WeakMapでできるというのも思い込みなわけで ＄（＇．ａａａ＇）．ａｔｔｒ（＇ｃｌａｓｓ＇， ＇ａａａ＇）； >>579
最初はそれに気づかずに、CSSと連携できないって
指摘されて意見を変えたみたいねｗ 言っとくけど俺は573以降ここまでレスしてないから
それに意見を変えたって、一体どういうこと？
意見は全部573に含まれてて完結している
書いたとおり、要素とデータを結びつけるときには必ずしも要素の属性を利用しなくとも
WeakMapの方が勧められる『場合もある』と言っただけ
そしてその理由は主にセマンティクス上のもので機能の優劣を述べたつもりもない
間隔としてはグローバル変数をむやみに使うなと同じような小言
それ以上でもそれ以下でもない
大人ならすぐ他人を煽ったり話を茶化して非建設的な流れに持っていくのは辞めろ >>576
文は長いが書いてあること全然詳しくないのだが
具体的にお願いできないかな >>583
最初から意見かえたのか？
>> 438
> まだやっていたのか
> 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
> WeakMapを使えば良いだけ >>582
タグのclassを使う代わりに、JavaScriptの変数にしろっていう意見でOK？ 要するにそれを使ってスタイルを当てる、とか
カスタム要素で利用する属性である、とか
他のライブラリやモジュールから利用される、とか
第三者と共有する必要があるために、データをおおやけにする意味があるならいいが
そうでなくJSで自分自身の閉じた空間内でメモ書きがしたいだけなら
要素の属性を使うのは下品じゃないかということだろう >>585
一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
普通要素の属性を使うもんだと考え方が狭くなってないか？ということ
それと一般的抽象的に考えて、オブジェクトとデータを結びつける効果的方法である
WeakMapをもっとどんどん使っていこうよという意見 いや、class属性でやっていたものをWeakMap使えばいいっていうのが
必ずしも正しくないって話だろ。cssで使えないんだから
なんでもかんでもWeakMapで解決するような言い方をするからいかんのだ >>587
> 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
話がずれてるよ
要素とデータを結びつけたいなんて誰も言ってない
class属性のメンテナンスが面倒くさいって話をしてる >>588
自分はWMを使う方が良いケースもあると言っただけであって
なんでもかんでもWMでなんて一言も言っていない
>>589
それを言っちゃあそもそも論が出てきた最初の質問から５スレ後には既にずれてて
今や一般的な話になっている
そのクラスだって単にjQから利用するためのラベル付なのかもしれないしね >>589
要はsourceの意図
classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ
data-*="hoge" にしても結局は製作者の意図によるもの
ま、個々の勝手だが >>584
> 最初から意見かえたのか？
何言ってるかわからん
誰か別人と勘違いしてないか？ >>587
それは一理ある
>>589
>class属性のメンテナンスが面倒くさい
それってdata君の言い分だよな
少なくとも質問者はそう思ってない
もっといい方法もあるよももっともだが質問者は断ってるしな >>590
> 自分はWMを使う方が良いケースもあると言っただけであって
それをいうなら、俺だって今回のケースでは
data-*属性をつかうと良いというだけで、
すべての場合でdata-*属性を使えなんて言っていない
つまり、俺が今回の問題に対してレスしている所に横から割り込んできて、
今回の問題とは無関係な話を始めたお前がおかしい >>593
> それってdata君の言い分だよな
質問者が言ってるよ
↓ほらね
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと >>591
> classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ
その話は>>210で俺がすでにしてる
> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
> whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ >>594
自分が言いたいのはその２つのどっちが優れているかではなく、
他の有効なやり方だってあるんだし、細かな意味的なことだって重要
だからそれぞれ適材適所バランス良く使おうねということ
今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている
結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで
君に当て付ける気なんて微塵もないし、完全に被害妄想 >>596
無理やりとかｗ
どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと
あくまで主観に過ぎない >>595
横から失礼
data-*にしてremoveClass()の部分はどうすんの？
得体のしれないclass(相当)がある場合とない場合で >>599
話を再確認しようか？
今回の話はdata-*属性を使ったら楽に実装できるという話であって
今回の話にremoveClass()が必要か？という話を先に決めないといけない
答えを言うと今回の話にremoveClass()は必要ない 今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。
今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから まあ別にremoveClassなんて簡単な処理なんだけどねｗ
var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' ')); こんな感じかな
$(・・・).attr('data-class', function(attr) {
return attr.replace(/(^|\s)foo(\s|$)/g, ' ');
});
アロー関数を使えば一行
$(・・・).attr('data-class', attr =>attr.replace(/(^|\s)foo(\s|$)/g, ' '));
これ以上減らしたければjQueryプラグインを作れば良いんじゃないかな？
一応CSSには[attr~=value]というclassっぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。 折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね 全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと >>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねｗ ほらねｗ
だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。 今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。
で？ で？と言われてもな
今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの？ 599です
>>600
>今回の話にremoveClass()が必要か？という話を先に決めないといけない
ごもっとも
>>602,603
removeClass()でいいかな、わかりやすいし data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ
いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな >>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ >>615
え？ぜんぜん違う。
classはいろんな目的で使われるから、想定外のものだって入る可能性がある
特にデザインでclassを使うのはごく普通に行われる
だから消す時に想定外のものが入っている場合どうするかという話が出てくる
data-*属性だと想定外のものは入らないのでそういった問題がない
具体的にいうと
<span class="target ?? aaa bbb ccc ・・・">というものから、
.targetのクラスという条件に当てはまるものから、aaa, bbb, cccのように
アルファベット3文字のものだけを消そうとすると面倒
removeClass()を使って全部消すと、消してはいけないtargetや??まで消える。
だけど消したいものをdata-*属性に入れていれば
<span class="target ??" data-name="aaa bbb ccc ・・・">
.targetクラスという条件に当てはまるものから、data-name属性を消すだけで
targetと??に影響をあたえること無く消したいものだけを消せる >>616
逆に言うとライブラリの想定外のものが消せない >>461
> 次のスレタイ＝マウント取りたくてウズウズしているスレ
data君がマウント取りたくてウズウズしているスレ お世話になります。
【使用しているJquery：ScrollMagic】
質問内容：setpinで要素固定、reverse:falseで固定を１度のみで指示
最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか
よろしくお願いします。 >>619
今回の話に関係ない
>>620
今回の話に関係ない
>>621
それ言ってるのお前だけだぞｗ
>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外 >>624
はぁ～、本当に説明しないと分からんのか
removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ
それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが
なんでremoveAttrの引数なしが関係するんだ馬鹿か data君は、そもそもclass属性の存在自体が不要と言いたいのか？
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな
なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに >>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ？ｗ
$(name).attr('class', name); これで解決
また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない >>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか？
そんなこと言ってない。今回の話では、今回の話では、（二度ｒｙ
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話 >>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。
だから、今回の話では、今回の話では、（二度ｒｙ
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる >>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね
Mapを使うとclass属性と同じように使うことが不可能になる
class属性の代わりの案なのだから、class属性でできることが
できなくなる方法はだめ
Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる >>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
もともとclassを使っても衝突の可能性がある。
あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ
「衝突の可能性がある」は事実では有るが問題点ではない >>629
> それはただキミの想定でのお話だろ？ｗ
>>143で書いている
> 最初つけるclassは1,2個と少ないので楽かなと
最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話 >>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーｗｗｗｗ
class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよｗｗｗ
思いつきで語るな >>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上 > $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良 >>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ >636
> この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
bbb, ccc, ddd のどこが視覚的な意味合い？ >>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが？ｗ
class属性も含めて >>637
それだと.aaaの他に消してはならない.hogeが追加された時
結局ソースコードに修正が必要になります。 注意 >>637はすでに反論があって
その反論からは逃げています eachで配列を読み込み
横向きの表を作成したいのですが、
どのようなコードで描画できるでしょうか？よろしくお願いします。
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js";></script>
$(function(){
var arr = [ "行1データ", "行2データ" ];
$.each(arr, function(i, val) { $('tr').append('<td>' + val + '</td>'); //行ごとにデータが作られ駄目でした
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
行1
</td>
</tr>
<tr>
<td>
行2
</td>
</tr>
</table>
</body>
</html> 別スレにこの間書いた
値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。
（アロー関数を使えばもっと減らせる）
https://jsfiddle.net/1uopxycn/
var data = [
[{text: 1, colspan:2},{text: 3}],
[{text: 1},{text: 2},{text: 3}],
[{text: 1},{text: 2},{text: 3, style: 'color:red'}],
];
var rows = data.map(function(row) {
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
});
$('#table').append(rows); >>625
変更追加の度にnameを書き換えなくてはならないのでダメです >>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない removeClass()って何気に便利だな
値関係なくとりあえず全部消してくれる この間classで衝突したけどなぁ？
どうやれば衝突しないん？ まだdataかclassかweakmapかって話してたのかｗ >>645
初学者なのでeachでゴリゴリ回す発想しかありませんでしたが
そのような書き方が出来るのですね
参考になります
ありがとうございます アロー関数を使えばもっと減らせる
と書きつつあえて使わないのはなんなの？
そっちのほうが分かりやすいと思ってんの？ <要素 class="bbb eee fff jjj">と、
要素に値（class）を持たせ、値は動的に変化します
この要素は今どの値を持っているかはclassNameで簡単に取得できますが
classを使わずdata-*で持たせた場合はどう取得するのでしょうか？
アロー関数無しでお願いします >>656
穿った見方をすれば、これまでの話の対抗策として書いた感じがするが、
要件が違うから、"今回の場合"は classを使ったほうが良いよと
"この間の例"では、data-*属性を勧めていた俺が答えるｗ いやいや、『この間の例』は要件や目的がはっきりしてないんだから
結局何が最適かは分かりませんと言うことがFAでしょ
だからこういう場合には、とか一般的にはとか話が広がってたのに
その中で大口叩いておいて細かいことに逃げるのは感心しないな
いくら屁理屈こねようとも、周りの人へ感覚的にどう思わせたかってことが大事だからね >>659は自分の書いた内容を自分で見たほうが良い。
おまえはその書いた内容の話をしたいのかと >>659
>結局何が最適かは分かりませんと言うことがFAでしょ
>だからこういう場合には
この辺りはもっともだし、よくわかるが後半よくわからん DOM に状態を持たせるな！
DOM に状態を問い合わせるな！
React を使え！ 状態が要素の外側の見た目振る舞いに関わるものならclassで良い
例えば一度クリックされたボタンに永続効果をつけるためのクラス「clicked」とか
そして中身の内容にしか関わらないものであればdata-*が良い
商品を読み込んでDOMに書き出すスクリプトと
商品を絞り込むスクリプトが独立してあった場合
その間でやり取りするために使う商品の種類情報など
ただ特にスクリプトから要素を検索しないといけない場合はそれなりのコストがかかるので、
そういうスクリプトを統合して、状態をスクリプト中に持たせたほうがスッキリする場合もある なんか見た目を変えるものはclassを思ってるかもしれないけど
属性セレクタが作られたのは、属性で見た目を変えられるようにするためだからね
属性セレクタをには必要とされる機能が追加されている
前方一致、後方一致、そしてclassのようにスペース区切りで
単語が含まれているかどうか、等がある classは名前の通り分類分けのもの
様々な要素に共通する分類を指定する際にはclass
属性はただその要素固有の性質 限られた情報の中で答えるのはそうするしかない上にありがたいが
木だけ見て森全体がわかったように断定してたのはちょっと引くわな 属性やめてjs側に持っていくべきとか意味不明だったよなｗ いや、実際Mapは有用だと思う
>>665の真ん中の例だと
最初から商品情報がHTMLとして存在している場合は
DOMに書き加えるという機能とDOMの情報を編集するという機能に分割するほうが良さげだが
そうでない場合はDOMはただのViewと捉えてModelはJS側で持っておくほうが良さげ 誰がどう読んでもdata君のことなのに無理やりmap君とか見苦しいったら dataでも、classでもHTMLとしては意味はないが、
data属性を使う場合はdataメソッドの取り扱いには注意が必要
動的に追加、削除、変更する場合に
$(Elements).data('hoge') で値を参照するとキャッシュされるで動的変更の値は参照できない
$(Elements).attr('data-hoge') では問題はないけどね
あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明 >>676
それ以前に、dataメソッドでは
data属性を変えることはできないよ
data属性を変える必要が無いなら、dateメソッドで十分だし
書き換える必要があるなら、attrメソッドを使えと言うだけの話
> あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明
その結論はおかしい。なぜならdata属性の読み書きにはattrメソッドを使う
その場合注意する点は何もないわけで、もっというのならDOM APIを使うならば
dataメソッドがdata属性を書き換えるものではないなどという混乱はおきない
つまり、あんたのレスの最後の行はその行以前の話とは全く関係なく
取ってつけたように出てきてる。
カスタム属性を使うかの基準は動的かどうかではなくclassという名前の
属性に入れるのがふさわしいか、別の名前の属性に入れたほうが良いかの違いでしょ？
例えばariaのrole属性だって、classにaria-role-button なんて名前で入れることだって
できただろうけど、そんなことせずにrole属性を作りましょうとなったわけだ
classとは違った別の目的が有るのならclassを使わずに、カスタム属性を使いましょう
そのために汎用にいくつでも自由に属性を作って良いことになったわけなんだから jQueryにもdatasetメソッドを作れば良いのかも あ、DOM APIのDataset APIは読み取り専用だったｗ 嫌いなやつを追い出すには、徹底的に反論して論破するのと
無視するのと煽るのどれが一番効果的だろうか？ >>682
楽しいのは煽りだね どんどん無知さらして笑われてるのに本人は気付かないからな
徹底的に反論はアホには反論自体が理解できないから意味ない
追い出したいだけなら無視が一番だけど 聞いたかい？俺がdata君なわけだけど、本当に荒らしを
しているのは誰かよくわかっただろ？ >>675
WeakMapくんは俺だが自演なんかしてないよ >>674
意味分かってないな
>>685
俺は承知 何も意見を言わずに支持を表明する理由は、
ほら支持してる人がいるだろ？と見せるのが目的だって死んだじいちゃんが言ってた。
名前を隠して言うことで沢山の人に支持されてるように見せられるんだって >>687
それ煽りだけ入れる人、意見を言わずに否定だけする人も同じだよ >>687
匿名掲示板でそんなこと言ってもだから何としか
ちなみに674は明らかに言わんとしてることに対してずれてるぞ もうdata-属性は自分で勝手に定義しちゃダメとか言い出しそうな勢いだなｗ >>664
jQuery(js)はそれなりに使ってるがReactだとその件に関してどういうメリットあるの？ jQuery → DOM
React → 仮想DOM → DOM
React では、DOMを更新しない場合に、React内の仮想DOMに問い合わせるだけ。
DOMにアクセスしない
React内に、DOMのコピーを持ってる
状態を問い合わせるだけとか、DOMを更新しない場合に、
ブラウザにアクセスしないから速い >>694
それって単に変数に問い合わせたいものの
情報を持たせればいいだけだよね？ >>694
状態を問い合わせるだけとか、DOMを更新しない場合に、
レンダリングされないのでDOMにアクセスしても速いよ >>696
それだけじゃあんまり意味なくて、効率的な差分更新アルゴリズムが事実上必須。 >>698
マッチポンプって感じだよねｗ
やらなくてもいいのに仮想DOMとかいう無駄な仕組みを追加して、
仮想DOMという仕組みのせいで遅くなっちゃった、
だから遅くならないように差分更新アルゴリズムを作らなきゃ！ｗ
最初から仮想DOMなんてものがなければシンプルで
無駄のない処理を書くことができるのに。
やっぱり馬鹿対策なのかな？
馬鹿が無駄なコードを書いてもなるべく遅くならないように
する防御策が仮想DOMｗ >>699
> 馬鹿が無駄なコードを書いてもなるべく遅くならないようにする防御策が仮想DOMｗ
いやこれマジこの通りだよ。
現在のDOMがどうなってるか気にしないで書けるんだから。
天才が常にありうるすべての場合のDOMの状態を把握して狙い澄ました最小限のDOM変更コードを書けるならそっちのほうが速い。
ところがいかな大企業と言えど天才のみでチームを組めないし、ライフサイクルの最後までそいつらをそのプロジェクトに縛り付けることも出来ない。
カップ麺スゲーと言ってるところにラーメン屋のラーメンには敵わないだろｗと言ってるようなもん。 >>700
天才は現在のDOMを意識なんかしてねーよ
その時点でずれてるんだな。
天才っていうほどでもないが普通は
DOMが変化しても柔軟に対応できるように作る
idやclassや属性を使うことで、実際のDOMが
変わったとしてもコードはそのままで動くようにする
それは作業分担にもつながる。DOM（HTML）を書くのは
ほかの人に任せることができる。同様にCSSもだな
仮想DOMを使うとプログラマがHTML相当のものを書かなければいけなくなる。
自分の担当の部分に集中できる仕組みにするのが常識だと思ってる俺に
なに？天才はありとあらゆることを把握してる？ アホかｗ
前提が間違ってるんだわ。
あらゆることを把握するのが無理だから仮想DOMが必要だって思ってるようだが
こっちはあらゆることを把握しなくていいから仮想DOMは不要だって言ってるんだよ > idやclassや属性を使うことで、実際のDOMが変わったとしてもコードはそのままで動くようにする
そうなってないコード山ほどあるよね？
理由は出来ないやつ気にもしないやつがたくさんいるから。 できないやつは何を使ってもできないだろ
人間の問題は技術の話の対象外だ 程度と言うものがあるだろ。
DOM直接操作に比べて仮想dom使ってるライブラリは簡単だよ。
だって宣言的に書くだけで操作しなくていいんだもの。
diffしてパッチ作って実domに反映はライブラリがやってくれる。
だからバカにウケてる。
カップ麺が低所得者層にウケるのと同じ。 それを言うならHTMLを書くだけで
画面にレンダリングされるが？
プログラム一切不要 Reactの良さはDOMからセマンティクスやなんやかんや
とにかくレンダリングに必須でない部分を削ぎ落としたスマートな仮想DOMを提供してくれることで
もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる > もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる
俺に言わせれば、それらが、世界に多数存在するウェブサイトに
どう適用できるの？って感じだけどな
Reactは完全にオーバースペックなんだわ >>708
そもそも既存のWebサイトに適応するようなものではないということ
出発点が違うからオーバースペックとかいう話にはならない 嫁さんがちゃんとご飯作ってくれてるのにわざわざカップ麺買ってきていつ食べるか悩んでるようなもの。
でも独身には人気。そういうこと。 よく分からんけど、画面側とか作ってくれる人が別にいるのに
自分一人で画面も何もかも作っていた人にとっては
Reactは便利ってことかな？ 俺の嫁さんは２日に１回は平気でインスタントを晩飯として食わせるぞ jQueryがHTMLエスケープ用のメソッドを用意していない理由は何ですか？
あほなのでしょうか？ >>717
textってHTMLエスケープされるんですね
というか当然ですね・・
半角スペースが に置き換わらないのでしないのかと勘違いしましたが
スペースはHTMLエスケープに含まれなかったです 半角スペースとnbspは別物だからな
nbspは何の略かしってるか？ non-breaking space、自動改行しないスペースだ
半角スペース（英単語の区切り）では一行に収まらなければ改行するが
nbspだと自動改行しない。別物だ。エスケープじゃねぇ >>719
まさに望まない場所で改行されることに困って置換したのですが
「自動改行しないスペース」の意味だとは気づきませんでした
ありがとうございました blurイベントはデレゲートできませんでした
おそらくバブリングしないからだと思います
バブリングしないイベントは全てデレゲートできないと考えていいのでしょうか？ 特定のページにアクセすしたときに
<div class="contents">
...
</div>
の中だけ表示ってできますか？
特定の要素だけ非表示ってのはできるみたいなんですけど 質問です。
target属性が指定されていないaタグ を選択するにはどのように書けばよろしいでしょうか？ a:not(:target) じゃねぇの？ jQueryというよりセレクタの話 >>725
効かないようですが、記述間違ってますか？
<style>
a:not(:target){
border: solid 1px #000;
}
</style>
<a href="https://www.google.co.jp/";>targetなし</a>
<a href="https://www.google.co.jp/"; target="_blank">targetあり</a> すいません解決しました
a:not([target])
でした :targetなんていう疑似クラスあったのかと思ってしまった 一応有るけど違う意味だったな
:target
https://developer.mozilla.org/ja/docs/Web/CSS/:target
CSS の :target 疑似クラスは、 URL のフラグメントに一致する id を持つ固有の要素（対象要素）を表します。
:target Selector
https://api.jquery.com/target-selector/ 722ですけどスタイルを変更できるのはしってるんですけど
visibleをnoneにするのは簡単でもきりとるのはそれ以外の全部けさないとだし
ターゲットの親は残さないといけないしで簡単にやる方法ってないのかなと… すっかりアロー関数式を使うようになっていたのですが
jQueryはメソッドの中でthisを使うことが多いので
アロー関数式だと問題が出ます
普通の関数を書くしかないのでしょうか？ コールバックにthisで渡される変数は引数でも渡されているので
こっちを使うのがES6風なのでしょうか？ なんでもかんでもアロー関数を使うのが間違いだと思うけどね
addEventListenerでも同じ問題が有るけど
そういう風にthisが変わるようなときには使わないほうが良いと思う
誰か知らないけど（ｗ）この人も同じようなことを言ってる
https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
> 2. Callback functions with dynamic context
個人的にはアロー関数は、関数を値のように使いたいときだけにしてほしい
それは大抵一行で済むものになるので () => { return n } みたいな
{} とreturnを使う構文は無くしてほしいね オブジェクト指向的にthisを使うためにアロー関数を使うわけで、
イベントハンドラではtargetを使うのが普通だと思う 少なくともmdnだとメソッドでない関数に最適と書いてある。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
そうするとオブジェクト指向的にthisを使うため、って出自ではなさそうだが。
むしろ関数型的に使うためでは。
イベントハンドラではtargetを使うのが普通というのはそう思う。 >>738
その文書の"thisを束縛しない"の項目に、
＞これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。
って書いてあるよ そういや関数型に使うんならそもそもthis使わないし短く書けるくらいしか使用上の違いなかったな 別にアロー関数がオブジェクト指向に向いてるというわけでもそうでないわけでもない
アロー関数はメソッド自体として使うには確かに不適切
だがメソッド中で関数を定義したりすると必要になるthat=thisなんかは不要になる
適材適所 jsbinで追加出来るjQueryのバージョンに
jQuery WIP
という版があるのですが、このWIPとは何の略でしょうか？ >>744
作成中というような意味ですね
とすると、新しいほどいいだろうと思って選んでいましたが
あまり使わない方がいいのでしょうね
ありがとうございました どんどん使うべきだよ
万が一問題があってもそれを報告すればいいだけだし
自分のスキル向上にもなる
良いことしか無い removeの範囲にdataを持った要素があった場合、
そのdataも解放されるのでしょうか？ そこまで気になるようになったのなら自分でソース見て調べたほうが良い もし、そのdata が、削除されないオブジェクトから、参照されていれば、
必要だから、dataはガベージ(GC)されない
生きているオブジェクトからの、参照カウントが1以上あるから
メモリリークするかどうか、チェックすべし 参照がなければGCされるということですか？
逆に言うとdataが含まれた要素をjQuery外から削除してしまったら
メモリリークになるということでしょうか。
危険ですね？ 麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている >>752はイかれてるんじゃないかと正直思う
メモリリークなんて普段から怖がってかかるものじゃない
プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ
それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる
そのときにプロファイルをとって調べればいい
ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す Backbone.js は、DOM を削除した際に、そのDOMの子孫に、
イベントハンドラーがあっても削除されないから、メモリリークになるけど、
jQuery では、そういうイベントハンドラーも、自動的にすべて削除するから、
メモリリークにならないとか、何かで読んだ
まあ、jQueryをデバッグ実行して、確かめて下さい >>755
イベントハンドラがメモリリークするのは何故かと言うと
var element = document.getElementById('id');
element.addEventListener('click', function() {
element.style.color = 'red';
},false);
みたいなコードを書くと、内部のelement.styleのelementが
外側のelement.addEventListenerのelementを参照して循環参照状態になるから
イベントハンドラがelementを掴んじゃってるから、elementを消すだけじゃ
循環参照になってしまうからメモリリークになる
一応今のブラウザはこの問題は解決されたことになってるが。
jQueryの場合は通常以下のような感じで書くので、循環参照することはないのでメモリリークもしない
（だってそこに有るのはオブジェクトではなくただのセレクタ文字列だもの）
$('#id').on('click', function() {
$(this).color({color: 'red'});
// $('#id').color({color: 'red'});
}) replaceWithでも当然
dataやイベントリスナ―の処置はしてくれますよね？ >>757
はい。jQueryを使っている限りメモリリークはしません >>758
jQueryは神なんですね
ありがとうございました なるほど。確かにjQuery.cleanDataを呼び出しているようだな
https://github.com/jquery/jquery/blob/662083ed7bfea6bad5f9cd4060dab77c1f32aacd/src/manipulation.js#L440
replaceWith: function() {
var ignored = [];
// Make the changes, replacing each non-ignored context element with the new content
return domManip( this, arguments, function( elem ) {
var parent = this.parentNode;
if ( jQuery.inArray( this, ignored ) < 0 ) {
jQuery.cleanData( getAll( this ) );
if ( parent ) {
parent.replaceChild( elem, this );
}
}
// Force callback invocation
}, ignored );
}
jQuery.cleanData に関しては
http://blog.livedoor.jp/aki_mana/archives/6919272.html
> GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。
> ― jQuery.cleanData() メソッドは、data() API として独自に実装された
> 「各要素と紐づけられるキー・バリューストア（メモリストア）」に対する処理なので、
> innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 cleanDataなんていう裏メソッドがあったのですね
ありがとうございます >>756
callback の中で event.currentTarget で要素を取得するように書けば
循環参照にならないのでメモリリークは防げることになるよね 連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか？
それに対してreplaceWithして、その部分をごっそり入れ替えたいのです
全てがある要素の子要素なら出来ると思いますが
そういうコンテナを設置せずにやりたいです >>764
複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから
連続してようがしてまいが一塊にできる。
だけど連続してない場合に「どこと」入れ替えたいのかが区別つかない
あなたは連続していることだけを想定しているから、どこと入れ替えても同じ結果になるので
気にしていないかもしれないけど、jQueryは連続して無くても扱えるものなので
それを考慮しなければいけない
で、どうするかだけど、連続する複数の要素のうち
最初の要素を入れ替え対象とし、その後の要素は消してしまえばいい
（実際には処理する順番は逆にすることになるだろうけど）
$('li + li').remove();
$('li').replaceWith('<li>a</li>');
これが単純でわかりやすいと思うけど、頑張れば
メソッドチェーンで一行で書けるかもね >>765
なるほど～
先頭一つを残して削除するなんて思いつきませんでした
ありがとうございます あとはclass付けるとかsliceとかprevAll/nextAllとか Vanilla JSでどう実装するのか解った上で
jQueryを使いたいと思うのですが
そういう人のための総括的な解説をしている
書籍を探してます。
もし知ってたら教えて下さい。 >>768
そういう人のためがどういう人なのか分からんが
普通にjQueryの良書でよい
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
https://www.amazon.co.jp/dp/4798124281
jQueryクックブック
https://www.amazon.co.jp/dp/4873114683 >>769
ありがとうございます。
購読検討してみます。 jQueryを使って
ある要素が何番目の要素なのかを調べるにはどうすればいいですか？ あとセレクタのnth-childとかnth-of-typeが使えるかもね >>773
ありがとうございます
出来ました
要素自体が属性として持っているんじゃないかと思っていたのですが
配列の要素が配列のインデックスを持っていないように
DOMの要素も自分のインデックスを持っていないのでしょうね 変数の状態をコンポーネントに反映するみたいなことを
jQueryでスマートにやるにはどうするのが一番いいのでしょうか？
たとえば変数の状態をドロップボックスに反映させるなど。
もちろんそういう変数を作って呼び出せば出来ますが、
なんかイケてない気がします
反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです
カスタムイベントでしょうか？ 最近のフレームワークは
使ったことはないのでよくは知りませんが
変数とコンポーネントの紐付けもやってくれてる感じがします
似たようなことをjQueryでやるにはどうすればいいのでしょうか ×そういう変数を作って
○そういう関数を作って
でした 追加で質問です。変数とコンポーネントの紐付け
jQueryなどのJavaScriptライブラリやフレームワークを
使わない場合はどうやるのでしょうか？
その方法があるとして、jQueryにも応用できますか？ >>780
リテラルとは何のことでしょうか
>>781
別人ならもっと別人らしく書いてください
>>782
ありがとうございます
読んでみます >>782の記事を読んでいますが
未知のパラダイムの洪水で混乱してきました
素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・ だからそう言ってるだろ…
でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。
ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。
https://github.com/gwendall/way.js/
とかどうかね？あとrivets.jsとか… >>785
確かに単機能でシンプルな方がいいですね
見てみます
ありがとうございました 以下のような、横に伸びるtableのtdで同じ文字列が連続した場合
colspanでセルを結合するロジックを組みたいのですが
どのようにすれば実現できるか悩んでおります
<table>
<thead>
<tr>
<td>2018</td>
<td>2018</td>
<td>2019</td>
</tr>
</thead>
</table>
↓以下のように同データをcolspanとして結合するロジックが作りたいです
なおデータはソートされております。
<table>
<thead>
<tr>
<td colspan="2">2018</td>
<td>2019</td>
</tr>
</thead>
</table>
よろしくお願いします >>787
過去スレに似たような話が出たけど
なに？ コピペ？ また同じ話したいの？ $('td').each (function() {
var prev = $(this).prev();
if ( prev.text() === $(this).text() ) {
var num = prev.attr('colspan');
// 3連続以上にも対応
num = num ? parseInt(num) + 1 : 2;
$(this).attr('colspan', String(num));
prev.remove();
}
})
データがソートされてるなら、自分と直前(兄、prev)の要素が、
同じかどうか確かめればよい
兄が自分と同じなら、兄を削除して、自分にcolspanを付ける
セレクターには、id を付けて、絞り込んで下さい。
<tr> が、2行以上あると、誤動作するかも >>790
> <tr> が、2行以上あると、誤動作するかも
普通複数あるだろw 表のヘッダーだけじゃないのか？
表のデータも、1つのセルにまとめるのか？ <tr><td>A</td><td>A</td><td>B</td></tr>
<tr><td>B</td><td>C</td><td>C</td></tr>
>>790
で、<tr> が、2行以上あると誤動作するかもって言うのは、
上の例で、1行目のB と、2行目のB がつながってしまうから
これを避けるには、1行ずつ分けて、処理すべき >>790
動作を確認できました
超リスペクトです
ありがとうございます!
他の方が指摘している部分で問題が無いか確認しつつ、参考にさせて頂きます >>792
自分はtrごとにclassを付けて対応しました
あくまでヘッダで使いたかったので煩くはならなかったですが、10行超えるような行で適用すると泥臭くなりそうだとは思いました 複数行にも使うの？
複数行の場合は、
>>795
の例では、2行目のB に、colspan="2" が付くから、ダメだろ
1行ごとに一旦、処理を切らないといけない
>>789
は、難解すぎて、訳がわからない >>790
を複数行にも対応できるように、修正した
$('td').each (function() {
var prev = $(this).prev();
// そのtr の、最初のtd は、処理しない。continue
if (prev.length === 0) { return true; }
if ( prev.text() === $(this).text() ) {
var num = prev.attr('colspan');
num = num ? parseInt(num) + 1 : 2;
$(this).attr('colspan', String(num));
prev.remove();
}
}) >>799
> は、難解すぎて、訳がわからない
縦横量対応 + jQueryプラグイン化してあるからねｗ
短いのであれば、こっちにあった（少しだけ変更してみた）
コードの説明はリンク先へ
http://toro.2ch. sc/test/read.cgi/hp/1452081417/732
$('td').attr('colspan', function() {
return $(this).text() === $(this).prev().text() ? null : 1;
}).filter('[colspan]').attr('colspan', function() {
return $(this).nextUntil('[colspan]').length + 1;
}).end().remove(':not([colspan])'); そういや >>789は更に最初からcolspanがある場合にも対応していたはず 色々と参考コードをありがとうございます
799さんのコードは理解が難しかったですが、改造案件ではこういうのをワンサカ見るんだろうなと思うので理解できるよう努力したいと思います 何度も同じjQueryオブジェクトを使う時には
今でも一旦変数に代入した方がいいのでしょうか？
$document = $(document)
のように。
パフォーマンスから言えば代入した方がいいはずですが、
もう気にしなくていいような気もします マシンが高性能になっているので
マイクロ秒レベルのパフォーマンスの違いなんて気する時代ではないのでは？
という意味です というか1マイクロ秒の違いすらあるのか怪しいですよね・・ documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ 確かに引数に文字列を渡す場合はパース処理が入るので何度も実行したくはないですね
引数がDOMオブジェクトの場合は許容範囲の感じがします
場合によりけりということでしょうか
ありがとうございました みんなjqueryオブジェクトには$付き変数つかってる？
それとも気にしない派？ おれは気にしない派 >>808
> documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ
具体例あげられますか？ そこそこの規模のDOMを用意し、CSSセレクタでパフォーマンスの観点から避けるべきと言われていること(ユニバーサルセレクタとか子孫セレクタとか一般兄弟セレクタとか)をあえてすべて踏む長めのセレクタをぶっこんでトライ！
まさか計測まで人にやらせるつもりじゃねーだろうな >>813
計測はこっちでやってやるよ
お前は黙ってセレクタを書け >>814
じゃ黙ってDOM用意しな。セレクタはDOM依存だからな。 セレクタの遅さはDOM依存じゃないが？
そんなにDOM用意しろって言うなら
ほらよ。遅いセレクタ書いてみなｗ
<span>a</span> DOM依存であることを示してるように見えるのだが… >>817
オレなら >>816 のaを選択するのにたっぷり0.1秒はかかるセレクタを書くことができるッ！
しかもそいつはつい先日納品したプロジェクトで使用したばかりのやつだッ！ >>804
2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき
変数に入れずに、2回書いたら、その間にDOM に、
何か変化があるのかも、と思ってしまう
変化が無いなら、変数に入れた方が、わかりやすい $(event.currentTarget)
とかもわざわざ変数に入れるんですか？ コールバックの中でvar $this = $(this);とか稀によく見る >>821
入れてもいいってだけで基本的に変数に入れない。実行速度に問題があって
変数に入れると速度の問題が解決するって場合だけ入れる。
> $(event.currentTarget)
> とかもわざわざ変数に入れるんですか？
入れない
$(this)もそうだが、カッコの中がDOM要素の場合は、セレクタよりも遥かに
速度が早いので変数に入れても問題が有る速度を解決することにはつながらないだろう
それから変数に入れる前にチェインでつなぐことを考えたほうがよい。
チェインするのは変数に入れるのと同じ効果がある
またそもそもチェインすらいらないかもしれない
例えばこういう書き方もできる
http://api.jquery.com/jQuery/#entry-examples-1
$( "<div/>", {
"class": "test",
text: "Click me!",
click: function() {
$( this ).toggleClass( "test" );
}
})
http://api.jquery.com/css/#css-properties
.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })
http://api.jquery.com/attr/#attr-attributes
$( "#greatphoto" ).attr({alt: "Beijing Brush Seller", title: "photo by Kelly Clark"}); この使い方も重要
http://api.jquery.com/attr/#attr-attributeName-function
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});
1. title属性を取得して
2. title属性を加工して
3. title属性を再設定する
ということを変数無しでできる
引数に関数を渡すことで、変数に一旦入れる必要がなくなる。
↓つまりこんなコードを書かなくて良くなるということ
var $greatphoto = $("#greatphoto");
var title = $greatphoto.attr("title");
title = title + " - photo by Kelly Clark";
$greatphoto.attr("title", title); >>825-826
ありがとうございます
知らない方法ばかりです
関数を渡してフィルタみたいな処理ができるのは良さげです
変数をなるべく使いたくないっていうのは、
関数型っぽく書きたいっていうところから来てるんですよね >>827
名前を使いたくない ってのが一番大きい理由だと思うよ
おれ自身はチョイ関数でもバンバン定義する派だけど、使いたくない理由もわかる >>820
804ではないが参考になった
以前速度差ないとのことで変数に入れずにいたが
そういうことならわかりやすくていいですね 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820が変数に入れるべきと言った途端
> 2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき
↓これだよｗ
> 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820
> 変数に入れずに、2回書いたら、その間にDOM に、
> 何か変化があるのかも、と思ってしまう
>
> 変化が無いなら、変数に入れた方が、わかりやすい
どういうこと？
変数に入れた所で、変化するでしょ？
$id = $('#id')
$id.text(123);
$id.text(); // 変数に入れたのに123に変わってる
jQueryにDOM要素の状態をさせるメソッドは
たくさんあるけど、どれも変数に入れても変化するものばかり
唯一の例外はremoveしても（DOMの状態は変化しているが）
jQueryオブジェクトには参照が残ってるってことぐらい
それだけなのに"変化がないなら変数に入れたほうがわかりやすい"は大げさ 変数に入れてもDOMは変化してる
変数に入れていれば、その間になにも変化がないように言い方は
誤解のもとでしかないのでやめたほうが良い
$ul = $('ul')
console.log($ul.children().length) // 5
$ul.children().remove();
console.log($ul.children().length) // 0
--------
$ul = $('ul')
console.log($ul.children().length) // 5
$ul.append('<li>')
console.log($ul.children().length) // 6
--------
$ul = $('ul')
console.log($ul.parent().attr('id')); // undefined
$('#id').append($ul)
console.log($ul.parent().attr('id')); // id いや、再代入してないよｗ
----はただの区切り
別々の話ね。 >同じjQueryオブジェクトを使う時には
とあるのに何入れ替えてるんだよｗ 変数に入れても、
・DOM要素の内容は変わる
・DOMの構造も変わる
・DOM要素の参照は残ってる
って所かな？
jQueryとか関係なく
var elm = document.getElementById('id'),
って書いてるのと同じ。
ID=idをdocumentのDOMツリーからremove()しても、
elmという参照は残ったまま
逆に言えば、参照は残ったままだけど、
DOM要素への変更は反映される。jQueryでも同じ >>838
めんどくせーな。
これでお前でも理解できるだろ？
変数に入れてもDOMは変化するんだって
例1
function exp1() {
var $ul = $('ul')
console.log($ul.children().length) // 5
$ul.children().remove();
console.log($ul.children().length) // 0
}
例2
function exp2() {
var $ul = $('ul')
console.log($ul.children().length) // 5
$ul.append('<li>')
console.log($ul.children().length) // 6
}
例3
function exp3() {
var $ul = $('ul')
console.log($ul.parent().attr('id')); // undefined
$('#id').append($ul)
console.log($ul.parent().attr('id')); // id
} 変数に入れておけば、異なる参照を指すことはない。
このリストが、別のリストに変わったりしない
変化する場合でも、その要素・コンテキスト以下・子孫要素しか変わらない
祖先の要素が変わって、別の要素を指すようになったりしないから、
意図がわかりやすい >>841
よく考えてほしいんだけどさ、
一行目、私は○○にデータを書き換えます。
二行目、○○にデータが書き換わった状態であってほしい
これの方が直感的だよね？ >>840
そんなことは書かれる前からわかっとるわ、基本だろ
そういうことでなくて質問と>>838はDOMを変化させない前提だろうよ
パフォーマンス云々言ってるのだし だから変数に入れてもDOMは変化しますよって言ってるんだが？
変数に入れることで、どういう勘違いを
あなたはしてるのですか？っていう話 順を追って説明しないと理解できてなさそう
1. DOMを変化させない前提
2. 変数に入れないと、DOMが変化するように見える
3. 変数に入れると、DOMは変化しないように見える
4. でも変数に入れても実際はDOMは変化する
5. つまり3は勘違い。変数に入れてるのをみてDOMが変化しないように見えたら、それは目が悪い。 久しぶりに除いたが「変数使わないべき、それ以外認めん」の人がまた勘違いで話捻じ曲げて強引に押し通そうとしてるのか その話は知らんけど、>>845に何か物申すこと有る？ × 変数に入れずに、2回書いたら、その間にDOM に何か変化があるのかも、と思ってしまう
○ 変数に入れても、2回書いた時、その間にDOMに何か変化があることがある。
× 変数に入れるとDOMは変化しない
○ 変数に入れるとDOMを変化させてもDOM要素への参照は残っている
なんで正しい説明ができないんだろう？ >>844
問題文をもう一度読もうか
先ずはそこからだ そして、これを踏まえて説明すると、
jQueryではメソッドチェーンでつなぐことで
変数に入れなくても、変数に入れたのと同じ状態を作ることができる。 >>850
問題文ってこれ？
> 804 名前：Name_Not_Found[sage] 投稿日：2018/04/09(月) 12:47:31.90 ID:???
> 何度も同じjQueryオブジェクトを使う時には
> 今でも一旦変数に代入した方がいいのでしょうか？
> $document = $(document)
> のように。
> パフォーマンスから言えば代入した方がいいはずですが、
> もう気にしなくていいような気もします
じゃああんたはその次のレスを読もうか？
そのレスが間違ってるって話をしてるんだから 変数に入れたらDOMに変化がないと思うだろ！
いや、思わんね（笑）
これだけの話 ちなみの最初の話をすると
$document = $(document)
変数に代入しなくても、document変数に参照が残ってる。
$element = $(this)
変数に代入しなくても、this変数に参照が残ってる
element = document.getElementById('id')
$element = $(element)
変数に代入しなくても、element変数に参照が残ってる
わけで、毎回 $(documet)、$(this)、$(element) を実行しても
（DOMではなく参照が）変わらないことは保証される 一般的にイベントのデレゲーションは負荷軽減に繋がると言われていますが
$(document).on('click','.hoge a',fn)
のようにセレクタで指定している場合、
クリックのたびにイベントが起きた要素がセレクタと一致するかを調べるので
結構負荷が高くなるのではないかと思いました
$('.hoge a').on('click',fn)
のように要素に直接リスナを登録した場合、セレクタの解釈はリスナの登録時だけなので、負荷は小さくなるのでは？
ただデレゲーションの場合、リスナ登録時に存在しないDOMのイベントも捕捉できるという意味もあるので
簡単に置き換えることはできませんが 表に、100セルがある場合、
各セルに、イベントハンドラーを付けると、100個になる
これらの処理が似ている場合には、
表に、1つのイベントハンドラーだけを付けて、
各セルの座標値を、計算した方がよい >>855
負荷とひとまとめにしてるけど、
典型的な速度を取るかメモリを取るか問題やね
デレゲーションを使うと、
1. イベントハンドラの設定が1回ですむ（速い）
2. イベントハンドラが一つで済む（メモリ少ない）
3. イベント発生ごとに発生した要素のチェックが必要（遅い）
4. 要素を増やしてもイベントハンドラの設定は不要（速い）
要素ごとにイベントハンドラをつけると
1. イベントハンドラの設定が要素の数だけ必要（遅い）
2. イベントハンドラが複数必要（メモリ多い）
3. イベント発生しても発生した要素のチェックが不要（速い）
4. 要素を増やす時イベントハンドラの設定が必要（遅い）
イベントハンドラの分メモリが必要と言っても関数の中身自体は共通化できるので
イベントハンドラを持っていますよーという情報のメモリ
またセレクタに一致しているかどうかは、比較的最近のブラウザなら
Element.matchesメソッドがDOM APIに追加されてるのでさほど遅くないはず
で結局の所トレードオフ問題でどちらが良いかはやってみないとわからないし
環境によって変わるし、DOMの構造によっても変わるだろうし、
俺なら気にせずデレゲーション使うだろうな >>826
の、上の程度ならもちろん変数使わないが
実際複雑になったり長くなったりすると下に近くするな
好みだが深くするのが嫌なので >>857
コードまで書いて一生懸命答えてても元文読み違えてたら全て無駄
の典型的パターンだよな >>859
同じく。↓とか
$('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら); $('#hoge')
.children('li').eq(計算)
.children('span').text(なんたら).attr('hage', かんたら);
って書けば良い
改行できない病かなにかか？ >>864
むしろ流れ的にどうやったら改行の問題と読んだのかそのプロセスが知りたい
学生のテスト対策のヒントになるかもｗ いや改行の問題なんて言ってないだろｗ
改行を入れることで、読みやすくできるという話だよ
変数に入れればいいって言ってるやつだって
メソッド実行のたびに変数にだって入れないだろ？
「わかりやすい単位で変数に入れる」というはずだ。
だからそのわかりやすい単位で改行をいれればいいだけ >>859
ライブラリなどのサンプル見るとほとんどvarにセットしてる >>867
もういいよ、無理すんなって
益々墓穴掘ってる $('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら);
を変数に入れるってどうするつもりだったんだろうか？
var $li = $('#hoge').children('li')
var $span = $li.eq(計算).children('span')
$span.text(なんたら).attr('hage', かんたら);
こうか？
$('#hoge').children('li')
.eq(計算).children('span')
.text(なんたら).attr('hage', かんたら);
ならこれで良い気がするな。
変数に入れるバージョンから、変数を取り除いただけ
それよりも>>863の方がわかりやすい気がするのは
行の最初に対象とするターゲットが来てるからかな eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
これは、jQuery のeq のソースコードだが、
これぐらい少なくても、this.length を2回使わない
同じものなら、変数に入れる。
その方が保守しやすく、最適化しやすく、少し速いかも ここは相変わらず、jQuery君が他人に噛みつき、荒らし回ってるんだな >>875
スレタイのどこに「他人に噛みつき、荒らし回る」と書いてある？ >>873
>>826の話とずれてる。
>>826は処理対象を変数に入れるって話
設定値を変数に入れるって話じゃない そもそも>>804 >>820に対して（それを無視して）値を入れ替えてることがズレてる
誤解のもとという忠告もわかる
速度に関してはどっちでも変わらんから好みでやればいいだけ
>>859の変数使う好みに対して改行で解決しようとしてることがずれてる
これも好みでやればいいだけ blurメソッドを呼ぶと、
その要素に実際にフォーカスがあるかどうかに関わらずfocusoutが発生すると気づきました
これおかしくないですか？フォーカスがないんですから。
結果、二度focusoutが発生してしまい、変な嵌まり方をしてしまいました 「blurする前にはfocusする」と覚えていればいいですね？ あとキーボード系イベントをtriggerする時も、
条件を手動操作と同じにするためにfocusした方がいいと思います
そうですね？ if (!$('セレクタ').children().length) {
$('セレクタ').remove();
}
みたいな処理をもっとスマートに書けないでしょうか？
メソッドチェーンで繋いだ一文で書けたらいいと思うのですが >>888
> if (!$('セレクタ').children().length) {
典型的な手続き型的なコードだねｗ
通常は「lengthみて要素があるかどうかを確認する」というコードはまるまる省ける。
状況にもよるだろうけど、俺はこれが必要な場合を思いつかない
で、回答だけど、まずCSSを使って、セレクタ:empty { display: none; } じゃいかんの？
わざわざremoveしなくても、画面上見えなくていいのであればコレでいける
ただしセレクタの中にはスペースなども含めて完全に空になってないといけないけど
次に実際に消す方法として、:has疑似クラスを使ったもの
$('セレクタ:not(:has(*))').remove();
:has擬似クラスはCSS4相当のものでブラウザネイティブでは実装されていないが、
jQueryは独自で実装しているので使える。IE11でも動いた。
https://api.jquery.com/has-selector/
こっちは完全に空じゃなくてもいいけど、タグなしで直接テキストが書かれていても
消えてしまう。といってもそれは>>888も同じだから問題ないだろう
あとはjQueryの.not や .has メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな >>889
ありがとうございます
フィルタで絞り込むという発想がなかったので、学びが大きかったです
:hasとか:notとかはじめて使いました
ありがとうございました hasフィルタ/メソッドの対象は子要素ではなく子孫要素なんですね
子要素と書いているサイトが大量にありますが・・
対象を子要素に限りたい場合はどう書くのがいいのでしょうか？ >>891
え？
子要素がない時はremoveする
ただし子要素が無くて子孫要素がある場合はremoveしたくない
ってこと？
子供がいないなら孫もいないでしょ？ >>892
いえ、それはもう解決したので
別の話としてです >>893
試してみましたが子孫も含まれるようです >>896
すみません
書こうと思って見直していたら、
要素セレクタ部分が深い階層の要素にマッチしていたための勘違いと分かりました
要素セレクタ部分を第一階層にしかマッチしないようにしたら、たしかに子要素だけに限定出来ました！
ありがとうございます
ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？
jQueryを結構長く使ってきたつもりですが、こういう書き方を今まで見たことがありません > ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？
CSSの基本だから調べて
:hasはjQueryによって先行してサポートされた疑似セレクタだが
文法自体はjQueryが決めたものじゃないし
基本的なものはCSSのセレクタとまったく同じ CSSの親子関係の>と同じなのですね
>.hoge
は
*>.hoge
つまり
「何らかの要素の子要素の.hoge」
という意味になって、
これをhasと組み合わせることで子要素だけが選択できているのですね
親子セレクタの>は知っていましたが
特定数の階層を示す未知の記法なのかと思って混乱してしまいました
ありがとうございました 高速で安全なjQueryを書くために今できること
http://dresscording.com/blog/jquery_performance.html
$('#myContainer a');
と書くより
$('#myContainer').find('a');
と書く方が速いとあります
2013年の記事ですが、今でもそうした方がいいですか？ >>901
やってみなければわからない。
ほらよ「jquery selector vs find https://jsperf.com 」で検索して
探してきてやったぜ。
https://jsperf.com/jquery-children-vs-find/37
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな
理想的な結果だ。ブラウザによって違う。そんなの気にしたってしょうがない。
実用上問題ないなら気にすんな
どうでもいいが、EdgeだとChrome 58.0.3029と判定されるのな
Microsoft Edgeのユーザーエージェントがカオスなので注意
https://qiita.com/tonkotsuboy_com/items/7b36bdfc3a9a0970d23b
> Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 11)
> AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 あー、よくみりゃこれjQueryのバージョン低いな jsperf、githubアカウントが必要になったから面倒なんだよな
でもまあ1系でもquerySelectorAll使われてるし結果に大差はないだろ >>902
気にすることでもないのですね
ありがとうございました えー、何今みんなセレクタ使ってるんか？
速度差気にするほどでないのはもっともだが統一性からもメソッド使ってるわ $('#myContainer a');
じゃなくて
$('#myContainer').find('a');
こう書くってことだろ？
でも、 '#myContainer' も 'a' もセレクタなんだよねｗ
統一性をもたせるならむしろセレクタにしたほうが良い >>908
最初のセレクタは減らしてその後絞った方がいい
で統一ってことだろ
以前から書籍やブログで書かれている でも
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな 以前から書籍やブログで書かれているからって
あてにならないですねーｗ 全部JSで書かれているならセレクタのパースの方が遅くなるはずですが
querySelectorはネイティブコードなので速くなってるのでしょうね >>910
それは 高速化のため？ 可読性のため？
場合によるけど、ほとんどの場合セレクタに書いた方が
可読性が高まって良いと思うよ
場合によるけど、時代や環境・実装によって変わる高速化より
可読性を優先した方が良いと思うよ 速度でメソッド使ってるわ
もっとも3になってからは速度面では知らん
可読性ではどっちも変わらん
:has/has()、:first/first()、:eq/eq()など、またチェーンメソッドではどうなんだろ >>915
jQueryは1でも後半のはquerySelectorAllとか使ってる。
そもそも1と2は、1の方が対応している（古い）ブラウザが多いという
違いなので2でやってることは全て実装されていると考えるべき
3は統合版なので言うまでも無くだな 1系はIE6以降対応で、2系はIE6～8を切り捨てたもの。
（当時の）最新ブラウザには1系も2系も対応していた。
だから2系の方がファイルサイズは小さいが、
対応ブラウザは1系の方が多い状況だった
1系と2系は機能的には一緒でともに機能追加・メンテナンスも続いた。
通常であれば1系は古いバージョンで新機能は2系のみというのが
一般的なバージョンの分け方なのに、jQueryはそうなっておらず
混乱をもたらすということで、3系として合流することになった。
この時、通常のjQuery 3.0とは別に古いブラウザ対応のjQuery compat 3.0
というのが作られる予定だったが、IE8のサポート終了が早まったために
IE9以降対応のjQuery 3.0はに一本化された code.jquery.comの証明書が死んで、そこらじゅうのサイトが余波で崩壊してるね
とりあえずセキュリティ例外にぶっこめば動くには動くが・・・セキュリティ面でもサイト利用者にそれを求めるのかって点でもマズイな 最近書き始めた者です。
jQuery用の入力候補とかインテリセンスを使っている人いますか？ VSCodeを使っていますが、jQueryのメソッドも補完されますね
標準機能によるものなのか拡張機能によるものなのかは分かりませんが >>919
そんな基本的なこと長文書かなくてもわかってるから大丈夫
なぜ１と２の違いという全然関係ない話題に持って行こうとしてるのかということ >>925
それはそれとして、じゃあなんで1と2になってるんだ？ jQuery公式のCDNの証明書切れは
NHKで放送されるレベルだぞ >>930
なに言ってるんじゃなかくて、
なんで1と2になってるんだ？って
聞いてるんだが？ さすがニュースは違うな。jQueryのCDNでトラブルがあった時、
jQuery使うなとかCDNを使うなという話ではなく
HTML標準ににフォールバック機能がないことが問題という話になってる サーバーが落ちるなんてことは普通に想定しておかなければ駄目なのでは？
CDNを使う限りあり得る問題なのでjQueryガーとか言ってる連中はアホですね？ サーバが落ちることを想定してるからCDN使うんだが >>935
CDNとjQueryが何の関係があるの？
自分のサーバーで配信すればいいだけでしょ？
HTML標準にないだけで、CDNが落ちたら自分のサーバーに
置いたjQueryを使うという手法も有るしさ まずjQuery公式チュートリアルからcdn からロードしてる記述駆逐しようぜ！
個人の技術ブログとかのコードにもcdnからロードしてる箇所あったら取り締まって吊し上げよう。
cdn使うことで速度ガーとかキャッシュガーとか書いてる無責任サイトも潰そう。 > 潰そう。
無理じゃね？ どうせお前本気じゃないし
できやしないことを語っても、虚しいだけだよ CDNが落ちてる時にjQueryを自サイトから読む
という処理をするにはどうしたらいいですか？ 一番簡単な実装は
<script src="cdn/jquery.js"></script>
<script>if(!jQuery) document.write('<script src="自サイト/jquery.js"></script>')</script> ありがとうございます
ということはスクリプトファイルの読み込みが終わるまで次のコードを実行しないようになっている
ってことですね
いや、そりゃそうか・・
ありがとうございました "</script>" はHTMLの終了タグと間違われるから
"</sc" + "ript>" みたいにしないとだめだけどな 2から3への違いならまだしも1を比較に出す意味がわからんよな
そもそも元の論点そこじゃないし そんな事どうでもいいんだよ
なんで1と2になってるんだ？
なんでコレに答えられないの？ >>918は>>917に対して←これはわかる
>>926は>>925に対して
>>918と>>926は別人
ここまでは確か
同じ質問をしていることが意味不明だし、逆に聞かれて答えてないし
ただの荒らし行為にしか見えん >>910,911
ブラウザはここ１，２年でCSSエンジン周りにも力入れてて
セレクタもキャッシュが効くようにもなってきてるから
間接的にjQueryからquerySelectorを呼ぶセレクタなら
一纏めにしたほうが良いと思う .delay(10000).fadeOut('slow')
のように10秒後にフェードアウトする処理があって
フェードアウトする前に再び呼び出された時には前回のフェードアウト予約をキャンセルしたい場合は
どうすればいいのでしょうか？ http://jsbin.com/mememujalo/edit?html,css,js,output
stopでdelayもキャンセルできるとネットには書いてあるのですが
15秒後にフェードアウトするようにして
10秒くらいの段階で「表示」をクリックして再び実行すると
5秒後にフェードアウトを開始します
つまりキャンセル出来ていないようです
どこが間違っているのでしょうか jqueryで、
ある要素をhideした時にイベントを発火するようにする
みたいなことできますか？ 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
7MVQ5 https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box
showはdisplayをblockにするはずだから
要素がflexboxの時はどうするのだろう？と思ってググったらこのページが出てきました
$('#myFlexbox').show().css('display', 'flex');
とありますが、show()を入れる意味は何でしょうか？ …それそのスタックオーバーフローのコメント欄で聞けばよくね？ don't need the .show()
と言われてもノーコメントのところを見ると答えてくれるとは思えませんが？ >>957
考え方がそもそも間違っている。
cssを直接変更するのは最後の手段
基本的にclass（もしくはその他の属性）を書き換えるようにする
例えば $('#myFlexbox').addClass('active') みたいにして
CSSで、#myFlexbox.active { display: flexbox } のようにする
JavaScriptでやるのはclass等の書き換え。見た目はCSSで記述する 任意数のDOM要素が入った配列があります
その要素を500msの間隔を置いて一つ一つコンテナ要素に追加していきたいのですが
どう書けばいいでしょうか？ >>960
ああ、なるほど・・
その方が綺麗ですね
ありがとうございました なお、showの仕様は昔から変わっているはず
また、flexboxは比較的新しい機能だから
使えないブラウザがある（あった）
そのコードのshowは、昔の仕様の
display:blockにする"以外"の処理に依存している部分が
あったからかもしれないし、display:flexに対応していないブラウザでは
display:blockを使うことでほぼ同じ動きになっていたのかもしれない 使えないブラウザがあるとか言うのはいい加減もう良いよ
そもそもそんな貧相なブラウザを使い続けてる人がリッチな表示に期待してるはずがない
むしろ、そういう環境は往々にしてスペックが貧弱だから素朴で最低限な表示の方がありがたいんだよ
だからそういう環境はJS無効組とかとまとめて、切り離して扱うくらいがちょうどいいんだよ
同じ表示、体験に拘る必要は無い
そうすればリッチ組に割く労力も減るし、読み込ませるリソース量も最低限で済む >>964
いきなり何脈絡のない話してんの？
誰に何を言ってるのかさっぱりわからないんだが flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
無駄なのよ
もうね、寝たきりのおじいちゃんをGWだからとどうにかして海に連れて行くことを考えるのは辞めろということ
爺はベッドに寝かせたまま海の動画を見せとくくらいで良いんだよ
flexbox使おうかなと思ったんなら堂々とそのまま使えばいい
無駄なことを考えるのは辞めろ なんだ馬鹿か
話の流れも見ないで、使えないブラウザがあるって
言葉をみて、トチ狂って書き込んだだけのアホだな >>964
リッチというほどでもないしJS切捨ては飛躍しすぎだろ >>963
http://jsbin.com/zineqikupe/edit?html,css,js,output
flexboxをhideしてからshowしてみたら、
問題なく表示されました
表示時にblockを設定していたのは昔の話だったのですね
ありがとうございました 下腹部をhideしてから女子高生の前でshowしてみたら、
問題ありで逮捕されました
変なおじさんで笑って済ませられたのは昔の話だったのですね
ありがとうございました Bootstrap Multiselectを使用しているのですが、
すれ違いですかね。
プルダウンメニューが開かれたままで最初は開閉ができないのがどうにかならないのかと思いまして。 >>949
その根拠（ソース）は？
全てのブラウザにもそれが通用する？特にOpera miniなどドロ用など >>972
利用者が少ないブラウザなんて切り捨てて良いんじゃないですかねー
>>966も無駄だって言ってますしー
> flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
> 結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
> 無駄なのよ > 利用者が少ないブラウザ
PCを使えない池沼
こんなの切り捨てで十分、増してWebブラウザなんて無料なんだしｗ 答えになってないな
PCが使えないではなくて自分含め両方使い分ける人がいる ドロ用が利用者が少ないとはどんな感覚してんだ
モバイル系切るなんて有り得んわ
持ってるサイトの1つは７～8割それらからのアクセス
しかも今回の件は切り捨てる理由がない
書き方が違うだけで、速度や保守面など大きなデメリットはないのだからな え？Android用の使われてないブラウザでしょ？
Opera miniなんて。切り捨てましょうそんなゴミ Android用の使われてるブラウザならどうなんだって話 古いドロブラウザ使ってる環境こそ
JSやスタイルなんてほとんど適応しない質素なテキストページを案内すべきだと思うけどな 「話の飛躍は逃げの一手なのかな」
これこそが他者との相互理解を放棄した無価値なレス IE6がPC用の使われてるブラウザならどうなんだって話 >>982
「話の飛躍」も相互理解を放棄している気がせんでもない
お互い様 >>976は正論
結局>>>949は根拠のない妄想だったのかな 正論じゃないだろ。
Opera Miniはアンドロイド用の使われてないブラウザだ
使われてないブラウザは切り捨てるべきだよ
そうすることでブラウザの開発のやる気を無くさせる
開発が停止する。使ってる人もいなくなる。 >>969の件ですが
chromeのデベロッパーツールを見ながら操作していて気づいたのですが
やはりshowはHTMLのstyle属性に'display:blockを設定しているようです
style属性でblockを上書きしてるのに何故ちゃんとflexboxになっているのか・・？
謎ですね？ つまらなくても現実は受け入れないといけない
Opera Miniは使われていない 使われていなくはないだろ
それにMiniではない方はどうなんだ
使われている、切らない、キャッシュが効くというブラウザは
どれとどれなのか具体的に挙げてみてくれ >>986
お前の考えなんて誰も聞いてない
せめて>>972に答えてからにしてくれ > 使われていなくはないだろ
> それにMiniではない方はどうなんだ
使われていない >>992
Miniではない方はキャッシュはどうなんだ？
どのブラウザなら効くのだ？
逃げるなよ >993
だからそんなブラウザのことを考える必要はないんだって
切り捨てるんだから >>994
日本語理解できない人だったのか、ごめんな、追い詰めて 別に使われてなくてもサポートしてもいいんじゃない
それこそこれからは冷蔵庫からアクセスされるかもしれないんだからさ
スマートアシスタントみたいなBotが情報を得るためにアクセスしてきたり
操作もするようには絶対になる話だからさ
ありとあらゆることを想定しておくべきとは言わないけれど、
反対に狭い範囲だけを想定しすぎて可能性を潰すのはだめじゃよ >>994
切り捨てるか否かは制作次第
お前の判断なんてどうでもいい このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 194日 10時間 49分 11秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
