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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
详解JavaScript作用域 闭包
Jul 29 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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教程 变量定义
2009/10/23 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python tornado修改log输出方式
2019/11/18 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
信息部岗位职责
2013/11/12 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书