Question

我有一个div，其中<a>是动态创建并在其中删除的。我想遍历div（<a>）的子项（#skills）并获取它们的值。我确实做到了。但是当我使用each（）迭代它们时，它只是在我控制台登录时返回空。我是JS和jquery的新手，不知道是什么导致了这个问题我的div

<div id="skills"></div>

将添加的动态元素是锚标记。

<a name="skill_wanted[]" class="label label-default" value="MYSQL">MYSQL
<span class="glyphicon glyphicon-remove"></span></a>

还有span类提供glyphicons。在这里，我想只获得锚标记的值。在 MYSQL 的情况下，这是在创建锚标记时动态创建的。

var skills = new Array();
$('#skills a').each(function(){
skills = $(this).val();
console.log(skills);
});

我想获取每个锚标记值并将其添加到数组技能中。但是当我这样做的时候。它只是在控制台中打印数字。就像有2个锚标签一样打印2，如果是5，则为5.没有锚标记值。怎么回事呢？

Answer 1

您应该知道value属性不是锚点的有效属性，并且您无法使用.val()方法直接获取值。这仅适用于表单元素。

在您的情况下，您可以使用.map()来简化此操作，从而为您提供集合中的数组。

要使其成为有效属性，您可以在锚元素上使用data-*属性：

data-value="MYSQL"

然后在您的js代码中进行上述更新：

var skills = $('#skills a').map(function(){
   return $(this).data('value');
}).get();
console.log(skills);

Answer 2

试试这个，

var skills = new Array();
$('#skills a').each(function(){
  skills.push($(this).attr("value"));
});
console.log(skills);

我希望这能解决你的问题。

Answer 3

属性value适用于<button>，<input>和<option>元素。

在这种情况下，请使用：

，而不是value和.val()

- `data-value` and `.data('value')`

工作示例：

$(document).ready(function(){

    $('a').each(function(){
    	console.log($(this).data('value'));
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL0">MYSQL0
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL1">MYSQL1
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL2">MYSQL2
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL3">MYSQL3
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL4">MYSQL4
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL5">MYSQL5
<span class="glyphicon glyphicon-remove"></span>
</a>

获取动态创建的元素的值将返回空

3 个答案: