为什么"this.getAttribute()"返回 null？

Question

我正在处理动态字段，我想将字段排序为JS对象。但是当我调用getAttribute时，它返回null。

这里，q2是我想要打印出来进行测试的ID。它成功地打印出了值(出于某种原因，打印出了它的子值(，但getAttribute为空。

<div class="input-group" data-question-id = nVar id = q2>
----
$( "#qForm" ).submit(function( event ) {
$('#q2 input').each(function () {
console.log(this.value);
console.log(this.getAttribute("data-question-id"))

nVar是一个变量ID，我在添加字段时对其进行迭代。谢谢

Answer 1

$('#q2 input')不指向具有data-question-id属性的元素。假设input是直接子级，则需要使用this.parentNode：

$(document).ready(function() {
$('#q2 input').each(function() {
console.log(this.value);
console.log(this.parentNode.getAttribute("data-question-id"));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>

请注意，通常认为最好不要在可以保持一致的地方混合JS和jQuery构造。例如，使用jQuery:

$(document).ready(function() {
$('#q2 input').each(function() {
console.log($(this).val());
console.log($(this).parent().data("question-id"));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>

或纯JS:

window.onload = function() {
document.querySelectorAll('#q2 input').forEach(function(el) {
console.log(el.value);
console.log(el.parentNode.getAttribute("data-question-id"));
});
};

<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>