文章目錄

前天有人有问这样一个问题: 我一个网页里面有好多个前面一张图的结构,然后点击第n个加号会显示第n个子内容,点击第n个减号会隐藏第n个子内容,但是我现在总是不对,我把n弹出来,只要点加号就是0,点减号就是1,这是什么原因呀?


很明显问题出在这一句代码

var n = $(this).index();

只需要将代码改为:

var n = $(.add).index(this);

之所以会犯错主要有两方面原因

  • 不了解jquery中的this
    jquery中有一个很重要的概念叫隐式迭代, 在jquery内部会对调用事件的jquery DOM数组使用 each 方法, 事件函数中的this并不是调用事件的数组而是当前的原生DOM对象
  • 不了解jquery中的index方法
    调用index()会搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
    如果不给 index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
    如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
$(this).index();相当于查找当前对象在同辈元素中的位置, 当然不能满足需求
文章目錄