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:
我遇到了一些问题，我似乎无法在嵌套在div中的ul中显示六个列表项。以下是我到目前为止的情况：
$(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:
我的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:
我基本上想要做的是遍历JSON对象，为每个新创建的UL放置六个列表项，并将这些UL放在新创建的DIV中，以便每个UL块有6个列表项，每个块嵌套在新DIV中互相浮动。最终结果将如下所示：
<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....
等等....
1 个解决方案
#1
0
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块的方式if（i == 0 || i％6 == 0）（顺便说一下，如果（i％6 == 0）也有效）：proNameLink变量被填入这个块，解释了为什么你只得到每6个中找到的第1个项目。我想你想要做以下事情：
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);
#1
0
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块的方式if（i == 0 || i％6 == 0）（顺便说一下，如果（i％6 == 0）也有效）：proNameLink变量被填入这个块，解释了为什么你只得到每6个中找到的第1个项目。我想你想要做以下事情：
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);