我正在尝试实现一个 jQuery 插件。该代码可在 jsFiddle 上找到。 http://jsfiddle.net/MKL4g/1/但我也在下面复制了我的修改。
var postsArr = new Array(),
$postsList = $('div.cat-children ul');
//Create array of all posts in lists
$postsList.find('li').each(function(){
postsArr.push($(this).html());
})
//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
secondList = postsArr,
ListHTML = '';
function createHTML(list){
ListHTML = '';
for (var i = 0; i < list.length; i++) {
ListHTML += '<li>' + list[i] + '</li>'
};
}
//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);
//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul class="cat-list"></ul>').next().html(ListHTML);
我正在使用 Gantry 4.1.5 框架在 Joomla 3.0.2 站点上实现这一点。
为结果 UL LI 数组设置样式的 CSS 如下(LESS 格式):
body {
&.menu-face-à-la-crise,
&.menu-divorce-séparation,
&.menu-études-de-cas,
&.menu-effets-de-la-vie-séparée,
&.menu-effets-du-divorce,
&.menu-effets-communs,
&.menu-situations-particulières,
&.menu-formulaires-modèles,
&.menu-suppléments-addendas,
&.menu-à-propos-de-nous {
div#rt-mainbody-surround {
margin-top: -1px;
background: @whitebrown;
}
div.component-content {
.blog {
li {
text-align: center;
font-family: @headingFontFamily;
font-weight: 700;
font-size: 2.0em;
line-height: 1.5em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
div.cat-children {
ul {
float: left;
padding: 10px;
}
}
}
}
}
}
我在控制台中收到以下错误:
类型错误:'null' 不是一个对象(评估 '$postsList.find')
您可以在此处查看实现:
http://gobet.ergonomiq.net/études-de-cas/effets-du-divorce
如您所见,它似乎没有将列表项分成两列。
结果显示应将列表分成两列,并使列表项在视觉上以列为中心。
有人可以建议如何调试和解决这个问题吗?
最佳答案
您在脚本的开头启用了 MooTools。翻转它,以便您使用 jQuery 选择器。
var postsArr = [],
$postsList = jQuery('.cat-children ul');
//Create array of all posts in lists
$postsList.find('li').each(function(){
postsArr.push(jQuery(this).html());
})
//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
secondList = postsArr,
ListHTML = '';
function createHTML(list){
ListHTML = '';
for (var i = 0; i < list.length; i++) {
ListHTML += '<li>' + list[i] + '</li>'
};
}
//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);
//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul class="cat-list"></ul>').next().html(ListHTML);
编辑新请求
(function updateColumns($){
var postsArr = [],
$postsList = $('.cat-children ul'),
$parent = $postsList.parent();
//Create array of all posts in lists
$postsList.find('li').each(function(){
postsArr.push(jQuery(this).html());
})
//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
secondList = postsArr,
// ListHTML = '', <-- not needed
$insertWrapper = $('<div>').addClass('cat-children');
function createHTML(list){
var $ul = $('<ul>').addClass('cat-list');
for (var i = 0; i < list.length; i++) {
$ul.append( $('<li>').html( $(list[i]).html() ) );
};
var $wrappedDiv = $('<div>').addClass('gantry-width-50 cat-columns').append( $ul )
return $wrappedDiv;
}
//Generate HTML for first list
$insertWrapper.append( createHTML(firstList) );
$insertWrapper.append( createHTML(secondList) );
$postsList.replaceWith( $insertWrapper );
})(window.jQuery);
关于jquery-plugins - 调试 jQuery 插件以在两个相等的列中显示动态列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14445231/