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>

为什么“ this.getAttribute（）”返回null？

1 个答案: