元スレjQuery ライブラリ総合質問所 vol.4

JavaScript覧 / PC版 /

みんなの評価 :

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

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

552 = :

>>550
すみません、どういうことでしょうか？

554 = :

html
<div id="box"><img id="a01" class="c01"> <img id="a02" class="c01"></div>

css
#a01.c01{top:Ypx;left:Xpx;}/*IDがa01かつclassがc01*/
#a02.c01{top:Ypx;left:Xpx;}/*IDがa02かつclassがc01*/
#a01.c02{top:Ypx;left:Xpx;}/*IDがa01かつclassがc02*/
#a02.c02{top:Ypx;left:Xpx;}/*IDがa02かつclassがc02*/

でボタンをクリックした時にクラス名を渡して
cl = クラス名;
$('#box img').each(function(){
$(this).removeClass(function(index, className) { return (className.match(/\ba\S+/g) || []).join(' '); });
$(this).addClass(cl);
});
ここまで書いて囲んでるボックスのclassかID書き換えた方が楽な気がしてきたけどもう眠い

556 = :

>>554
一般的に、jQueryを使ったコードでeachは
あまり使わない。

これでいいんじゃないかな？

cl = クラス名;
$('#box img').removeClass(function(index, className) {
　　return (className.match(/\ba\S+/g) || []).join(' ');
}).addClass(cl);

removeClassの中もなんか気持ち悪けど、
ここをどうにかしようと考えたら
結局ボックスのclassを変えたほうがいいってことになる。

558 = :

>>555
具体的でよくわかりました。
各spanにclass="block-a"はやってみてましたが、逆の発想はありませんでした。
555のほうが記述が少なく処理も自然でいいです。完璧でした。

>>557
やりたいことはまさしくそのネストでしたが
今回はコンパイルのデメリットから普通のCSSでいきます。

みなさん、ありがとうございました。

559 = :

textarea id="id_text"に入っている文字列
"　　文字列１ \n \n\n　　　文字列2 "　　（例）
を改行でsplitして、空文字列以外のものだけを配列に取り出すことは出来たのですが、
var Ary = $('#id_text').val().split('\n').filter(function (v) { return v !== '' });
これだと、空白からなる文字列は除去できません。
また、取り出した文字列の前後に空白が残っています。この空白も取り除く方法を教えてください。
ループで回すんでは無くて上の式に何か追加すれば可能でしょうか？

560 = :

>>559
.map(function(v){ return v.trim() }) を追加する
var Ary = $('#id_text').val().split('\n').map(function(v){ return v.trim() }).filter(function(v){ return v !== '' });

561 = :

>>560
ありがとうございました

562 = :

属性をメソッドにできますか？例えば

<div id="hoge" method="hide"></div>

を

$('#hoge').hide();

と。かなり特殊で変は承知ですがそこをあえて。

564 = :

>>562
$("#hoge").attr("data-method", function() { ... });
とかじゃないの多分

要素に直接書くのは知らん

565 = :

>>562に必要なのはCSSにだろ？

<div id="hoge"></div>

#hoge { display: none }

566 = :

呼び出し例みるとプラグイン作ってそれを呼び出しているみたいにも見える

http://yyengine.jp/blog/jquery/jquery-plugin-5step/

567 = :

>>565
それだとここで質問の意味ないよ

568 = :

jQueryじゃない話題はこちらへ

+ JavaScript の質問用スレッド vol.125 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1436910657/

569 = :

どれだけjQueryに御執心なんだこの人はｗ

570 = :

>>564
要素に直接書きたいのです。

みなさんありがとう。

572 = :

>>570
直接書いてそれをメソッドとして実行できるとは思えない。

573 = :

同じくdata-の質問なのですが、i要素の脇に属性値を表示させ、
後にjQで動的に変えて表示させたいのですがうまくいきません。

【HTML】 <i data-myattr="abc">...</i>
【CSS】 i::after {content: attr(data-myattr);}
【jQ】 $('i').data('myattr','def');

abcは表示しますがjQで変えた後もabcのままです。
動的に表示を反映するにはどうしたらいいでしょうか。

574 = :

>>573です。半分自己解決しました。attrを使ったら反映しました。

【HTML】 <i data-myattr="abc">...</i>
【CSS】 i::after {content: attr(data-myattr);}
【jQ】 $('i').attr('data-myattr','def');

title属性にattrメソッドで取得・設定などはやってみていたのですが
data-はdataメソッドで取得・設定と頭が固定してました。

理由（DOM関係でしょうか）や方法としていいのか悪いのかわかりませんが
動作的には結果オーライです。

575 = :

うん、そのやり方は正しいよ。
data-xx属性は.data("xx")の取得の初期値にしか過ぎず、
.data("xx", "aaa")での設定の際には属性とはまた違ったところに値が保存される。

なので、属性を直接変えたいなら.attr()を使うべし。

576 = :

>>575
どうもjQのキャッシュがあって動作の違いが生じてるようですね。

不安げに使ってるのとでは心情が違いますので心強いです。
明確なお言葉ありがとうございます。

579 = :

必要にならないから

580 = :

>>579
browserに応じて処理内容や画面のデザインを変えたい場合、browserの種類が分からないのにどうするんですですか?

581 = :

jQueryは特定のブラウザの種類に応じた処理の切り分けに使うライブラリではないので、
そういうのが必要なら別のライブラリを併用してね

582 = :

要するにjq作っている人達は正確なbrowserの種類判定を実装するのが面倒になったんだろうな。無責任だろ。

583 = :

>>580
browserに応じて処理内容や画面のデザインを変えないし、変えてはならない。

584 = :

>>582
釣りですか？

585 = :

>>582
jQuery作ってる人がそんな責任を負わないし、レガシーな機能はどんどん切り捨ててスリムにしていくべきだよ

586 = :

>>568
いやいや、jQueryの話題だろｗ

587 = :

むしろみんないかにブラウザの差をなくすか、しなくて済むようにしてるのに
その必然性が分からん。特殊分野なの？

588 = :

>>587
＞むしろみんないかにブラウザの差をなくすか、しなくて済むようにしてるのに
現実はブラウザ自体に差がありそれは永久に解消されないから、htmlを作る側はそういう手間のかかる作業に追われる問題も解消しない。

589 = :

>>586
> いやいや、jQueryの話題だろｗ

jQueryの話題じゃない。
ブラウザの判別はUserAgentを使うのだから、
jQueryは関係ない。

590 = :

いつどんなタイミングでブラウザが増えるかわからんのだし、
本体とは分離しておくのが無難やね

592 = :

とりあえず先に無駄なところを修正しておこうか？

$(function(){
　$("div").hide();
　$("input[type='radio']").click(function() {
　　if(this.checked) {
　　　$(this).next("div").show(500);
　　}
　});
})

593 = :

gifアニメ画像の再生完了のイベントを取ることはできないでしょうか。
setTimeoutで一定時間の後、次の処理に進むようにしてみましたがパソコンと
スマホでタイミングがずれてしまいます。

595 = :

少し足りなかったな。こうだな。

jQueryを使ったコードでは、
パフォーマンスが気になる部分とか以外では、
原則としてeachやifは使わないんだわ。
（jQueryプラグインを作るときにはeach使うけど）

繰り返しとか比較っていうのはコードを複雑にする原因で、
それを減らせるのがjQueryの関数型プログラミングの機能だから

$(function(){
　$("div").hide();
　$("input[type='radio']").click(function() {
　　$(this).filter(':checked').next("div").show(500);
　});
})

596 = :

こんばんわ
592さん594さんお返事感謝です。
592さんの言うとおり無駄なソースが多すぎましたね。
594さんの「labelに囲まれてるんだから、隣では辿りつけないよね」の言葉で今回の問題が理解できました。
IEの開発者ツールのDOMExplorerで見てみると階層が違いましたね。

以下が修正後になりました。
<script type="text/javascript">
$(function(){
$("div").hide();
$("input[type='radio']").click(function(){
$("div").hide(500);
$(this).parent("label").nextUntil("label","div").show(500);
});
});
</script>

最初の想定より大分短いコードになって満足です。
ラジオをクリックした際、一度全て非表示にする処理を入れたのが短縮に繋がりましたね。
最初はラジオボタンのセレクタを全て取得してチェックされているかどうか確認してshowかhideを設定するつもりでしたが
ものすごく冗長になるとおもい今回のようにしました。
アドバイス感謝します。

597 = :

ちなみに595の方法でやってみましたがなにかうまくいきませんでした。。

598 = :

なんでブラウザの判別とか言ってるのだ
アンカ負ってみ

599 = :

http://jqueryui.com/draggable/

WindowsではできましたがAndroidでは動きません。
スマホでも動かす方法教えてください。

600 = :

>>577は、いい質問だと思うぜ？
だれか.lengthでも使って答えてあげなよ（俺はめんどくさい）