>>549
すみません。
四角内に星をまばらかつ定位置に置き、ボタン等で配置パターンを切り替えます。
星の数は変わりません。

・HTML
<div id="sora">
　<span id="#a01">☆</span>　<span id="#a02">☆</span>　～
</div>

・CSS
#sora {
　width: 100%; height: 200px;
　position: relative;
}

#sora span { position: absolute; }

・ブロックA
#a01 {top: ○%; left: ○%;}
#a02 {top: ○%; left: ○%; color: #○;}
　～

・ブロックB
#a01 {top: ○%; left: ○%;}
#a02 {top: ○%; left: ○%; color: #○;}
　～

・ブロック～
と、このブロックの辺りを何とかならないかと思いまして。

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

<div id="pattern1">
　<span id="#a01" style="top: ○%; left: ○%;">☆</span>
　<span id="#a02" style="top: ○%; left: ○%;">☆</span>
　～
</div>

<div id="pattern2">
　<span id="#a01" style="top: ○%; left: ○%;">☆</span>
　<span id="#a02" style="top: ○%; left: ○%;">☆</span>
　～
</div>

・・・

を全てdisplay: none;にし、$('#sora')の子をその都度
$('#pattern○')の子と入れ替えるなど、配置をHTMLに書けば簡単ですが
なるべくレイアウトはCSSに書きたい（書くべき？）です。
とはいえ548のようにCSSファイルが増えるならこちらのほうがいいです。

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書き換えた方が楽な気がしてきたけどもう眠い

>>551
それなら理解できるｗ

>>554
> ここまで書いて囲んでるボックスのclassかID書き換えた方が楽な気がしてきたけどもう眠い
CSSでやるならそれが正解。

こんな感じだね。

<div id="sora" class="block-a"> ← ここをblock-b、block-cに切り替えるだけ。
　<span id="#a01">☆</span>　<span id="#a02">☆</span>　～
</div>

・ブロックA
.block-a #a01 {top: ○%; left: ○%;}
.block-a #a02 {top: ○%; left: ○%; color: #○;}

・ブロックB
.block-b #a01 {top: ○%; left: ○%;}
.block-b #a02 {top: ○%; left: ○%; color: #○;}

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

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

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

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

ちなみに、一般的にレイアウトはCSSでやるのは正しいのだが、
この例ではゲームで敵の位置をランダムに配置するのと同様に
JavaScriptでやるのもありなんじゃないかとは思ってる。

もちろん切り替えるスタイルの数が固定であるならば
CSSでやって問題ないけれどね。

あと、CSSの記述を効率化したいならSass（Scss）を使うのがおすすめ
scssで書いてCSSに変換して出力したものを配置して使う。

こんな感じで書ける。

・ブロックA
.block-a {
　#a01 {top: ○%; left: ○%;}
　#a02 {top: ○%; left: ○%; color: #○;}
}

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

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

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

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

>>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 !== '' });

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

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

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

を

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

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

>>562
.hide()を実行した時の定義はどういう風に記述するつもり？

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

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

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

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

#hoge { display: none }

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

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

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

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

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

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

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

みなさんありがとう。

>>562
methodがhideならhide()実行するようにif文で書けば良いんじゃない？

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

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

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

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

>>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関係でしょうか）や方法としていいのか悪いのかわかりませんが
動作的には結果オーライです。

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

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

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

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

web制作初心者です。質問させてください。

jquery.flicksimple.js
http://www014.upp.so-net.ne.jp/makog/js/jquery_flicksimple/
を用いてスマホサイトで横幅100%での配置を実装しようとしているのですが
横１列に並ぶ<li>の数がデータベースと連動していて定数ではありません。

そのためスクロール領域である<ul>のwidth指定を
[ <li>の数 ] * [ <li>１つの幅px]
みたいな指定ができれば、と思うのですが
どう指定していいのかわかりません。。

どなたかご教授ください。

$.browser.msieみたいな判定が廃止された理由は何ですか?
廃止しても結局は同じような判定が必要になりますよね？なのに廃止する必然性が分かりません。

必要にならないから

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

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

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

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

>>582
釣りですか？

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

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

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

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

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

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

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

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

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

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

>>591
.next() は次の(隣の)要素なんだわ
labelに囲まれてるんだから、.隣では辿りつけないよね
ついでに言っておくと、.next()のセレクタはそのセレクタに合うのを探しに行くんじゃなくて、
隣のものの中からセレクタに合うものを絞り込むためにあるんよ
<div></div><span class='a'></span>
<div></div><span class='b'></span>
<div></div><span class='c'></span>
<span></span><span class='b'></span>
で
$('div').next('.b')と$('div').next() をコンソールにだしてみればわかると思う

親の要素に行ったり、ある条件に合うまで探すみたいなのは、用意されているから探してみておくれ

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

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

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

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

こんばんわ
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を設定するつもりでしたが
ものすごく冗長になるとおもい今回のようにしました。
アドバイス感謝します。

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

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

http://jqueryui.com/draggable/

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

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