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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
vue实现折线图 可按时间查询
Aug 21 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 csv操作类代码
2009/12/14 PHP
php URL验证正则表达式
2011/07/19 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python3.6简单操作Mysql数据库
2017/09/12 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python SocketServer源码深入解读
2019/09/17 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
静心口服夜广告词
2014/03/20 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
运动会标语
2014/06/21 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
党支部对转正的意见
2015/06/02 职场文书
期中考试后的感想
2015/08/07 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript