提问:

群里分享了一个面试题:页面里有很多条数据,怎么知道这条数据的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. web安全:sql 注入

    sql注入获取webshell寻找sql注入页面,操作数据库的地方向网站写入sql语句' union select 1,2, '<?php system($_GET["cmd" ...

  2. jdk8新特性之lambda expressions

    本文分两部分: 语法简单说明 lambda的使用 注:这两部分内容均以类+注释的方式进行说明,并且内容均来自官方教程(https://docs.oracle.com/javase/tutorial/j ...

  3. js 比较日期大小

    //1获取当前时间 var curTime = new Date(); //2把字符串格式转换为日期类 var startTime = new Date(Date.parse(kc.begintime ...

  4. XJOI网上同步测试DAY14 T3

    思路:tarjan把桥找出来,然后缩点,注意这里的缩点是:如果两个点之间的连边不是桥,那么就把他们缩起来,然后用一个lct维护,对于每个询问,如果官道连接的是两个联通块的话,就把他们连起来,否则我们就 ...

  5. GitHub 如何基於 Node.js 和 Chromium 開發 Atom?

    看到回答里, 多数都没有回答到点子上, 还有些给了非常主观的意见而没有给出实际结论和分析过程. 题主的问题有四个: 1. Github 如何基于 Node.js 和 Chromium 开发 Atom? ...

  6. IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示

    1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的, ...

  7. 优化大型复杂SQL

    with aa as (select a.agmt_id, sum(c.acct_bal) as card_bal, --借记卡期末存款余额 a.card_open_org, a.OPEN_DATE, ...

  8. 关于我的FGC的OAuth2.0认证。

    这个名字估计很冷门,估计不会有人看到吧,我猜测的. (阅读以下全文之前请先搞定翻^#$%@#墙这件事.昨天看了一个笑话说墙之父方校长说自己有六个VPN账号,只是为了测试自己的墙好用还是VPN好用.哈哈 ...

  9. JDK、JRE和JVM的区别与联系

    首先来说一下JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK). JDK是整个JAVA的核心,包括了Java运行环境(Java Runtime E ...

  10. 深入理解linux网络技术内幕读书笔记(十)--帧的接收

    Table of Contents 1 概述 1.1 帧接收的中断处理 2 设备的开启与关闭 3 队列 4 通知内核帧已接收:NAPI和netif_rx 4.1 NAPI简介 4.1.1 NAPI优点 ...