JSon и JQuer Accordian

Это заставляет меня волноваться БАТТИ как ад. Это по существу то, что я пытаюсь выполнить. Вы увидите, что у Json есть 2 разных отдела «Офис» и «Столовая» Я пытаюсь выполнить все, чтобы они были отделом, в котором они находятся. Проблема заключается в том, что HTML нужно что-то искать например,JSon и JQuer Accordian

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

     <p> 
     Second Paragraph 
     </p> 

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


But unfortunately I cannot seem to get the </div> tag in the right spot at the end of the last paragraph of each section 


<!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":"[email protected]","department":"stockroom"}, 
{"displayname":"Your Momma","email":"[email protected] ","department":"stockroom"}, 
{"displayname":"Bob","email":"[email protected] ","department":"Office"}, 
{"displayname":"Cathy","email":"[email protected] ","department":"Office"}, 
{"displayname":"mike","email":"[email protected] ","department":"Office"}, 
{"displayname":"scott","email":"[email protected] ","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>

источник

2011-12-03 scripter78

Вы можете увидеть его здесь – scripter78

http://jsfiddle.net/MhbcT/ – scripter78

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

редактировать: Вот ссылка на мой раздвоенный 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>"); 
});

источник

2011-12-03 03:43:51 MatthewJ

Мало того, что код работает это также sexxy. – scripter78

Я немного обновил его, потому что вы предполагали, что кто-то всегда будет знать, что такое имена отдельных отделов. так что вот моя версия скрипта, что вы сделали. – scripter78

http://jsfiddle.net/TTV6d/4/ – scripter78

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

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

Таким образом, в этой линии открыт <div> будет закрыт в конце Fo г вы до следующего <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++; 
    } 
}

источник

2011-12-03 03:57:37

Джон, я не пробовал извинить за это, но код Matts был очень четким и коротким и отлично работает. Я хочу поблагодарить вас обоих за ваш вклад в это – scripter78

JSon и JQuer Accordian

ответ

Смежные вопросы