jQuery将div作为特定索引插入
jQuery将div作为特定索引插入
提问于 2010-08-25 10:40:54
假设我有这个：
<div id="controller">
<div id="first">1</div>
<div id="second>2</div>
</div>但是假设我想根据我提供的索引随意插入一个新的div。
假设我给了insert 0的索引，结果应该是：
<div id="controller">
<div id="new">new</div>
<div id="first">1</div>
<div id="second">2</div>
</div>如果我要插入的索引是2，那么结果将是。
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
<div id="new">new</div>
</div>如果我给出一个1的索引，结果将是：
<div id="controller">
<div id="first">1</div>
<div id="new">new</div>
<div id="second">2</div>
</div>只需忘记最后一个示例的格式。在这个网站上复制和粘贴HTML代码的简单行为足够可怕，让我尖叫并拔出我的头发，我不想再花时间搞乱它！
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-08-25 10:51:24
作为一个更好地处理0的函数：
function insertAtIndex(i) {
if(i === 0) {
$("#controller").prepend("<div>okay things</div>");
return;
}
$("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}编辑:在第n个子选择器中添加括号，以避免NaN错误。@hofnarwillie
function insertAtIndex(i) {
if(i === 0) {
$("#controller").prepend("<div>okay things</div>");
return;
}
$("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}
window.doInsert = function(){
insertAtIndex(2);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="controller">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<button onclick="doInsert()">Insert "great things" at index 2.</button>
Stack Overflow用户
发布于 2013-09-03 21:12:33
使用我的简单插件Append With Index：
$.fn.appendToWithIndex=function(to,index){
if(! to instanceof jQuery){
to=$(to);
};
if(index===0){
$(this).prependTo(to)
}else{
$(this).insertAfter(to.children().eq(index-1));
}
};*现在：
$('<li>fgdf</li>').appendToWithIndex($('ul'),4)或者：
$('<li>fgdf</li>').appendToWithIndex('ul',0)Stack Overflow用户
发布于 2012-02-08 20:03:10
//jQuery plugin insertAtIndex included at bottom of post
//usage:
$('#controller').insertAtIndex(index,'<div id="new">new</div>');
//original:
<div id="controller">
<div id="first">1</div>
<div id="second>2</div>
</div>
//example: use 0 or -int
$('#controller').insertAtIndex(0,'<div id="new">new</div>');
<div id="controller">
<div id="new">new</div>
<div id="first">1</div>
<div id="second>2</div>
</div>
//example: insert at any index
$('#controller').insertAtIndex(1,'<div id="new">new</div>');
<div id="controller">
<div id="first">1</div>
<div id="new">new</div>
<div id="second>2</div>
</div>
//example: handles out of range index by appending
$('#controller').insertAtIndex(2,'<div id="new">new</div>');
<div id="controller">
<div id="first">1</div>
<div id="second>2</div>
<div id="new">new</div>
</div>
/**!
* jQuery insertAtIndex
* project-site: https://github.com/oberlinkwebdev/jQuery.insertAtIndex
* @author: Jesse Oberlin
* @version 1.0
* Copyright 2012, Jesse Oberlin
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function ($) {
$.fn.insertAtIndex = function(index,selector){
var opts = $.extend({
index: 0,
selector: '<div/>'
}, {index: index, selector: selector});
return this.each(function() {
var p = $(this);
var i = ($.isNumeric(opts.index) ? parseInt(opts.index) : 0);
if(i <= 0)
p.prepend(opts.selector);
else if( i > p.children().length-1 )
p.append(opts.selector);
else
p.children().eq(i).before(opts.selector);
});
};
})( jQuery );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3562493
复制相关文章
相似问题