关于js遍历节点并赋值编号解决思路

2013-12-15

关于js遍历节点并赋值编号本帖最后由 zgj901528 于 2013-11-26 15:40:38 编辑divdiv classtypecode1

关于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);
})

热点排行

JavaScript

关于js遍历节点并赋值编号解决思路