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 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
JavaScript实现缓动动画
Nov 25 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+ajax实现异步上传文件或图片功能
2017/07/18 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解Angular5 服务端渲染实战
2018/01/04 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
对Python w和w+权限的区别详解
2019/01/23 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python 面向对象部分知识点小结
2020/03/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
园长自我鉴定
2013/10/06 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
django上传文件的三种方式
2021/04/29 Python