想要使所有div下的p标签的类名+1.因此采用下列办法:
<div>
<p class="1">1</p>
<p class="2">2</p>
<p class="3">3</p>
<p class="4">4</p>
<p class="5">5</p>
</div>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
var allp=$("div p");
for(var i=0;i<allp.length;i++){
allp[i].attr("class","i+2");
console.log(allp[i].attr("class"));
}
</script>
结果控制台报错:
提示allp[i].attr()
不是一个方法,而attr()
是jq对象的方法,这个报错等于说allp[i]
不是一个jq对象。
参考stackoverflow ,可知$()[i]
返回的的确不是jq对象,而是原生dom对象,无法使用jq方法attr()
。
关于如何判断是jq对象还是dom对象,可以用常用的instanceof
方法判断,也可以用只有jq对象才有的jquery属性结合if语句判断。
那么,如何用jq实现上述功能?
1)转化为jq对象
for(var i=0;i<allp.length;i++){
$(allp[i]).attr("class",i+2);
}
allp[i]
放在$()
中则为jq对象
2).eq(i)
for(var i=0;i<$("div p").length;i++){
$("div p").eq(i).attr("class",i+2) 。
}
这是因为jq collection 对象的eq()
方法将返回以参数值为索引值的单个元素.
3).each遍历
$("div p").each(function(){
$(this).attr("class",$(this).index()+2);
})
当然,因为each()本身可以传参,因此可以写成
$("div p").each(function(i, n){
$(this).attr("class",i+2);
})
其中,i表示index,n表示当前元素(可用this操作)
4).或者更简单的,配合回调函数使用
for(var i=0;i<$("div p").length;i++){
$("div p").attr("class",function(i,n){
n=+2;
})
}
以上是个错误的例子。
var allp=$("div p");
allp.attr("class",function(i,n){
return Number(n)+1;
});
each( )遍历,控制台打印
allp.each(function(){
console.log(this);
});
顺便这里总结下jq对象和dom对象的互相转换。 我们知道,dom对象只能用dom对象自己的方法,jq对象只能用jq对象自己的方法,因此有时候如果jq对象必须使用原生方法时(或者反过来),就需要进行对象转换。
var $div=$(".div"); //jq对象
// 或者加索引值返回dom对象单体
var div=$div[0];
// 调用get()方法返回dom对象单体
var div=$div.get(i);
var div=documnet.getElementsByClassName("div"); //dom对象
// 直接用$()把dom对象给包装起来
var $div=$(div);
// 如果需要,可以用eq()返回jq对象单体
// $div.eq(i);