wrapAll()
把所有元素包装在一个容器中
wrap()
把每个元素分别包装在各自的容器中
before()
insertBefore()的反向方法,功能与insertBefore()类似,但操作的内容和目标与insertBefore()相比刚好是相反的
例如:
$('<p>Hello</p>').appendTo('#container');
与下面的代码结果一样:
$('#container').append('<p>Hello</p>');
append()
appendTo()的反响方法
实例代码:
$(document).redady(function(){
$('span.footnote').insertBefore('#footer')
.wrapAll('<ol id="nodes"></ol>')
.wrap('<li></li>');
})
上面的代码一定是要先插入到#footer的前面然后再逐步做后面的工作。如果先包装再插入,那么就相当于是说在原位置进行了包装,然后又移走了。会出现的效果就是
ol
如下图:
另外wrapAll()
与wrap()
的顺序也是不能换的。这里就相当于是先写最外层的内容,然后再一层一层的往里面写。
最后形成的html结构:
正如我们看到的html结构里面显示的,span.footnote
首先被插入到了div#footer
的前面,然后全部并被包裹在了ol
中 最后使用wrap()
把每个span.footnote
分别包装在了自己的一个li
中
这个功能再进行一个延伸。
实现功能描述:
把脚注信息span.footnote
从p标签中取出,按顺序加到#footer
前面。同时要在原位置留下脚注的序号信息 这里我们会使用到jquery的显示迭代 其中each()
就是一个显示迭代器。
示例代码:
$(document).ready(function(){
$notes=$('<ol id="notes"></ol>').insertBefore('#footer');
$('span.footnote').each(function(index){
$('<sup>'+(index+1)+'</sup>').insertBefore(this);
$(this).appendTo($notes).wrap('<li></li>');
})
})
这里需要注意,必须要在脚注移动之前插入编码,否则就找不到脚注的位置了
上面的示例还可用反向插入的方法来实现,在这个例子中,通过反响插入可以使用jquery的连缀特点,使得代码更加简洁清晰
$(document).ready(function(){
$notes=$('<ol id="notes"></ol>').insertBefore('#footer');
$('span.footnote').each(function(index){
$(this)
.before('<sup>'+(index+1)+'</sup>')
.appendTo('$notes')
.wrap('<li></li>');
})
})
})
交流学习群: 530425215 互相学习共同进步 本人qq:923029991