$(selector).index()获得第一个匹配元素相对于其同胞元素的 index 位置
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(".newsTab dd:first-child").addClass("hover"); $(".newsList dd:first-child").show(); (function(){ var _left = $(".newsTab dd.hover").position().left; //alert(_left) $(".newsTab span").css({left: _left}); $(".newsTab dd").each(function(index, el) { $(this).click(function(event) { if (!$(this).hasClass('hover')) { $(this).addClass('hover').siblings().removeClass('hover') var _left2 = $(this).position().left; $(".newsTab span").stop(true).animate({left: _left2}, 500); $(".newsList dd").hide(); $(".newsList dd").eq($(".newsTab dd.hover").index()).show(); }; }); }); }()) |
不懂装懂,帮朋友修改一个JS效果(点击后不显示同胞元素),JQ方法功能也是现查的手册,测试index()返回值是-1,这一定是不正确了。
结果就是一阵的百度搜索,在开源中国的一篇文章中得到了启发:
$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
修改为
$(".newsList dd").eq($(".newsTab dd").index($(".hover"))).show();
解释:
$(“.newsTab dd”)表示找到newsTab类下的所有的dd,返回一个dd的数组的对象;
后面的.index($(“.hover”))表示返回数组对象中的class为hover的对象的坐标。