Jquery:有人可以解释一小段代码,或给我一个很好的教程链接吗?

问题描述:

函数(索引)中调用的“索引”部分是什么?事件处理程序?要么?什么?并可能有人向我解释为什么我需要“功能(索引)”的“索引”,我不明白为什么它不会工作,如果我从“功能(索引)”删除“索引”部分Jquery:有人可以解释一小段代码,或给我一个很好的教程链接吗?

$("h2").each( 
    function(index) { 
     $(this).css("z-index", index*2+2); 
    }); 

indexfunctionargument (parameter)

您需要index将值传递给css()函数的值参数/参数。该索引与each()函数的每个“loop”一起递增。

该代码基本上移动元素“向前”的z-index ...更高索引z元素将呈现在较低索引z元素之上。这可能会用于为页面设置动画效果,例如,您有一个div元素(例如)向前移动。

+0

所以如果我没有在“function(index){”中的“索引”,那么脚本不会知道它在什么H2上,因此不知道应该使用哪个z-index?我说的是正确的,还是没有? – 2010-08-21 04:24:04

它看起来像它是逐步增加所有h2元素的z索引n * 2 + 2,这取决于它们在页面中的顺序位置。不确定这样一段代码的目的是什么,但最终的结果将是每个后续的h2标签具有更大的z-索引。

基于该代码,等效串联CSS将是:

<h2 style="z-index: 4" /> 
<h2 style="z-index: 6" /> 
<h2 style="z-index: 8" /> 
<h2 style="z-index: 10" /> 
<h2 style="z-index: 12" />  
... 

指数是一个整数,它的意思是当前对象的该数组中的索引。了解更多关于每个功能在http://api.jquery.com/each/
为了便于理解,你有3个H2标签

<h2>a</h2> 
<h2>b</h2> 
<h2>c</h2> 

然后用$('h2'),有2对象选择匹配 当呼叫$('h2').each(function(index){}) =>

index := 0 for <h2>a</h2> 
index := 1 for <h2>a</h2> 
index := 2 for <h2>a</h2> 
+0

@Band Dao他没有使用通用的jQuery.each()函数,他使用.each()。他的功能文档在http://api.jquery.com/each/。注意它实际上没有说明有关索引的任何事情。我几乎贴了同样的东西,所以不用担心。 – LandonSchropp 2010-08-14 06:03:00

+0

感谢您的更正 – 2010-08-14 06:05:35

此代码通过使用each function from jQuery迭代页面上的所有h2标记。

这些标记是通过使用作为$函数的唯一参数传递的CSS selector来选择的。这个函数还有另外一个名字 - jQuery - 如果你的代码中有jQuery.noConflict();的地方,你会使用这个函数。

传递给此each函数的第一个参数本身就是另一个函数。这个匿名命名的函数将为h2标签集合的每个元素执行。此函数内的index参数是当前迭代的位置。此集合中的第一个元素将具有index0,接下来的1和接下来的2等等。

each$(this)里面的这个匿名函数中,再次使用$函数选择当前迭代的元素。当css$(this)上被调用时,它将一个特定的CSS属性(第一个参数)设置为z-index,作为第二个参数传入的值。


我希望这足够详细,以解释发生了什么。

每个对集合中的每个元素调用给定的函数 - 在这种情况下,每个元素都会调用<h2>元素。函数的索引参数是集合中当前元素的索引 - 将针对索引为0的第一个<h2>以及索引为1的第二个<h2>调用该函数,依此类推。所以这段代码给了第一个z-index为2,第二个为z-index 4,第三个为z-index 6,依此类推。

参见http://api.jquery.com/each/

指数是所有H2标签的阵列中的位置。

因为.each()遍历所有h2标签,所以在DOM中第一个h2的索引为0,第二个h2的索引为1,依此类推。