面试题:获取大量数据中某一条的index
提问:
群里分享了一个面试题:页面里有很多条数据,怎么知道这条数据的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的更多相关文章
- [MSSQL]找出一天数据中从第一条数据开始每累加1小时的数据
用Sql Server找出一天数据中从第一条数据开始每累加1小时的数据 -- ============================================= -- Author: Alle ...
- [置顶] 获取网络数据中的数组显示成ListView的简单流程
首先说一下 这是我自己的个人笔记,如果想看看,不用看细节,可以看流程. 定义一个线程池 ExecutorService pool = Executors.newFixedThreadPool(15) ...
- Ajax异步获取html数据中包含js方法无效的解决方法
页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?met ...
- Sqlserver 如何获取每组中的第一条记录
在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属于不同的方面.功能下面,从数据库的术语来说,就是查找出每组中的一条数据. 例子 我们要从上面获得的有效 ...
- 随机获取Mysql数据表的一条或多条记录
随机获得Mysql数据表的一条或多条记录有很多方法,下面我就以users(userId,userName,password......)表(有一百多万条记录)为例,对比讲解下几个方法效率问题: sel ...
- sqlserver -- 学习笔记(七)获取同组数据的前两条记录
不啰嗦,直接上图,大概实现效果如下: 有上面这样一份数据,将他们按照userAccount和submitTime进行分组,然后提前每组数据的前两条记录 提取后数据如下: 实现的SQL如下: selec ...
- linq中分组查询而且获取每个分组中的第一条记录,数据用于分页绑定
LINQ分组取出第一条数据 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: I ...
- JsonPath如何获取JSON数据中的值
场景: 发送接口请求后,得到请求结果值是Json数据, 需要从Json数据信息中提取字段值. 响应值字符与字符之间有空格,导致用正则表达式方法提取比较麻烦,于是用java的JsonPath方法提取快速 ...
- Java如何获取JSON数据中的值
场景:在接口自动化场景中,下个接口发送的请求参数,依赖上个接口请求结果中的值.需要将获取值作为全局参数引用. import java.io.File; import java.io.FileInput ...
随机推荐
- web安全:sql 注入
sql注入获取webshell寻找sql注入页面,操作数据库的地方向网站写入sql语句' union select 1,2, '<?php system($_GET["cmd" ...
- jdk8新特性之lambda expressions
本文分两部分: 语法简单说明 lambda的使用 注:这两部分内容均以类+注释的方式进行说明,并且内容均来自官方教程(https://docs.oracle.com/javase/tutorial/j ...
- js 比较日期大小
//1获取当前时间 var curTime = new Date(); //2把字符串格式转换为日期类 var startTime = new Date(Date.parse(kc.begintime ...
- XJOI网上同步测试DAY14 T3
思路:tarjan把桥找出来,然后缩点,注意这里的缩点是:如果两个点之间的连边不是桥,那么就把他们缩起来,然后用一个lct维护,对于每个询问,如果官道连接的是两个联通块的话,就把他们连起来,否则我们就 ...
- GitHub 如何基於 Node.js 和 Chromium 開發 Atom?
看到回答里, 多数都没有回答到点子上, 还有些给了非常主观的意见而没有给出实际结论和分析过程. 题主的问题有四个: 1. Github 如何基于 Node.js 和 Chromium 开发 Atom? ...
- IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的, ...
- 优化大型复杂SQL
with aa as (select a.agmt_id, sum(c.acct_bal) as card_bal, --借记卡期末存款余额 a.card_open_org, a.OPEN_DATE, ...
- 关于我的FGC的OAuth2.0认证。
这个名字估计很冷门,估计不会有人看到吧,我猜测的. (阅读以下全文之前请先搞定翻^#$%@#墙这件事.昨天看了一个笑话说墙之父方校长说自己有六个VPN账号,只是为了测试自己的墙好用还是VPN好用.哈哈 ...
- JDK、JRE和JVM的区别与联系
首先来说一下JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK). JDK是整个JAVA的核心,包括了Java运行环境(Java Runtime E ...
- 深入理解linux网络技术内幕读书笔记(十)--帧的接收
Table of Contents 1 概述 1.1 帧接收的中断处理 2 设备的开启与关闭 3 队列 4 通知内核帧已接收:NAPI和netif_rx 4.1 NAPI简介 4.1.1 NAPI优点 ...