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

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

javascript jquery

Javascript jQuery-在3列中输出此对象列表,javascript,jquery,Javascript,Jquery,有人能告诉我如何在3列中输出这个对象列表并按字母顺序排序吗？我尝试了否则如果但是 CSS: HTML: 风险值数据=[ {姓名：“丹”，年龄：25岁，描述：“测试”}， {姓名：“Aary”，年龄：15岁，描述：“description”}， {姓名：“巴里”，年龄：15岁，描述：“描述”}， {姓名：“卡里”，年龄：15岁，描述：“描述”}， {姓名：“Dary”，年龄：15岁，描述：“描述”}， {姓名：“Fary”，年龄：15岁，描述：“description”}， {姓名：“汤姆”，年

有人能告诉我如何在3列中输出这个对象列表并按字母顺序排序吗？我尝试了

否则如果

但是

CSS:

HTML:


风险值数据=[
{姓名：“丹”，年龄：25岁，描述：“测试”}，
{姓名：“Aary”，年龄：15岁，描述：“description”}，
{姓名：“巴里”，年龄：15岁，描述：“描述”}，
{姓名：“卡里”，年龄：15岁，描述：“描述”}，
{姓名：“Dary”，年龄：15岁，描述：“描述”}，
{姓名：“Fary”，年龄：15岁，描述：“description”}，
{姓名：“汤姆”，年龄：18岁，描述：“哈哈”}
];
函数findName（personName）{
return$.grep（数据、函数（项）{
return item.name==personName；
});
}
功能详细信息（人名）
{
var person=findName（personName.toString（））[0]；
$（'#description'）.html（person.desc）；
}

JS:

$（函数（）{
对于（变量i=0；i外观”
好的。我使用float:left；
属性将所有数据项放在相同的容器中。当需要换行并开始新行时，我们根据条件放置
元素，如果（I%3==0）
其中3
是列计数。我还修改了元素的单击处理程序
js:
不需要在html区域中放置js代码和html、body、head标记
您只需要添加另一个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>");
    }
});

$（函数（）{
sort（函数（a，b）{返回a.name>b.name；}）；
对于（变量i=0；i（“+data[i].age+”）“+”
”；
}
});
第三列应该是什么？应该是“动态的”"。例如，如果我有A，B，C。A应该是1列，B第二列，C第三列。请解释您所做的更改。您的答案中甚至没有包含代码。谢谢！这看起来很棒，但当他们单击对象下方的名称时，我需要显示说明。非常感谢！我想将您的答案标记为有用，但我没有足够的答案要点：（或者使用data.sort（函数（a，b）{return a.name.localeCompare（b.name）；}）
如果你想要unicode排序。你能告诉我有什么方法可以像下面的第一列b、第二列D、第三列一样对它们进行排序吗？你需要用[I%3]
替换[parseInt（I/data.length*3）]老兄，你太棒了！我真是太感谢你了！！！我会努力学习这一切（但这很难）并像你一样：）
<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>

$(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>");
        }
    }
});

    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'));
    })
});

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

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

$(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>");
    }
});