优雅的方式获取DOM节点的位置

DOM结构和渲染效果如下:

<div class="card-mod-title cmt-2">
<h4>趋势</h4>
<p>
<a href="javascript:;" class="m-active">小时榜</a>
<a href="javascript:;" class="">日榜</a>
<a href="javascript:;" class="">周榜</a>
</p>
</div>

想实现的功能是点击时间周期Tab签的时候,定义一个全局变量curIndex来区分点击了那个Tab, 比如
点击小时榜的时候,curIndex = 0
点击日榜的时候,curIndex = 1
点击周榜的时候, curIndex = 2

普通的方式实现
一、在点击事件中赋值
点击的时候,需要切换数据,一般都会对应一个点击事件,在事件方法中定义即可。

二、通过高亮class m-active来取

// 这里用jQuery
var curIndex;
var tag = $('.m-active').html();
if (tag == '小时榜') {
    curIndex = 0;
}

优雅的实现方式
通过jQuery的index()方法,获得第一个匹配元素相对于其同胞元素的index位置。

var curIndex = $('.cmt-2 a.m-active').index();

通过jQuery选择器,选取.cmt-2下class=”m-active”的a元素位置。点击这里查看。

突然想起了鸟哥的一条微博:没有Geek精神就别选前端了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注