動的に生成された html を整列させたいのですが、得られるものは少し緩いです:
これが私のjQueryです：
function getNatlBookCritics() {
var htmlBuilder = '';
$.getJSON('Content/NBCCJr.json', function (data) {
$.each(data, function (i, dataPoint) {
if (IsYear(dataPoint.category)) {
htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
} else {
htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
dataPoint.imgsrc + '\"' +
dataPoint.imgalt + '></img></a>' +
'<div id=\"prizeCategory\" class=\"category\">' +
dataPoint.category +
'</div><br/><cite id=\"prizeTitle\" class=\"title\">' +
dataPoint.title +
'</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
dataPoint.author +
'</div><br/>';
if (dataPoint.kindle.length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
' target=\"_blank\">Kindle</a></button>';
}
if (dataPoint.hardbound.length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
' target=\"_blank\">Hardbound</a></button>';
}
if (dataPoint.paperback.length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
' target=\"_blank\">Paperback</a></button>';
}
htmlBuilder += '</section>';
}
}); //each
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
}); //getJSONNBCCJr
} // getNatlBookCritics()
...関連する CSS は次のとおりです。
.yearBanner {
font-size: 2em;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
padding-top: 100px;
}
.floatLeft {
float: left;
padding-right: 20px;
padding-left: 5px;
}
section.wrapper {
min-width: 360px;
overflow: hidden;
display: inline-block;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
width: 160px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
アップデート
関連するメモとして、このコードを変更する必要がある理由はありますか?
}); //each
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();
}); //getJSONNBCCJr
...に：
}); //each
}); //getJSONNBCCJr
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();
更新 2
よし、ついに輝かしいが欠陥のある HTML がここにある。私はそれがきれいではないことを知っていますが、ここにも jsfiddle があります: http://jsfiddle.net/clayshannon/cMYEH/1/
<div
class="yearBanner">2012</div>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B00655KLOY.01.MZZZZZZZ.jpg"
alt="Ben Fountain book cover"></img>
</a>
<div
id="prizeCategory"
class="category">Fiction</div>
<br/>
<cite
id="prizeTitle"
class="title">Billy
Lynn's
Long
Halftime
Walk</cite>
<br/>
<div
id="prizeArtist"
class="author">Ben
Fountain
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0060885599" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0060885610" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B007EDOLJ2.01.MZZZZZZZ.jpg"
alt="Andrew Solomon book cover"></img>
</a>
<div
id="prizeCategory"
class="category">General
Nonfiction
</div>
<br/>
<cite
id="prizeTitle"
class="title">Far
From
the
Tree:
Parents,
Children,
and
the
Search
for
Identity</cite>
<br/>
<div
id="prizeArtist"
class="author">Andrew
Solomon
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0743236718" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0743236726" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B0062B0844.01.MZZZZZZZ.jpg"
alt="Robert Caro book cover"></img>
</a>
<div
id="prizeCategory"
class="category">Biography</div>
<br/>
<cite
id="prizeTitle"
class="title">The
Passage
of
Power:
The
Years
of
Lyndon
Johnson</cite>
<br/>
<div
id="prizeArtist"
class="author">Robert
Caro
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0679405070" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0375713255" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B0072NWK88.01.MZZZZZZZ.jpg"
alt="Leanne Shapton book cover"></img>
</a>
<div
id="prizeCategory"
class="category">Autobiography</div>
<br/>
<cite
id="prizeTitle"
class="title">Swimming
Studies</cite>
<br/>
<div
id="prizeArtist"
class="author">Leanne
Shapton
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0399158170" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/B008G16HVG.01.MZZZZZZZ.jpg"
alt="Marina Warner book cover"></img>
</a>
<div
id="prizeCategory"
class="category">Criticism</div>
<br/>
<cite
id="prizeTitle"
class="title">Stranger
Magic:
Charmed
States
and
the
Arabian
Nights</cite>
<br/>
<div
id="prizeArtist"
class="author">Marina
Warner
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0674055306" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0099437694" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
target="_blank">
<img
height="160"
width="107"
src="http://images.amazon.com/images/P/1555976050.01.MZZZZZZZ.jpg"
alt="D. A. Powell book cover"></img>
</a>
<div
id="prizeCategory"
class="category">Poetry</div>
<br/>
<cite
id="prizeTitle"
class="title">Useless
Landscape,
or
A
Guide
for
Boys</cite>
<br/>
<div
id="prizeArtist"
class="author">D.
A.
Powell
</div>
<br/>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
</section>
<div
class="yearBanner">2011</div>
<section
class="wrapper">(etc.)</section>
ところで、yearBanner の「float-left」は重要です。CSS ファイルのバージョン番号をインクリメントするのを忘れていたので、それを省略した場合の悲惨な結果は表示されませんでした (元に戻しました)。
私のCSSの他の重要な部分：
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* This added 7/12/2013 to allow for jQueryUI buttons without them being oversized -
the fiddle for it: http://jsfiddle.net/RFUsW/1/ */
.ui-button-text-only .ui-button-text {
padding: .2em .5em;
line-height: 1.2;
font-size: 0.8em;
}
いじりを更新しました：http://jsfiddle.net/clayshannon/cMYEH/1/
更新 3
これは ( http://addyosmani.com/blog/building-spas-jquerys-best-friends/から) それを行うための興味深い代替方法のように見えます:
<ul id="albumList"></ul>
var albums = [
{ Title: "My Vacation In Malibu", AlbumYear: "1993" },
{ Title: "A Trip To The Sea-side", AlbumYear: "1992" }
];
//define the markup for our template
var template_markup = "
<ul>
<li><b>${Title}</b> (${AlbumYear})</li>
</ul>
";
//compile our markup above as a template called
//'albumTemplate'
$.template( "albumTemplate", template_markup );
//render the template using 'albums' as our data
//source then insert the HTML thats rendered under
//the albumList element
$.tmpl( "albumTemplate", albums )
.appendTo( "#albumList" );
...しかし、https://github.com/BorisMoore/jquery-tmplは、「ベータ版です。アクティブな開発やメンテナンスは行われていません。問題は未解決のままですが、解決されていません。」これは少し怖いです。
もう1つの問題は、特定の値がそのようなものである場合は要素を作成し、そうでない場合は作成しないという条件付きロジックを引き続き使用できるかどうかです。
コードの変更を検討したいという衝動は、一部はコードマニア (いじくり回すことへの根深い、消えない衝動) によるものですが、一部はより良い理由によるものでもあります。