html中怎样获取子元素的索引位置
jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值,
注意:索引值是从0开始计数的。
获得当前元素的索引值可用click事件触发
1 $(selector).click(function() {
2 num = $(this).index();
3 }
selector
确定查询的选择器
1 $("ul")
2 .append("<li>" + $("ul").selector + "</li>")
3 .append("<li>" + $("ul li").selector + "</li>")
4 .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果
1 ul
2 ul li
3 div#foo ul:not([class])
jquery获取元素索引值index()方法:
jquery的index()方法 搜索匹配的元素,
并返回相应元素的索引值,从0开始计数。
1、如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
2、如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
3、如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。
4、如果找不到匹配的元素,则返回-1。
1
2 <ul>
3 <li id="foo">foo</li>
4 <li id="bar">bar</li>
5 <li id="baz">baz</li>
6 </ul>
7
8 $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
9 $('li').index($('#bar')); //1,传递一个jQuery对象
10 $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
11 $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
12 $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
jQuery :gt() 选择器
实例
选择前 4 个之后的所有 <tr> 元素:
:gt() 选择器选取 index 值大于指定数字的元素。
index 值从 0 开始。
最常见的用法:与其他选择器一起使用,选取指定组合中特定序号之后的元素(如上面的实例)。
提示:请使用 :lt selector 来选取 index 值小于指定数字的元素。
语法:
$(":gt(index)")
jQuery :lt() 选择器
实例
选取前 4 个 <tr> 元素:
定义和用法
:lt() 选择器选取 index 值小于指定数字的元素。
index 值从 0 开始。
最常见的用法:与其他选择器一起使用,选取指定组合中特定序号之前的元素(如上面的实例)。
提示:请使用 :gt selector 来选取 index 值大于指定数字的元素。
语法
![](https://img2020.cnblogs.com/blog/2090080/202103/2090080-20210331120722578-733723198.png)
jquery获取元素索引值index()示例
1
2 //用于二级或者三级联动
3
4 <div id="nav">
5 <a href="http://www.51xuediannao.com/">建站素材</a>
6 <a href="http://www.51xuediannao.com/">jquery特效</a>
7 <a href="http://www.51xuediannao.com/">懒人主机</a>
8 <a href="http://www.51xuediannao.com/qd63/">前端路上</a>
9 </div>
10
11 $("#nav a").click(function(){
12
13 //四个经典的用法
14 var index1 = $("#nav a").index(this);
15 var index2 = $("#nav a").index($(this));
16 var index3 = $(this).index()
17 var index3 = $(this).index("a")
18 alert(index3);
19 return false;
20 });
jQuery中this与$(this)的区别
1 $("#textbox").hover(
2 function() {
3 this.title = "Test";
4 },
5 fucntion() {
6 this.title = "OK”;
7 }
8 );
这里的this其实是一个html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成(this)就不是那回事了,报Error了。this与(this)的区别在此。
1 \\Error Code:
2 $("#textbox").hover(
3 function() {
4 $(this).title = "Test";
5 },
6 function() {
7 $(this).title = "OK";
8 }
9 );
$()这是jQuery的一个函数,也是最核心最基本的函数
功能一:传入一个选择器字符串,获得这个选择器对应的dom内容,
保存在[ ]中,也就是俗称的jQuery对象。例如
('#id')(‘.class’) $(‘tag’)
功能二:传入一个匿名函数,例如
$(function(){})//这个匿名函数在网页载入完成后开始执行
功能三:将JavaScript对象包装成为jQuery对象。例如
$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))
1 var node = $('#id');
2 node.click(function(){
3 this.css('display','block'); //报错 this是一个html元素,不是jquery对象,因此this不能调用jquery 的css()方法
4 $(this).css(); //正确 $(this)是一个jquery对象,不是html元素,可以用css()方法
5 this.style.display = 'block'; //正确 this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法,
6 //但是可以用javascript来更改style属性
7
8});
如果你只是通过jQ对象获取简单的dom元素的属性比如id,那么你完全可以使用js原生的方法:
1 $(‘#someAnchor’).click(function() {
2
3 alert( this.id );
4
5 });
Tomorrow the birds will sing.
好看请赞,养成习惯:) 本文来自博客园,作者:靠谱杨, 转载请注明原文链接:https://www.cnblogs.com/rainbow-1/p/14600883.html
欢迎来我的51CTO主页踩一踩~ 我的51CTO博客
文章内出现的订阅h统一搜索:靠谱杨阅读人生