動的に作成された要素の値を取得すると空白が返されます

Question

<a>が動的に作成されて削除されているdivがあります。 div（#skills）の子（<a>）を繰り返して、その値を取得したいと思います。私はそれを解決しました。しかし、私が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> 

グリフコンを提供するスパンクラスもあります。ここでは、アンカータグの値だけを取得したいと思います。その場合、MYSQLは、アンカータグの作成時に動的に作成されます。

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

各アンカータグの値を取得し、配列スキルに追加したいと考えています。しかし、私はこれを行うとき。これは、単にコンソールに数字を表示します。 2つのアンカータグが存在する場合のように、 2が印刷され、5の場合アンカータグ値なしで5が印刷されます。これについてどうやって行くの？

Answer 1

あなたはvalue属性ではないことを知っている必要がありの有効な属性アンカーと.val()メソッドで値をまっすぐに取得することはできません。これはフォーム要素でのみ利用可能です。

あなたの場合は、.map()を使用してコレクションを並べ替えることができます。上記のアップデートであなたのJSコードに続いて

data-value="MYSQL" 

：

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(){ 
 
    \t 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>