在html文档中重复的ID ..如果它们由具有唯一ID的div确定范围，那么它有多糟糕？ [英] Repeated IDs in an html document .. how bad an idea is it if they are scoped by a div with a unique ID?

问题描述

我有一个网页，通过添加到购物篮按钮显示单个待售商品。该页面使用了大量的javascript来允许用户自定义项目。我现在需要修改页面以在同一页面上显示多个类似项目，每个附加项目也可以由用户以相同的方式自定义。 javascript大量使用标记中的id来查找元素并操纵它们以提供客户端项目自定义。

我的第一个想法是允许html标记重复对于每个项目，还允许ID重复自己，但在每个项目标记周围添加一个带有唯一ID的附加div，以分隔重复ID的范围，使重复ID在包含div中唯一。这应该允许javascript保持相对相同，除了对重复ID的任何引用将需要针对特定​​DIV ID确定范围

请记住我想要结果是跨浏览器兼容，IE6-IE9，Firefox 3 +，Chrome，Safari，Opera，这种方法听起来有多明智？某些浏览器是否会禁止重复ID或与它们表现不佳？关于更好的方法或我应该注意的事情的任何建议都会受到欢迎。
谢谢

----------------- addendum ------------ -------------------------------------------------- -

似乎压倒性的共识是，重复ID是一个非常糟糕的主意，因为标准认为id应该是唯一的，尽管有些/大多数浏览器支持它现在，对未来无法保证。我完全同意你的意见。

类方法似乎是从收到的建议中获取的最佳途径，但现在看来旧版浏览器不支持它，特别是IE6和7.有关前进方式的任何建议吗？

----------------- addendum- -------------------------------------------------- -------------

总的来说，getElementsByTagName似乎是最兼容的前进方式，也涵盖了很多移动浏览器。 / p>

感谢您的所有建议。

解决方案

对于这类事情，我通常遍历 childNodes 或使用 getElementsByTagName 和检索到的元素。

 < div id =div_with_id> 
< div> 1< / div> 
< div> 2< / div> 
< div> 3< / div> 
< div> 4< / div> 
< div> 5< / div> 
< / div> 
 
 
< script> 
 
 var div = document.getElementById（div_with_id）; 
 var cNodes = div.getElementsByTagName（div）; 
 
 for（var i = 0，l = cNodes.length; i< l; i ++）{
 console.log（cNodes [i] .innerHTML）; 
} 
 
< / script> 
  

我只在必要时使用 getElementById 事实证明，并非经常发生;）

请记住： getElementsByTagName 获取类型的所有元素，包括元素内的元素。 childNodes 只获得最高级别，但获取元素中的所有内容，包括文本节点。

I have an webpage which shows a single item for sale with an add to basket button. The page makes use of alot of javascript to allow the user to customise the item.I now need to modify the page to show multiples of similar items on the same page, each additional item also customisable in the same way by the user. The javascript makes heavy use of id's in the markup to find elements and manipulate them to provide the client side item customisation.

My 1st thought is to allow the html markup to repeat for each item,also allowing the IDs to repeat themselves but add an additional div with a unique ID around each items markup to separate the scope of the repeated ID's , making the repeated ID's unique within the containing div. This should allow the javascript to stay relatively the same with the exception that any references to repeated ID's will need to be scoped for a particular DIV ID

Bearing in mind I want the outcome to be cross browser compatible , IE6 -IE9 , Firefox 3+ , Chrome, Safari, Opera, how sensible does this approach sound? Will some browsers disallow repeated IDs or behave badly with them? Any advice as to a better approach or things I should look out for would be very welcomed. Thanks

-----------------addendum----------------------------------------------------------------

It seems the overwhelming consensus is that it's a really really bad idea to repeat ID's mostly because the standards say id's should be unique and although some/most browsers support it now , there's no guarantee for the future. I agree with you all on this totally.

The class approach seemed to be the best route to take from the advice received but now it looks like older browsers won't support it, specifically IE6 and 7. Any advice on a way forwards from here?

-----------------addendum----------------------------------------------------------------

On balance getElementsByTagName seems to be the most compatible way forwards , covering a good spectrum of mobile browsers too.

Thanks for all your advice.

解决方案

For this sort of thing, I usually iterate through the childNodes or use getElementsByTagName with the retrieved element.

<div id="div_with_id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>


<script>

    var div = document.getElementById("div_with_id");
    var cNodes = div.getElementsByTagName("div");

    for(var i = 0, l = cNodes.length; i < l; i++) {
        console.log(cNodes[i].innerHTML);
    }

</script>

I use getElementById only when necessary, which it turns out, isn't all that often ;)

Remember: getElementsByTagName gets all elements of a type, including elements within elements. childNodes gets only the top level, but gets everything in the element, including text nodes.

这篇关于在html文档中重复的ID ..如果它们由具有唯一ID的div确定范围，那么它有多糟糕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！