Question

我有简单的输入，包括：

<form id='some-form'>
    ....
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
    ....
</form>

我试图遍历此表单并获取数据值：

$('#some-form').filter(':input').each(function (i, element) {
     console.log(element.value);
     console.log(element.attr('data-value'));
}

element.value持有＆＃39; ＆＃39;或者＆＃39; 关闭＆＃39;取决于是否选择无线电并且它正常工作但是当我尝试呼叫element.attr('data-value')时它会抛出错误。

那么如何在此循环中提取数据值？

Answer 1

使用.children()代替.filter()。

前者会为你提供里面的元素，后者会过滤所有会提供的元素{。}}。

HIH

修改

正如gaetanoM和connexo指出的那样，使用$('#some-form')而不使用element.attr()的问题也是如此，因为$()是jQuery的方法，而不是JS

.attr()

$('#some-form').children(':input').each(function (i, element) { console.log(element.value); console.log($(element).attr('data-value')); // // or // // console.log(element.dataset.value); }) console.log('end');

Answer 2

如果您使用较新的 jQuery＆gt; = 1.4.3 你可以这样使用。

$(this).data("value");

或

$(this).data().value;

Answer 3

在.each()函数element内部是常规HTMLElement，不是 jQuery对象。

使用允许使用的$(element)（或甚至$(this)）来包装它 jQuery的$.attr()

$(element).attr('data-value')

或者更好的是，使用相应的原生DOM Api方法

element.getAttribute('data-value'))

由于您正在访问data-属性，因此DOM Api有一个特殊对象dataset来访问这些属性（从IE 11向上）：

element.dataset.value

如果您的数据属性（例如data-cmon-lets-go）存在问题，则可以使用括号表示法访问它：

element.dataset['cmon-lets-go']

Answer 4

这也可以使用vanilla javascript完成。

document.querySelectorAll('#some-form input[type="radio"]').forEach(radio => {
  console.log(radio.value, radio.dataset.value);
});

<form id='some-form'>
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
</form>

Answer 5

在每个循环中，您实际上位于无线电元素的上下文中，因此您可以使用$(this).attr('data-value')并且它将起作用。以下是工作代码。

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>

    <form id='some-form'>
        <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">Hello

    </form>

</body>
</html>

<script type="text/javascript">
$(document).ready(function(){

   $('#some-form :input').each(function (i, element) {

     console.log(i);
     console.log("element", element);
     console.log($(this).val());
     console.log($(this).attr('data-value'));
   });
});
</script>

如何使用jquery从无线电输入获取数据值？

5 个答案: