怎么使用jquery判断一个页面中某个元素是否为第一个

如何使用jquery判断一个页面中某个元素是否为第一个？
比如，我有这么一个页面
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
如何判断排行为1的a元素是红色背景，其余的a元素为黑色背景呢？
我是新手，自己写的太过繁琐，如下：
<script>
$(".a").css({"background":"#f00"});
$(".a").eq(0).css({"background":"#000"});
</script>
求教，有没有更好的写法呢？
------解决思路----------------------

$(".a").each(function(index){

	var _this = $(this);

	//index是匹配到的元素的顺序，从0开始。

	if(index == 0){

		_this.css({"background":"#000"});

	}else{

		_this.css({"background":"#f00"});

	}

});

感觉，这也没有什么说效率最好的方法啊

比如你如果要查找第一个符合一定条件的元素的话，也可以使用下面的方法：

$(".a").each(function(){

	$(this).addClass("red");


	//这里必须要返回一个false，那么就只会对第一个元素进行操作

	//不会对最后的元素再操作了。

//这里，在判断一个条件，当条件第一次成立时，执行一个操作，并返回false

//那么其他的就不会再执行了。

	return false;

})

还有一个就是，如果对一组元素进行操作的话，最好是缓存一下，比如你代码中，两行代码使用了$(".a")的选择，这个时候，最好还是定义一个变量，暂时保存一下，比如这样：

var a = $(".a");

a.css({"background":"#f00"});

a.eq(0).css({"background":"#000"});


//为什么这么写，因为你每用一次$选择器，获取到的集合，都需要重新获取的

//这样就会花费时间去重新再页面获取符合要求的元素。


console.log($(".a") == $(".a")); //false

//虽然，上面这两个的结果是相同的，但他们却不相等

//所以，是重新选择的，所以缓存一下最好

//现在选择器还不算复杂，如果复杂了，就会比较占用时间了。

仅供参考。
------解决思路----------------------



$(".a").each(function(){

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

       if(a==0){

            $(this).css("background","#f00");

       }else{

            $(this).css("background","#000");

       }

})

怎么使用jquery判断一个页面中某个元素是否为第一个

相关推荐