如何用jquery获取元素在文档中位置?

大狗狗 2020-07-18 10:40:47
有一个固定大小的容器(div),然后我在其中添加了多个固定大小的子div,我想获取这样一个值:某个子元素距第0号子元素的距离。使用jquery offset或position方法得到的似乎都是子元素距某个父容器上沿的距离(滚动条位置不同,值也不同)。而我所要的值和滚动条位置是无关的。无奈我只好通过累加子元素高度的笨办法来达到目的(.prevAll().each(...)下面代码中没有列出)。还有更好办法吗?下面是我测试代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>

<body>
<div id="title" style="width:100px;height:30px;line-height:30px;text-align:center;border:#aaa solid 1px;background-color:#f5f5f5;"></div><br />
child index :<input type="text" id="index" style='width:40px;'> <button onclick="fun1()">get top (offset , postion)</button><br /><br />
<div id="con" style="width:420px;height:500px;border:#aaa solid 1px;overflow-y:scroll;"></div>

<script>
for(var i=0;i<10;++i){
$("#con").append("<div style='width:380px;height:198px;border:#00f dotted 1px;margin-left:8px;background-color:#f5f5f5;'>"+i+"</div>");
}

function fun1()
{
$("#title").text($("#con").children().eq(parseInt($("#index").val())).offset().top+","+$("#con").children().eq(parseInt($("#index").val())).position().top);
}
</script>
</body>
</html>

...全文
1424 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
大狗狗 2020-07-18
  • 打赏
  • 举报
回复
非常感谢!!
chenrynet 2020-07-18
  • 打赏
  • 举报
回复
高度不固定版本的 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> </head> <body> <div id="title" style="width:100px;height:30px;line-height:30px;text-align:center;border:#aaa solid 1px;background-color:#f5f5f5;"></div><br /> child index :<input type="text" id="index" style='width:40px;'> <button onclick="fun1()">get top (offset , postion)</button><br /><br /> <div id="con" style="width:420px;height:500px;border:#aaa solid 1px;overflow-y:scroll;"></div> <script> for(var i=0;i<10;++i){ $("#con").append("<div style='width:380px;height:198px;border:#00f dotted 1px;margin-left:8px;background-color:#f5f5f5;'>"+i+"</div>"); } var con=document.querySelector("#con"); //获取父级元素 也可以不用这部 var child=con.querySelectorAll('div'); //获取子元素的nodelist function fun1() { var tops=child[1].getBoundingClientRect().top; //第二个元素顶部距离浏览器窗口顶部的距离 可以当做第一个元素的底部位置 var index=document.querySelector('#index').value; //索引值 var mytops=child[index].getBoundingClientRect().top; //第N个元素距离浏览器窗口顶部的距离 console.log(mytops-tops); // $("#title").text($("#con").children().eq(parseInt($("#index").val())).offset().top+","+$("#con").children().eq(parseInt($("#index").val())).position().top); } </script> </body> </html>
chenrynet 2020-07-18
  • 打赏
  • 举报
回复
既然固定大小了 你是不是可以直接用子元素的高度乘以(index-1)
第1章 第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤选择器 使用jQuery属性过滤选择器 使用jQuery元素过滤选择器 使用jQuery表单对象属性过滤选择器 使用jQuery表单过滤选择器 第3章 DOM树状文档 获取元素的属性 设置元素的属性 设置元素的属性 获取或设置元素的内容 获取或设置元素的值 直接设置元素样式值 增加CSS类别 类别切换 动态创建节点元素 动态插入节点方法 动态插入节点方法 复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件hover 切换事件toggle 移除事件unbind 其他事件one 其他事件trigger 文本框的事件应用 列表框事件应用 列表的导航菜单应用 网页选项卡应用 删除记录时的提示效果 第5章 show()与hide()方法 动画效果的show()与hide()方法 toggle()方法 slideDown()与slideUp()方法 slideToggle()方法 fadeIn()和fadeOut()方法 fadeTo()方法 简单的动画 移动位置的动画 队列的动画 动画停止和延时 动画方式浏览图片 第6章 传统的JavaScript方法实现Ajax功能 load()方法实现Ajax功能 getJSON函数获取数据 getScript函数获取数据 get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ContextMenu插件 JQZoom放大镜插件 编写一个对象级别的插件 编写一个类级别的插件 uploadify文件上传插件 第8章 使用draggable插件实现对象的拖曳操作 使用droppable插件实现对象的置放操作 使用sortable插件实现列表表项的拖曳排序操作 使用accordion插件实现区域块的折叠操作 使用datepicker插件实现选择日期的操作一 使用datepicker插件实现选择日期的操作二 使用tabs插件展示选项卡的基本功能 使用dialog插件弹出提示和确定信息对话框 使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()工具函数筛选数组元素 使用$.map()工具函数变更数组元素 使用$.inArray()工具函数搜索数组指定元素位置 使用$.trim()工具函数除掉字符串的空格符 使用$.isEmptyObject()函数检测对象是否为空 使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用jQuery扩展工具函数实现对字符串指定类型的检测< 第10章 在指定的查找范围内获取DOM元素 选择器含有空格符与不含空格符的区别 事件的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data()方法在元素上存取移JSON格式的数据 解决jQuery库先于其他库导入时变量“$”的使用权 解决jQuery库后于其他库导入时变量“$”的使用权 使用子查询优化选择器性能 减少对DOM元素直接操作 DOM对象与jQuery对象的类型转换 第11章 应用案例-聊天室系统 应用案例_图片切割
(题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取最新的EasyUI资源 专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源的说明及出处地址 我花那么多精力制作出来的 你们鼠标点两下就给我转走了还不注明出处 实在是不厚道 本来就是本着分享精神的 为的就是聚集一点人气和提供一个优良的环境来一起学习进步的 请不要抹杀掉我的热情 谢谢 )   时隔4个月之久 EasyUI终于迎来大版本更新了 本次更新内容诸多 除了常规维护外 还新增了3个新组件 都很实用 详细的可以阅读更新说明 里面给了详细的解读 另外 从该版本开始我将会逐步的将EasyUI官方以及第三方较好的插件API整合到API文档 并且会对这些插件做一些简单的Demo实现 存放到配套提供的程序包demo文件夹下 以便大家学习和使用 本期文档将官方提供的所有附加插件的API都整理并存放到Extension节点下了 这些扩展的demo在附带的程序包已经提供 可以用于参考使用 jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement(改进) EasyUI的所有组件已经支持非固定 百分比大小的尺寸设置; menu:添加“showItem” “hideItem”和“resize”方法; menu:基于窗体大小自动调整高度; menu:添加“duration”属性 该属性允许用户自定义隐藏菜单动画的持续时间 以毫秒为单位; validatebox:添加“onBeforeValidate”和“onValidate”事件; combo:从该版本开始combo组件扩展自textbox组件(textbox是1 4新增的组件); combo:添加“panelMinWidth” “panelMaxWidth” “panelMinHeight”和“panelMaxHeight”属性; searchbox:从该版本开始searchbox组件扩展自textbox组件(textbox是1 4新增的组件); tree:添加“getRoot”方法 用于返回通过“nodeEl”参数指定的节点的顶部父节点元素 注意:官网的英文API该函数的说明有误 其说明是none 无参数 实际这里是需要参数的 ; tree:添加“queryParams”属性; datetimebox:添加“spinnerWidth”属性; panel:添加“doLayout”方法 用于控制面板内组件的大小; panel:添加“clear”方法 用于清除面板内的内容; datagrid:允许用户设置百分比宽度的列(该功能真是千呼万唤始出来啊 ); form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单; datetimespinner:该组件是一个日期和时间的微调组件 它允许我们选择一个特定的日期或时间; filebox:filebox 该组件表单元素用于上传文件的文件框工具组件 ">(题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧