谁帮我一下ID组的问题要怎么才能解决不能显示一个效果

[ganqi123]

谁帮我一下ID组的问题要怎么才能解决不能显示一个效果
<div id="dhp">1组ID同一个
<ul>
<li><span state="新加"></span></li>
<li><span state="连载至40集"></span></li>
<li><span state="完结"></span></li>
</ul>
</div>
<div id="dhp">2组ID同一个
<ul>
<li><span state="新加"></span></li>
<li><span state="连载至100集"></span></li>
<li><span state="完结"></span></li>
</ul>
</div>

<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;position:relative;}
#dhp{ width:500px; }

#dhp li{ width:100px; height:150px; border:1px solid #ddd; padding:5px; float:left; margin-right:5px}

#dhp span{display:inline-block; width:49px; height:49px; position:absolute;top:5px;right:5px;background:url(dhp-

stats.gif) no-repeat;}

#dhp span.gx{background-position:0 0;}
#dhp span.qj{background-position:0 -49px;}
#dhp span.xj{background-position:0 -98px;}
</style>
<script type="text/javascript">
var dhp = document.getElementById('dhp');
var dhp_1 =dhp.getElementsByTagName('span')
for(var i = 0; i <dhp_1.length;i++){
for(var x = 0; x <= 1000; x++){
var the = dhp_1[i];
state = the.getAttribute('state');
if(state == '新加') the.className = 'xj';
if(state.indexOf('连载至' + [x] +'集') > -1) the.className = 'gx';
if(state == '完结') the.className = 'qj';


}
}
</script>

[泡泡鱼_]

第一：ID不要重复，document.getElementById('dhp')将只能返回第一个div对象
第二：这种状态值，完全可以在后台输出之前进行处理。
第三：你这些状态太凌乱了，可能结构设计上存在问题。应该不至于一个对象会同时存在新加,连载,完结三种状态才是。普通也就是连载和完结两种状态，最多你再额外根据一个上架时间多长以内附加一个新加状态
第三：你如果一定要前端进行处理的话

<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;position:relative;}
#dhp{ width:500px; }

#dhp li{ width:100px; height:150px; border:1px solid #ddd; padding:5px; float:left; margin-right:5px}

#dhp span{display:inline-block; width:49px; height:49px; position:absolute;top:5px;right:5px;background:url(dhp-stats.gif) no-repeat;}

#dhp span.gx{background:red;}
#dhp span.qj{background:green;}
#dhp span.xj{background:blue;}
</style>
<div id="container">
    <div id="dhp">
        <ul>
            <li><span state="新加">1</span></li>
            <li><span state="连载至40集">2</span></li>
            <li><span state="完结">3</span></li>
        </ul>
    </div>
    <div id="dhp">
        <ul>
            <li><span state="新加"></span>1</li>
            <li><span state="连载至100集">2</span></li>
            <li><span state="完结"></span>3</li>
        </ul>
    </div>
</div>

第一种方法：[推荐]将你所有的dhp用一个div包裹起来，然后再获取下面所有的span元素

var dhp = document.getElementById("container");
var child=dhp.getElementsByTagName('span');
for(i = 0; i <child.length;i++){
    var the = child[i];
    for(var k = 0; k <= 1000; k++){
        state = the.getAttribute('state');
        if(state == '新加') the.className = 'xj';
        if(state.indexOf('连载至' + [k] +'集') != -1) the.className = 'gx';
        if(state == '完结') the.className = 'qj';
      }
}

[仅参考]下面这种是一种参考方法，相对于第一种来讲，效率较低。思路就是：扩展了一个兼容IE下根据样式命名来获取对象的方法，然后进行遍历。而且结构设计也需要变更为：

<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;position:relative;}
.dhp{ width:500px; }

.dhp li{ width:100px; height:150px; border:1px solid #ddd; padding:5px; float:left; margin-right:5px}

.dhp span{display:inline-block; width:49px; height:49px; position:absolute;top:5px;right:5px;background:url(dhp-stats.gif) no-repeat;}

.dhp span.gx{background:red;}
.dhp span.qj{background:green;}
.dhp span.xj{background:blue;}
</style>
<div class="dhp">
    <ul>
        <li><span state="新加">1</span></li>
        <li><span state="连载至40集">2</span></li>
        <li><span state="完结">3</span></li>
    </ul>
</div>
<div class="dhp">
    <ul>
        <li><span state="新加"></span>1</li>
        <li><span state="连载至100集">2</span></li>
        <li><span state="完结"></span>3</li>
    </ul>
</div>

<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
function getElementsByClassName(className){
    if(document.getElementByClassName){
        return document.getElementByClassName(className)
    }
    var eles=document.getElementsByTagName("*"),elements=[];
    for(var i=0;i<eles.length;i++){
        var arr=eles[i].className.split(' ');
        if(arr.inArray(className)){
            elements.push(eles[i]);
        }
    }
    return elements;
}

var dhp = getElementsByClassName("dhp");
for(i=0;i<dhp.length;i++){
    var child=dhp[i].getElementsByTagName('span');
    for(j = 0; j <child.length;j++){
        var the = child[j];
        for(var k = 0; k <= 1000; k++){
            state = the.getAttribute('state');
            if(state == '新加') the.className = 'xj';
            if(state.indexOf('连载至' + [k] +'集') != -1) the.className = 'gx';
            if(state == '完结') the.className = 'qj';
          }
    }
}

</script>

呵呵，有点罗嗦了，我权当练手了

[scscms太阳光]

看不懂你想干吗，但你得明白id是不能重复的，必须是唯一的。简单讲：不准重婚！

[泡泡鱼_]

[Quote=引用 2 楼 的回复:]
看不懂你想干吗，但你得明白id是不能重复的，必须是唯一的。简单讲：不准重婚！
[/Quote]
中秋快乐

[licip]

id是不能重复的，你这样设置，效果肯定出不来的。