提问:

群里分享了一个面试题:页面里有很多条数据,怎么知道这条数据的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. IE6\ IE7、IE8\9\10和Firefox的hack方式

    #test{color:red;color:red !important;/ Firefox.IE7支持 */_color:red; / IE6支持 */*color:red; / IE6.IE7支持 ...

  2. c++四则运算代码

    //Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  3. 【细说Java】揭开Java的main方法神秘的面纱

    大家都知道,main方法是Java应用程序的入口,其定义格式为: public static void main(String[] args) 可是为什么要这么定义呢?不这样定义可以么?main方法可 ...

  4. Android中几种常用的话框

    1.普通对话框: Builder alert=new AlertDialog.Builder(MainActivity.this); alert.setTitle("提示"); a ...

  5. Hadoop-2.x的源码编译

    由于在Hadoop-2.x中,Apache官网上提供的都是32位版本,如果是生产环境中则需要自行编译64位,编译Hadoop-2.x版本方法如下: 安装编译源码所依赖的底层库 yum install ...

  6. SQL Server error "Xml data type is not supported in distributed queries" and workaround for it

    Recently while working with data migration,got an error while running a following query where Server ...

  7. 新浪微博登陆,获取token

    用WeiboAuthListener获取code 用下面的代码获取token..半成品的sdk真让人捉急. String code = values.getString("code" ...

  8. C++中虚函数的作用是什么?它应该怎么用呢?(转)

    虚函数联系到多态,多态联系到继承.所以本文中都是在继承层次上做文章.没了继承,什么都没得谈. 下面是对C++的虚函数这玩意儿的理解. 一, 什么是虚函数(如果不知道虚函数为何物,但有急切的想知道,那你 ...

  9. SEOer怎样安排一天的工作

    昨天一文谈到seo车型优化恐惧了,一些兄弟果断说,不玩seo.妮子不是吓人的,希望大家好好看清自己如今行业现状,怎样突破下步,如今仅仅剩下竞价和B2B付费平台了吗?每天坚持博客更新,尽管不像那些名博那 ...

  10. (原创)初识cordova(一)

    在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...