javascript - 根据 id 获取自定义属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3943652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript - get custom attribute based on an id
提问by robert
How can I find the seq number given the id in this example?
在这个例子中，我如何找到给定 id 的序列号？
<table>
<tr class="row_header thin_border">
</tr><tr id="id33192010101533333" seq="2">
<td>20101015</td>
<td>600</td>
<td>730</td>
<td><a href="#" onclick="deleteActivity(3319,20101015,1);">Click</a></td>
<td><a href="#" onclick='selectEditActivity("id3319201010153333");'>Click</a></td>
</tr>
<tr id="id3319201010151111" seq="3">
<td>20101015</td>
<td>600</td>
<td>730</td>
<td><a href="#" onclick="deleteActivity(3319,20101015,1);"> <img src="/bbhtml/img/deleteAction.png"></a></td>
<td><a href="#" onclick='selectEditActivity("id3319201010151111");'><img src="/bbhtml/img/editAction.png"></a></td>
</tr>
<table>
<script>
function selectEditActivity(pass_id){
alert("seq# =:" + ???)
}
</script>
回答by zod
try this
尝试这个
var id = document.getElementById("divId").getAttribute("attributeId");
回答by Ivo Wetzel
Retrieve the DOM element and then get the seqattribute:
检索 DOM 元素，然后获取seq属性：
document.getElementById(id).getAttribute('seq'); // note: this will return a string, and getElementById might return null in case there is no element with the given id.
回答by John Slegers
How to get an attribute based on an id
如何根据id获取属性
With jQuery :
使用 jQuery ：
var seq = $('#id33192010101533333').attr("seq");
Without jQuery :
没有 jQuery ：
vvar seq = document.getElementById("id3319201010151111").getAttribute("seq");
You can try both of them at this Fiddle.
你可以在这个 Fiddle尝试这两种方法。
Both options should work in any browser!
这两个选项应该适用于任何浏览器！
What you really want
你真正想要的
First of all, it's better to name your custom attribute data-seqinstead of seq. The HTML5 standard allows custom elements but only considers them valid when their name starts with data-.
首先，最好命名您的自定义属性data-seq而不是seq. HTML5 标准允许自定义元素，但仅当它们的名称以data-.
Also, it's not a good idea to put your click handlers directly in your CSS. It's better to use the classproperty or some custom data-actionproperty with a value like editor deleteand then attach an event handler when you finish loading your page. Then, look at the first ancestor that has a data-seqproperty and get that property.
此外，将点击处理程序直接放在 CSS 中也不是一个好主意。最好使用class属性或某些data-action具有类似edit或值的自定义属性，delete然后在完成页面加载后附加事件处理程序。然后，查看具有data-seq属性的第一个祖先并获取该属性。
As one demo says more than a thousand words, here's a demo :
正如一个演示所说的一千多字，这是一个演示：
var list = document.querySelectorAll('[data-action="delete"]');
for (var i = 0; i < list.length; ++i) {
list[i].addEventListener("click", function(e){
alert('delete ' + e.target.closest('[data-seq]').getAttribute('data-seq'));
});
}
var list = document.querySelectorAll('[data-action="edit"]');
for (var i = 0; i < list.length; ++i) {
list[i].addEventListener("click", function(e){
alert('edit ' + e.target.closest('[data-seq]').getAttribute('data-seq'));
});
}table, td {
border : 1px solid #333;
}
td {
padding : 10px;
}<table>
<tr class="row_header thin_border"></tr>
<tr id="id33192010101533333" data-seq="2">
<td>20101015</td>
<td>600</td>
<td>730</td>
<td><a href="#" data-action="delete">Click</a></td>
<td><a href="#" data-action='edit'>Click</a></td>
</tr>
<tr id="id3319201010151111" data-seq="3">
<td>20101015</td>
<td>600</td>
<td>730</td>
<td><a href="#" data-action="delete"> <img src="https://i.stack.imgur.com/mRsBv.png?s=64&g=1"></a></td>
<td><a href="#" data-action='edit'><img src="https://i.stack.imgur.com/mRsBv.png?s=64&g=1"></a></td>
</tr>
<table>Or, if you prefer the jQuery way, you can replace the JavaScript code with the following (much simpler) code :
或者，如果您更喜欢 jQuery 方式，您可以用以下（更简单的）代码替换 JavaScript 代码：
$('[data-action="delete"]').click(function(e){
alert('delete ' + $(this).closest('[data-seq]').data('seq'));
});
$('[data-action="edit"]').click(function(e){
alert('edit ' + $(this).closest('[data-seq]').data('seq'));
});
See also this Fiddleand this Fiddlefor the same demo on JSFiddle, respectively without and with jQuery.
另请参阅此 Fiddle和此 Fiddle以获取有关 JSFiddle 的相同演示，分别不使用 jQuery 和使用 jQuery。
回答by epascarello
You want to use objRef.getAttribute('seq')or plan old dot notation objRef.seq
您想使用objRef.getAttribute('seq')或计划旧点表示法objRef.seq
