jQuery-在3列中输出此对象列表

Question

有人可以告诉我如何在3列中输出此对象列表并按字母顺序对列表进行排序吗？ 我尝试过else if但是...

CSS：

.main {
    float:left;
    width:150px;
    background:#9c9;
}
.center {
    float:left;
    width:150px;
    background:#c9c;
}

HTML：

<head>
    <script type="text/javascript">
        var data = [
            {name: "Dan", age: 25, desc: "test"}, 
            {name: "Aary", age: 15, desc: "description"},
            {name: "Bary", age: 15, desc: "description"},
            {name: "Cary", age: 15, desc: "description"},
            {name: "Dary", age: 15, desc: "description"},
            {name: "Fary", age: 15, desc: "description"},
            {name: "Tom", age: 18, desc: "haaha"}
        ];

        function findName(personName){
            return $.grep(data, function(item){
              return item.name == personName;
            });
        }

        function details(personName)
        {
            var person = findName(personName.toString())[0];
            $('#description').html(person.desc);
        }
    </script>
</head>
<body>
    <div>
        <div class='main'>
        </div>
        <div class='center'>
        </div>
        <div id="description">
        </div>
    </div>
</body>

JS：

$(function () {
    for (var i = 0; i < data.length; i++) {
        if (i % 2 == 0) {
            $('.main').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
        } else {
            $('.center').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
        }
    }
});

http://jsfiddle.net/KKYZj/8/

Answer 1

看here 。

好。 我将所有数据项都放在带有float: left;相同容器中float: left; 属性。 当需要换行并开始新的项目行时，我们根据条件if(i%3 == 0)放置<br style="clear: both">元素，其中3是列数。 我也修改了元素的点击处理程序。

js：

    var data = [
            {name: "Dan", age: 25, desc: "test"}, 
            {name: "Aary", age: 15, desc: "description"},
            {name: "Bary", age: 15, desc: "description"},
            {name: "Cary", age: 15, desc: "description"},
            {name: "Dary", age: 15, desc: "description"},
            {name: "Fary", age: 15, desc: "description"},
            {name: "Tom", age: 18, desc: "haaha"}
        ];

        function findName(personName){
            return $.grep(data, function(item){
              return item.name == personName;
            });
        }

$(function() {
    for(var i=1;i<data.length;i++)
    {        
        var dataItem = "<a href='#' class='dataItem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>";
            $('.main').append(dataItem);

        if(i%3 == 0) {
         $('.main').append("</br>")   ;
        }
    }

    var description = $('#description');
    $('a.dataItem').on('click', function(e){
        description.text($(this).data('description'));
    })
});

的HTML：

<div>
    <div class='main'>
    </div> 
    <div id='description'></div>
</div>

CSS：

.main a{
display: block;
float:left;
width:150px;
background:#9c9;
}

不需要将js代码和html，body，head标签放在html区域中

Answer 2

您只需要添加另一个div列： <div class='right'></div>

然后将您的JavaScript更改为：

$(function () {

    data.sort(function (a, b) { return a.name > b.name; });

    for (var i = 0; i < data.length; i++)
    {
        var target = [$('.main'), $('.center'), $('.right')][i % 3];
        target.append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
    }
});