关于js遍历节点并赋值编号
本帖最后由 zgj901528 于 2013-11-26 15:40:38 编辑
<div>
<div class="typecode1">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode2">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode3">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode4">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode5">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode6">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
</div>
我想统计当前页面所有class="imge_number"的个数，然后给它加上编号。
第一个<div class="imge_number"></div>显示1.。依次排序 js
[解决办法]
jquery方法
$(".imge_number").each(function(i){
$(this).text(i+1);
})
[解决办法]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="button" value="xx" id="btn" />
<div>
<div class="typecode1">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode2">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode3">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode4">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode5">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
<div class="typecode6">
<div class="testtype">
<div class="imge_number"></div>
</div>
</div>
</div>
<script>
$("#btn").click(function(){
var count;
$(".imge_number").each(function(i){
$(".imge_number").eq(i).text(i+1);
});
count = $(".imge_number").length;
alert(count);
});
</script>
</body>
</html>
[解决办法]
能用原生js就用原生的吧：
var allDivs,divs;
if(document.getElementsByClassName){
divs=document.getElementsByClassName('imge_number');
}else{
allDivs=document.getElementsByTagName('div'),divs=[];
for(var j=0;j<allDivs.length;j++){
//判断className是为了兼容IE6
if(allDivs[j].getAttribute('class')==='imge_number'
[解决办法]
allDivs[j].getAttribute('className')==='imge_number'){
divs.push(allDivs[j])
}
}
};
for(var i=0;i<divs.length;i++){
divs[i].innerHTML=i+1;
};
[解决办法]
这东西出来就有序号的。不用自己搞这么麻烦。
var $a = document.querySelectorAll(".aa");[解决办法]
1、JQ选择器过去对象
$('.classname') //获取说有class为 classname的对象
2、赋编号
遍历对象
恩 楼上有答案了
[解决办法]
$(".imge_number").each(function(i){
$(this).html(i+1);
})