jquery - 为什么我的动态 HTML 看起来是随机放置的？

Question

我希望我的动态生成的 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/我是通过 console.log(htmlBuilder);

<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说它是“测试版。不再进行积极的开发或维护。问题仍然存在，但没有得到解决。” 这有点可怕。

另一个问题是：我是否仍然能够拥有我的条件逻辑，如果某个值是某某某某，则创建一个元素，否则不要。

考虑更改我的代码的诱惑部分是由 codemania（根深蒂固的、不可磨灭的修补动力）驱动的，但部分也是出于更好的原因：因为这种方法可能更高效。

score 3 · Accepted Answer

首先，我会清理剩下的第一本书。你可以这样做

section.wrapper:first-child{
    clear: left;
}

然后，您可能应该找出您正在动态创建的所有元素的高度，并将所有元素设置为最大元素的高度，否则事情会变得一团糟。当一个元素在左边太高时，两个元素最终会在它的右边，漂浮在左边元素的一侧。

我写了一些东西来找到最大元素的高度：

largest = 0;
$(".wrapper").each(function () {
    if ($(this).height() > largest) {
        largest = $(this).height();
    }
});

$(".wrapper").css("height", $largest);

将该代码放在此行之后： }); //getJSONNBCCJr

最后，您真的应该将所有.wrapper部分都向左浮动，并且display: block

score 3 · Accepted Answer

在 css 中进行以下更改：

.ui-button-text-only .ui-button-text {
    padding: .2em .5em;
    line-height: 1.2;
    font-size: 0.8em;
    float: left;

}

.yearBanner {
    font-size: 2em;
    color: white;
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width:500px;
    padding-top: 50px;
    margin-left:50px;
    padding-bottom:20px;

添加
以下CSS：

.wrapper{
    float: left;
    width: 500px;
    margin-left:20px;
    padding-bottom:20px;

注意：确保 .yearBanner 和 .wrapper 的宽度应该相同，如果你改变一个类的宽度，那么你也应该改变另一个类。根据您的屏幕分辨率设置，因为我已经在 jsfiddle 中进行了测试，这就是为什么我将其设置为 500px，您可以更改它。

jquery - 为什么我的动态 HTML 看起来是随机放置的？

更新

更新 2

更新 3

2 回答 2

Related

Reference