无法追加到第二个容器
Can't append to second container
我有以下脚本:
(function($) {
$.fn.easyPaginate = function(options){
var defaults = {
step: 4,
delay: 100,
numeric: true,
nextprev: true,
controls: 'pagination',
current: 'current'
};
var options = $.extend(defaults, options);
var step = options.step;
var lower, upper;
var children = $(this).children();
var count = children.length;
var obj, next, prev;
var page = 1;
var timeout;
var clicked = false;
function show(){
clearTimeout(timeout);
lower = ((page-1) * step);
upper = lower+step;
$(children).each(function(i){
var child = $(this);
child.hide();
if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
if(options.nextprev){
if(upper >= count) { next.addClass('stop'); } else { next.removeClass('stop'); };
if(lower >= 1) { prev.removeClass('stop'); } else { prev.addClass('stop'); };
};
});
$('li','#'+ options.controls).removeClass(options.current);
$('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
if(options.auto){
if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
};
};
function auto(){
if(upper <= count){ page++; show(); }
else { page--; show(); }
};
this.each(function(){
obj = this;
if(count>step){
var pages = Math.floor(count/step);
if((count/step) > pages) pages++;
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>').insertAfter(obj);
if(options.nextprev){
prev = $('<li class="prev">prev</li>')
.appendTo(ol)
.bind('click', function() {
//check to see if there are any more pages in the negative direction
if (page > 1) {
clicked = true;
page--;
show();
}
});
}
if(options.numeric){
for(var i=1;i<=pages;i++){
$('<li data-index="'+ i +'">'+ i +'</li>')
.appendTo(ol)
.click(function(){
clicked = true;
page = $(this).attr('data-index');
show();
});
};
};
if(options.nextprev){
next = $('<li class="next">next</li>')
.appendTo(ol)
.bind('click', function() {
//check to see if there are any pages in the positive direction
if (page < (count / 4)) {
clicked = true;
page++;
show();
}
});
}
show();
};
});
};
})(jQuery);
jQuery(function($){
$('ul.news').easyPaginate({step:4});
});
这是一个类似轮播的插件,为导航生成以下 HTML 结构:
<ol id="pagination" class="pagin"><li class="prev">prev</li><li data-index="1" class="">1</li><li data-index="2" class="">2</li><li data-index="3" class="current">3</li><li class="next stop">next</li></ol>
我想要的只是将此列表包含在一个div中。 看起来很简单,但 appendTo 不想与我合作,或者我做错了什么(如果您能帮助我理解那是什么,我将不胜感激。
所以我正在这样修改:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo('#lala');
tiv.insertAfter(obj);
我知道如何链接,但我处于"调试"模式,试图理解为什么我没有得到我想象的结果:
<div id="lala>
<ol id="pagination><li>...... </li></ol>
</div>
我尝试放置一些控制台.log以查看变量的状态,但找不到有用的东西。我想 DOM 插入有些东西我没有得到。
在将
<ol>
元素添加到文档之前,您将元素附加到#lala
。这没有错,但由于您使用的是 id 选择器,并且目标元素还不是文档的一部分,因此选择器不会匹配任何内容。
要解决此问题,您可以编写:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo(tiv);
tiv.insertAfter(obj);
或:
var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
tiv.insertAfter(obj);
ol.appendTo('#lala');
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 为什么不'在JQuery中找到第二个css选择器的工作
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- CORS-重定向到第二个GET正在接收的页面
- 正则表达式与数字中的第二个点匹配
- 如何在react js中移动第二个组件
- 使用Javascript,如何显示<tr>在另一<tr>悬停时,隐藏第二个<tr>
- 关闭第二个事件源上的第一个事件源's onopen方法
- D3从嵌套的JSON中绘制第二个圆环图
- IE11中的第二个调用取消了第一个Fetch API调用
- 第一个字第一个字符第二个字第二个字符,一直到数组结束
- 角度指令:指向第二个元素
- 时间选择器:如何通过更改第一个值来更改第二个值
- 我如何从字符串中选出第一个单词的第一个字母,然后再选出第二个单词
- 与网络界面相比,谷歌搜索API有时会重复第一个结果,有时会重复第二个结果
- 第二个存在条件不起作用
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 如果未选择第一个下拉列表,则禁用第二个下拉列表
- 无法追加到第二个容器
- 第二个追加在jquery上不起作用