How can I make the results of a jquery json result make items visible

Question

On my main page I have this jquery code which does an ajax call and loads the whole pages contents into a DIV on my page, it refreshes every X amount of seconds

<!-- Auto update/look for NEW notifications --> 
<script type='text/javascript'> 
$(document).ready(function(){ 
     var updatenotification = function(){ 
          $('#notificationcontainer') 
               .load('/modules/member/home/notifications.inc.php') 
               .fadeIn("slow"); 
     }; 
     var auto_refresh = setInterval(function(){updatenotification();}, 5000); 
     updatenotification(); 
}); 
</script> 
<!-- ENDS HERE -->


<div id="#notificationcontainer"></div>

I am wanting to change this though to make it send less data back and forth so I am wanting to make my notification.inc.php output a JSON string instead. I will make it have these values;

item2 = 1

item5 = 1

notice there is 2 items that are marked with a 1, there is a total of 6 items but I will only include the ones in the json string that I need to show, on my main page I want to make a code that will read the json string 1 means that the jquery should make that item visible on the page I will have all these items set to be hidden on the page, when 1 needs to be shown, jquery can just make it be visible. Also the names are just generic they will all be changed

<style type="text/css">
#item1{
    display:none;
}
#item2{
    display:none;
}
#item3{
    display:none;
}
#item4{
    display:none;
}
#item5{
    display:none;
}
#item6{
    display:none;
}
</style>


<div id="notificationhead">Notifications</div>
<div class="notificationlink" id="item1"><a href="">Testing 1</a></div>
<div class="notificationlink" id="item2"><a href="">Testing 2</a></div>
<div class="notificationlink" id="item3"><a href="">Testing 3</a></div>
<div class="notificationlink" id="item4"><a href="">Testing 4</a></div>
<div class="notificationlink" id="item5"><a href="">Testing 5</a></div>
<div class="notificationlink" id="item6"><a href="">Testing 6</a></div>

How can I do this?

Answer 1

Not the solution to your question but another piece of advice. You could probably simplify things a bit by adding an additional class (like "visible") to the div you want to show, and setting the CSS to display: block on that and display: none to the the notificationlink class. Would eliminate the overhead of manually setting IDs on each div.

Multiple classes are allowed in HTML, so you can end up with anything like class="notificationlink visible first-child extended". Perfectly valid.