0

有人能告诉我如何在 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/

4

2 回答 2

0

看here。

好的。我将所有数据项与属性放在同一个容器中float: left;。当需要换行并开始新的项目行时，我们<br style="clear: both">根据列数的条件if(i%3 == 0)放置元素。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;
}

不需要在html区域放置js代码和html、body、head标签

于 2013-06-25T08:46:56.330 回答
0

您只需要添加另一个 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>");
    }
});
于 2013-06-25T09:02:29.377 回答