Using Jquery each loop to display six list items per ul inside a div pulled from a JSON object
I am running into problems where I can't seem to display six list items within a ul that is nested within a div. The following is what I have so far:
$(function proName(){
$.getJSON("pros", function(data) {
/* Parse JSON objects */
jJSON["pro_name"] = (function() {
//response = {
//values: [],
//count: 0
//};
var $listReference;
var $listDiv;
var proNameLink;
$.each(data, function(i,item){
if (item.pro_name != "undefined") {
if (i == 0 || i % 6 == 0) {
//response.count++;
//response.values[i] = item.pro_name;
var proName = item.pro_name;
var addProName = proName + ", ";
/* append li to ul block */
proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>');
$listDiv = $('<div id="scroll_controls" class="hasImage"></div>');
$listReference = $('<ul id="pro-name-results"></ul>');
$("#ajax-returned-content").append($listDiv);
$("#scroll_controls").append($listReference);
};
开发者_运维百科 $("#pro-name-results").append(proNameLink);
/* disable link after click */
proNameLink.bind("click", function() {
$('.pro-name-link'+i+'').removeAttr('href');
$('.pro-name-link'+i+'').css('color', '#ffffff');
$('.added-search-terms').append(addProName);
$('.pro-name-link'+i+'').unbind('click');
});
};
});
//return response;
})();
/* Return a number of values for a given object */
//alert( jJSON.getValues("pro_name",null) );
});
});
var jJSON = {
getValues: function(obj,num) {
return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num));
},
getCount: function(obj) {
return jJSON[obj]["count"];
}
};
And my HTML:
<body>
<div id="wn">
<div id="lyr" class="content"><span class="search-terms-title">Search Terms: <span class="added-search-terms"></span></span></div>
</div>
<div id="ajax-returned-content" class="ajax-search-content">
</div>
</body>
What I basically want to do is loop through the JSON object, put six list items for each newly created UL and place those ULs inside the newly created DIV so that each UL block has 6 list items and each block that is nested inside the new DIV is floated next to each other. The end result will look something like this:
<div id="ajax-returned-content" class="ajax-search-content">
<div id="scroll_controls" class="hasImage">
<ul id="pro-name-results">
<li><a href="#" class="pro-name-link1">Jerry</a></li>
<li><a href="#" class="pro-name-link2">Henry</a></li>
<li><a href="#" class="pro-name-link3">Dolly</a></li>
<li><a href="#" class="pro-name-link4">Stephanie</a></li>
<li><a href="#" class="pro-name-link5">James</a></li>
<li><a href="#" class="pro-name-link6">Anderson</a></li>
</ul>
</div>
<div id="scroll_controls" class="hasImage">
<ul id="pro-name-results">
<li><a href="#" class="pro-name-link7">Andy</a></li>
<li><a href="#" class="pro-name-link8">Peter</a></li>
<li><a href="#" class="pro-name-link9">Sam</a></li>
<li><a href="#" class="pro-name-link10">Tony</a></li>
<li><a href="#" class="pro-name-link11">Ken</a></li>
<li><a href="#" class="pro-name-link12">Jun</a></li>
</ul>
</div>
</div>
and so on....
First of all, I suggest that you clean up your code and remove any unnecessary stuff, you'll make it easier to read and hopefully to understand and fix.
I think your problem comes from the way you handle your if block if (i == 0 || i % 6 == 0) (btw, if (i % 6 == 0) also works): the proNameLink variable is filled in this block, which explains why you only get the 1st item of every 6 found. I guess that you wanted to do the following:
if (i % 6 == 0)
{
// Create a new list for 6 next items
$listReference = $('<ul></ul>');
// Create a container div for your list
var containerDiv = $('<div class="hasImage"></div>')
// append the div and list to the page DOM
div.append($listReference);
$('#ajax-returned-content').append(div);
// Note that if you want to set an ID to the ul and the div, you have to
// make it UNIQUE. Your code creates multiple DOM elements with the same ID.
// A kitten dies every time you do that.
}
// Create a list item, OUTSIDE of the if block
var proName = item.pro_name;
var proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>');
// Append list item to current list
$listReference.append(proNameLink);
加载中,请稍侯......
精彩评论