jquery插入兄弟节点的操作方法


Posted in Javascript onDecember 07, 2016

功能:插入指定元素到父元素的第一个位置(最左边)

实例

$self.prepend($selectLi);

解释

self是selectLi的父元素,把self放在selectLi的最前面(最左边),

移动的是selectLi,

append

功能:插入指定元素到父元素的最后面(最右边)

after

实例

$firstLi.after($selectLi);

解释

把selectLi放在firstLi的后面(右边),

移动的是selectLi

注意:selectLi和firstLi 是兄弟节点

next

功能:获取下一个兄弟节点,

与之功能相反的是prev

实例

while($selectLiYears>firstLiYears){
      $firstLi=$firstLi.next();
      hasExpandClicked=true;
      firstLiYears=$firstLi.data('years');
    }

解释

获取下一个兄弟节点

获取指定索引的子元素

实例

 

var $selectLi=$self.find('li:nth-child('+(srcIndex)+')');
var $firstLi=$self.find('li:first');
$("p:nth-child(3)")

 解释

:first表示获取第一个元素,
:last表示获取最后一个元素,
nth-child(2)表示获取第2个元素

以上这篇jquery插入兄弟节点的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 #Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 #Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 #Javascript
Bootstrap风格的WPF样式
Dec 07 #Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 #Javascript
详解ES6中的let命令
Apr 05 #Javascript
You might like
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python之字典对象的几种创建方法
2020/09/30 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
建议书怎么写
2014/03/12 职场文书
最常使用的求职信
2014/05/25 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
家长会后的感想
2015/08/11 职场文书
2016党校学习心得体会
2016/01/07 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
python区块链实现简版工作量证明
2022/05/25 Python