提问:

群里分享了一个面试题:页面里有很多条数据,怎么知道这条数据的index,并且不使用循环?

分析:

如果在数组里,直接用indexOf,但对于对象会比较麻烦。

在页面上,不使用循环的话,可以用定位来查询。

比如一个很整齐的列表:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getIndex</title>
<style>
ul {
position: relative;
}
li {
height: 40px;
line-height: 40px;
font-size: 30px;
text-indent: 1em;
border: 1px solid #666;
margin-bottom: -1px;
}
</style>
</head>
<body>
<ul id="ul">
li{$}*1000
</ul>
<script>
ul.onclick=function(e){
var t=e.target;
alert(t.offsetTop/(t.offsetHeight-1)); // -1 因为margin-bottom为-1
}
</script>
</body>
</html>

li那里用的emmet写法,每点击一次,即可弹出li对应的index值,前提是每个li都是一样的高度。

也可以扩展成一个整齐的表格,比如li的width给定,然后设置float:left,可以得到行数和列数,然后求出对应的index。

面试题:获取大量数据中某一条的index的更多相关文章

  1. [MSSQL]找出一天数据中从第一条数据开始每累加1小时的数据

    用Sql Server找出一天数据中从第一条数据开始每累加1小时的数据 -- ============================================= -- Author: Alle ...

  2. [置顶] 获取网络数据中的数组显示成ListView的简单流程

    首先说一下  这是我自己的个人笔记,如果想看看,不用看细节,可以看流程. 定义一个线程池 ExecutorService pool = Executors.newFixedThreadPool(15) ...

  3. Ajax异步获取html数据中包含js方法无效的解决方法

    页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?met ...

  4. Sqlserver 如何获取每组中的第一条记录

    在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属于不同的方面.功能下面,从数据库的术语来说,就是查找出每组中的一条数据. 例子 我们要从上面获得的有效 ...

  5. 随机获取Mysql数据表的一条或多条记录

    随机获得Mysql数据表的一条或多条记录有很多方法,下面我就以users(userId,userName,password......)表(有一百多万条记录)为例,对比讲解下几个方法效率问题: sel ...

  6. sqlserver -- 学习笔记(七)获取同组数据的前两条记录

    不啰嗦,直接上图,大概实现效果如下: 有上面这样一份数据,将他们按照userAccount和submitTime进行分组,然后提前每组数据的前两条记录 提取后数据如下: 实现的SQL如下: selec ...

  7. linq中分组查询而且获取每个分组中的第一条记录,数据用于分页绑定

    LINQ分组取出第一条数据 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: I ...

  8. JsonPath如何获取JSON数据中的值

    场景: 发送接口请求后,得到请求结果值是Json数据, 需要从Json数据信息中提取字段值. 响应值字符与字符之间有空格,导致用正则表达式方法提取比较麻烦,于是用java的JsonPath方法提取快速 ...

  9. Java如何获取JSON数据中的值

    场景:在接口自动化场景中,下个接口发送的请求参数,依赖上个接口请求结果中的值.需要将获取值作为全局参数引用. import java.io.File; import java.io.FileInput ...

随机推荐

  1. spark 监控--WebUi、Metrics System

    Spark 监控相关的部分有WebUi 及 Metrics System; WebUi用于展示Spark 资源状态.Metrics System 整合的指标信息. Ui相关流程 Spark集群启动之后 ...

  2. 51单片机C51毫秒级(ms)精确延时

    如下程序能实现ms毫秒级的比较精确的延时 void Delayms(unsigned int n) { unsigned int i,j; ;j--) ;i>;i--); } 用keil可以看出 ...

  3. Microsoft Visual Studio 6.0 Enterprise Edition

    我们的老古董啊  啊啊啊 啊啊 <Microsoft Visual Studio 6.0 Enterprise Edition>(完整9CD,带中文MSDN&   <Micr ...

  4. 【转】ipad死机了,无法退出,也无法关机,怎么办

    原文网址:http://zhidao.baidu.com/link?url=oTz6J78hmtCAKddhwu1ITUiPmLnVJIaA_v_0dZblPaIJUhuMdyTCdS6H2737GX ...

  5. 【转】Everything中文绿色版在Win7/8用不了?

    原文网址:http://pcedu.pconline.com.cn/472/4727542.html 用过Everything的朋友应该都知道,Everything有两个版本,一个是安装版,另一个是E ...

  6. delphi7开发webservice部属在apache服务器中 转

    delphi7开发webservice部属在apache服务器中 delphi7 webservice apache 用Delphi7开发Web Service程序,并把服务程序放在apache We ...

  7. BIND9的架构与机制笔记1

    BIND9采用的是事件驱动的机制来工作,而事件的源头则是IO,IO在linux使用的EPOLL的边缘触发模式. 本篇说的是epoll,BIND9如果创建了watcher线程(宏USE_WATCHER_ ...

  8. HDU-1869六度分离

    Problem Description 1967 年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不 ...

  9. python+mysql数据库的简单操作

    最近接了一个任务,测试某项类似于收益情况报表的功能,因计算公式复杂,单纯手算过于复杂,所以想到写成脚本 根据python的分治原则,先整了几个函数用于实现计算逻辑,后发现数据输入过于繁琐,所以决定使用 ...

  10. Wish | IT桔子

    Wish | IT桔子 Wish www.wish.com   认领 关注 分享