Home > Article > Web Front-end > To add important custom information to div elements, should I use id, class, name or others? _html/css_WEB-ITnose
To add important custom information to div elements, should I use id, class, name or others? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:371177browse
For example, there are 50 props in a user's shopping cart in a web mall. Each prop is a div. The prop id needs to be added to the attributes of each div element as an important custom information (to facilitate jquery captures at any time), for example, the value of this attribute is item-123456, then should I define the id, class or name as item-123456? Or is there a better way?
Supplement 1: No more than one piece of similar custom information will be added to the same element, because the so-called custom information is mainly the id of a certain concept in the web application
Supplement 2: It is assumed that two ids may appear The same props are separated into two products instead of stacked and displayed in one div
1. If ID is used, it will lead to duplicate IDs; moreover, there can only be one ID, in some practical examples You may need to add this custom information to an element with an existing ID, but there is no way to add it
2. If you use class, the prop div itself may have several class attributes, such as 'item', 'selected' Wait, if you add 'item-123456', it seems that the current js jquery is not convenient to obtain the id value of the item (i.e. 123456)
3. If you use name, I don’t know whether it is safe and stable. I always feel that name is input-specific. Enjoy attributes
4. Or there are other better solutions
Please give me some advice, thank you!
Reply to discussion (solution)
Use attributes, data-
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="item_1" itemId="item-123456"></div> <script> // 给标签设置自定义属性 // 参考 JavaScript权威指南_122_第15章_脚本化文档_15.4-属性-获取和设置非标准HTML属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753659 var item_1 = document.getElementById( "item_1" ); console.info( item_1.getAttribute( "itemId" ) ); </script> <div id="item_2" data-item-id="item-123456"></div> <script> // HTML5 的 data-* 自定义属性 // 参考 JavaScript权威指南_123_第15章_脚本化文档_15.4-属性-数据集属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753693 var item_2 = document.getElementById( "item_2" ); console.info( item_2.dataset.itemId ); </script></body></html>