jquey下eq()的使用注意事项

写在开始的话：

今天在公司路经同事工位，发现在写jquery代码，刚好遇见一个bug，于是驻足看了一会，发现了jq遍历方法中eq()的使用的一个容易犯错的地方。

同事的代码大概意思是这样的：

<div class="hover-div">
			<p>1231</p>
			<p>1231</p>
		</div>

		<div class="hover-div">
			<p>1231</p>
			<p>1231</p>
		</div>

		<div class="hover-div">
			<p>1231</p>
			<p>1231</p>
		</div>

		<div class="hover-div">
			<p>1231</p>
			<p>1231</p>
		</div>

		<div class="hover-div">
			<p>1231</p>
			<p>1231</p>
</div>

	<script type="text/javascript">
		$(".hover-div").find("p").eq(0).css("background-color","red");
	</script>

他是想每行的首个"p"标签，背景颜色变为红色，可是效果是这样

明显效果不对，他当时的代码的想法应该是想着代码的执行顺序是循环着，先取一个'hover_div'，然后取内联元素中的'p'标签。

其实不然，可以打印如下：

console.log($(".hover-div").find("p"));

打印效果：

即，此代码执行过后选取了所有的'p'标签，然后遍历使用eq的时候就会，选取相应的元素，所以方法的理解和选用都是错误的，应该在选择器中使用相应的方法或者如此：

		$(".hover-div").each(function(index, element) {
			$(element).find("p").eq(0).css("background-color", "red");
		});

或者

$(".hover-div p:first-child").css("background-color","red");

   

   

   

友情链接:

技术博客        简书主页