JSon и Jquery Accordion - PullRequest
Новая
       4

JSon и Jquery Accordion

2 голосов
/ 03 декабря 2011

Это сводит меня с ума, Бэтти, черт возьми.Это по сути то, что я пытаюсь достичь.Вы увидите, что в Json есть 2 разных отдела: «Офис» и «Склад». Я пытаюсь организовать всех по отделам, в которых они находятся. Проблема в том, что HTML должен выглядеть примерно так

    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        First Paragraph
        </p>

        <p>
        Second Paragraph
        </p>

        <p>
        Third Paragraph
        </p>
    </div>

Но, к сожалению, я не могу получить тег </div> в нужном месте в конце последнего абзаца каждого раздела 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>

    <script type="text/javascript">

    $(document).ready(function () {
        var contacts = [{"displayname":"Bruce Lee","email":"Bruce.lee@karate.com","department":"stockroom"},
{"displayname":"Your Momma","email":"Your.Momma@Yourmom.com  ","department":"stockroom"},
{"displayname":"Bob","email":"Bob@bob.com  ","department":"Office"},
{"displayname":"Cathy","email":"Cathy@Cathy.com  ","department":"Office"},
{"displayname":"mike","email":"mike@Cathy.com  ","department":"Office"},
{"displayname":"scott","email":"scott@Cathy.com  ","department":"Office"}
];          
var contacts2 = contacts;
            var r = 1;

            var lastvalue = 'blah';
            for(var i=0; i <=contacts.length; i++)
            {
                if(contacts[i].department != null)
                {
                    if(lastvalue != contacts[i].department)
                    {
                        if(i<1)
                        {
                        $('#accordion').append('</div><h3><a href="#">' + contacts[i].department + '</a></h3>');
                        $('#accordion').append('<div><p><a href="mailto:'+ contacts[i].email +'">' + contacts[i].displayname + '</a></p>');
                        }else{
                        $('#accordion').append('<h3><a href="#">' + contacts[i].department + '</a></h3>');
                        $('#accordion').append('<div><p><a href="mailto:'+ contacts[i].email +'">' + contacts[i].displayname + '</a></p>');
                        }
                    }else{
                        $('#accordion').append('<p><a href="mailto:'+ contacts[i].email +'">' + contacts[i].displayname + '</a></p>');

                    }

                lastvalue = contacts[i].department;
                r++;
                }
            }
        });
        $(function() {
        $( "#accordion" ).accordion();
    });

    </script>
</head>
<body>
    <div id="contactlist">
    <div id="accordion">

    </div>
    </div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 декабря 2011

Возможно, вы захотите изменить это на jquery каждый цикл и работать с объектами json непосредственно внутри него.Причина, по которой вы каждый раз получали уровень аккордеона, заключалась в том, что ваш цикл вставлял h3 каждый раз.Я предоставил код, чтобы получить практически все, что вам нужно.

edit: Вот ссылка на мой раздвоенный jsfiddle => http://jsfiddle.net/TTV6d/12/

Надеюсь, это поможет 

var departmentlist=new Array();
$.each(contacts, function(i,contact) {
    //insert the departments
    if (contact.department != null && $('#' + contact.department).length == 0) {
        $('#accordion').append('<h3 id='+ contact.department +'><a href="#">' + contact.department + '</a></h3>');
        departmentlist.push(contact.department);
    }
    //insert contacts in the accordion
    $('#' + contact.department).after('<p><a href="mailto:' + contact.email + '">' + contact.displayname + '</a></p>');
});
$.each(departmentlist, function(i,list) {
    $("#" + list).nextUntil("h3").wrapAll("<div></div>");
});
0 голосов
/ 03 декабря 2011

Во-первых, имейте в виду, что браузеры обычно пытаются нормализовать разметку, добавленную к документу: (http://jsfiddle.net/EVjaq/)

$('#container').append('<div><p>Testing</p>'); // no `</div>`
console.log($('#container').html());           // `<div><p>Testing</p></div>`

Таким образом, открытие <div> в этой строке будет закрыто для вас до того, как будет добавлено следующее <p>: 

$('#accordion').append('<div><p><a href="mailto:'+ contacts[i].email +'">' + contacts[i].displayname + '</a></p>');

Чтобы избежать этого, вы можете хранить весь HTML в переменной, объединяя сегменты вместе, и добавлять его в DOM только после того, как это будет сделано. Или вы можете сохранить <div> и добавить к нему, что может сделать условия немного проще: 

var lastvalue = null,
    lastdiv = null;

for (var i = 0; i <= contacts.length - 1; i++) {
    if (contacts[i].department != null) {
        if (lastvalue != contacts[i].department) {
            $('#accordion').append('<h3><a href="#">' + contacts[i].department + '</a></h3>');

            // remember `<div>`
            lastdiv = $('<div>').appendTo('#accordion');
        }

        // append to the `<div>` directly rather than `#accordion`
        // also, skip the `else` so you don't have to type this twice
        lastdiv.append('<p><a href="mailto:' + contacts[i].email + '">' + contacts[i].displayname + '</a></p>');

        lastvalue = contacts[i].department;
        r++;
    }
}
...