つくばぐらし

jqueryは便利ですが、今一つ使い方がピンと来ていないので覚書です。

<div id="jobPickUpHome" class="entryFrame">
<div class="entryTop">-</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト1</h3>
</div>
<dl>
<dt>テストタイトル1</dt>
<dd>
テスト1の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト2</h3>
</div>
<dl>
<dt>テストタイトル2</dt>
<dd>
テスト2の内容
</dd>
</dl>
</div>
</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト3</h3>
</div>
<dl>
<dt>テストタイトル3</dt>
<dd>
テスト3の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト4</h3>
</div>
<dl>
<dt>テストタイトル4</dt>
<dd>
テスト4の内容
</dd>
</dl>
</div>
</div>
<div class="entryBody">
<div class="jobHome">
<div class="entryTitle">
<h3>テスト5</h3>
</div>
<dl>
<dt>テストタイトル5</dt>
<dd>
テスト5の内容
</dd>
</dl>
</div>
<div class="jobHome jobHomeRight">
<div class="entryTitle">
<h3>テスト6</h3>
</div>
<dl>
<dt>テストタイトル6</dt>
<dd>
テスト6の内容
</dd>
</dl>
</div>
</div>
<div class="entryBottom">-</div>
</div>

というhtmlをシャッフルして表示する場合を考えます。

jquery.shuffle.jsに以下を追加します。
------------------------------------------
$(document).ready(function(){
$('div.jobHome:odd').removeClass('jobHomeRight');
$("div.jobHome").unwrap();
$("div.jobHome").wrapAll('<div id=\"jobPickupShuffle\"></div>');

// ピックアップをシャッフル
$('#jobPickupShuffle').shuffle();

var classnumber = '';
$("div.jobHome").each(function(i){
classnumber = Math.floor(i/2);
$(this).addClass("class" + classnumber);
});

for(i = 0; i < classnumber+1; i++){
$("div.class" + i).wrapAll('<div class=\"entryBody\">');
$("div.jobHome").removeClass("class" + i);
};

$('div.jobHome:odd').addClass('jobHomeRight');
});
------------------------------------------

【解説】
このソースは

#jobPickUpHome
div.entryTop
div.entryBody
div.jobHome
div.jobHome jobHomeRight