よろしくお願いいたします。
タイトル、ちょっと詰め込みすぎました。。
■幅が400pxのdivの中に200pxのulを2つ並べてあります。
■ulの中に200pxサイズのboxと100pxサイズの正方形ボックス(li)があります。
■2つのulの中にあるliを一度全て合わせて、それをランダムにして表示したいです。
■その際、100pxサイズのボックスは必ず2個セットで表示させたいです。
↑100pxが1個しか表示されない列は100pxの隙間が出来てしまうため。
ulごとのランダムはできたのですが、2つのulのliを合わせてランダムに出力するのがうまくいきません。
隙間についても、どういう風にコーディングをすればいいのか悩んでます。。
参考サイトでも構いません。アドバイスをお願いいたします。
[html]
<style>
div{width:400px;}
ul{width:200px;display:inline-block;}
li{display:inline-block;}
.size100{width:100;height:100;}
.size200{width:200;height:200;}
</style>
<div randomdisplay="10">
<ul class="rnd_a">
<li class="width100">0</li>
<li class="width200">1</li>
<li class="width100">2</li>
<li class="width200">3</li>
<li class="width100">4</li>
</ul>
<ul class="rnd_b">
<li class="width200">5</li>
<li class="width100">6</li>
<li class="width100">7</li>
<li class="width100">8</li>
<li class="width200">9</li>
</ul>
</div>
[js]
jQuery(function($) {
$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children(".rnd_a").children("li").hide().length;
var chn2 = $(this).children(".rnd_b").children("li").hide().length;
for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
$(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a"));
console.log(r);
}
for(var i = 0; i < num && i < chn2; i++) {
var r = parseInt(Math.random() * (chn2 - i)) + i;
$(this).children(".rnd_b").children("li").eq(r).show().prependTo($(this).children(".rnd_b"));
}
});
}
});
$(function(){
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay")).children(".rnd_a").children("li");
});
});
});
javascriptについてあまり知識がなく、WEB上から見つけたものを流用しております。
chnで数を取得し、rでランダム、$(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a"));
で出力しているのだと思うのですが、新しい変数にchn + chn2としてランダムさせるとめちゃくちゃに。。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューの開閉制御
-
javascriptで、クリックしたら...
-
複数の画像をランダム(シャッ...
-
JQuery UIで、表示したタブの中...
-
クリックした<a>タグのみにClas...
-
アコーディオン自動開閉メニュ...
-
jQueryセレクタ/複数要素の指...
-
同一ページ内で、任意の文字列...
-
JQueryタブのアクティブ アン...
-
【jQuery】hoverしたn秒後にイ...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
HTMLで条件分岐はできますか?
-
Ctrl+F(検索)の窓を出したいの...
-
色の変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報