insertAfter()方法

DOM中提供了insertBefore()方法,但是却未曾提供insertAfter()方法,找资料找到一个比较好的方法

/**
	新增一个元素到现有元素的后面
	@param  newElement:新增元素节点
	@param  targetElement:现有元素节点
**/
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;  //获取父元素节点
	if( parent.lastChild == targetElement){		//为最后一个元素,只需插入子元素
		parent.appendChild(newElement);
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling);	
	}
}


感谢提供更详细的信息。根据您的描述,我了解到您需要在使用jQuery的insertAfter方法移动每一列时,更新每一列的索引信息。以下是一份可能实现该功能的代码示例: ```javascript $(function() { var startIndex; $(".sortable").sortable({ start: function(event, ui) { startIndex = ui.item.index(); }, update: function(event, ui) { var endIndex = ui.item.index(); var column = ui.item.closest('.column'); var columns = column.closest('.row').find('.column'); columns.each(function() { var col = $(this); var index = col.index(); col.find('.sortable li').each(function() { var item = $(this); var oldIndex = item.data('index'); var newIndex = oldIndex; if (startIndex < endIndex && index === column.index()) { if (oldIndex > startIndex && oldIndex <= endIndex) { newIndex = oldIndex - 1; } } else if (startIndex > endIndex && index === column.index()) { if (oldIndex >= endIndex && oldIndex < startIndex) { newIndex = oldIndex + 1; } } else if (index < column.index()) { newIndex = oldIndex + 1; } else if (index > column.index()) { newIndex = oldIndex - 1; } item.data('index', newIndex); item.attr('data-index', newIndex); }); }); } }); }); ``` 这段代码使用了jQuery的sortable方法来实现拖拽排序功能,并在start和update事件中添加了对索引信息的更新。具体来说,start事件用于获取当前拖动的item的起始索引,而update事件则用于在重新排列每一列位置的同时更新每一列的索引信息。在update事件中,我们首先获取当前拖动的item的结束索引,然后遍历每一列,对每个item的索引信息进行更新。 更新索引信息的逻辑比较复杂,但可以总结为以下几个步骤: 1. 遍历每一列,并遍历每个item; 2. 获取当前item的原始索引(即拖拽前的索引); 3. 根据拖拽前后的位置关系,更新item的新索引; 4. 更新item的data-index属性和索引值。 需要注意的是,以上代码仅供参考,具体实现可能因具体情况而异,您需要根据自己的需求进行相应调整和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值