<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="html/jquery/jquery-2.1.1.min.js"></script>
</head>
<body>
<p class="text">a</p>
<p class="text">a</p>
<p class="text">a</p>
<p class="text">a</p>
</body>
<script>
var texts = $('.text')
texts.each(function(index,element) {
this.css('color','red')
})
</script>
</html>
为什么这段代码会出现Uncaught TypeError: this.css is not a function 这是什么情况啊?
$(this).css(...)
each当中的this并不是jQuery对象,而是原生的DOM,所以没法调用css方法
var texts = $('.text')
texts.each(function(index,element) {
$(this).css('color','red')
});
jQuery存在隐式迭代的功能,这样写即可改写全部的样式
var texts = $('.text')
texts.css('color','red');
在 each()
中的 this
指向的是 普通 dom 對象
,並不是經過 jquery
包裝過的對象,所以你得再次包裝:
$(this).css('color','red')
this
指向的是当前DOM元素,css
方法是jquery
对象才会有的,因此需要将this
转化为Jquery
对象$(this)
this是dom对象,应该用$(this).css
jquery 的所有回调函数内 this 是dom对象,css是jquery对象才有方法
解决办法:
$(this).css...