Werte von dynamisch erstellten Elementen abrufen gibt

Question

zurück

Ich habe ein Div, wo <a> dynamisch erstellt und in ihm entfernt werden. Ich möchte durch die Kinder (<a>) des div (#skills) iterieren und den Wert von ihnen erhalten. Ich habe es ausgearbeitet. Aber wenn ich iterate durch sie mit jedem() es nur leer zurückgeben, wenn ich die Konsole logge es. Ich bin neu in JS und jquery und wissen nicht, was das Problem verursachen Mein div

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

Dynamische Elemente, die hinzugefügt wird, ist ein Anker-Tag.

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

Es gibt auch Span-Klasse, die die Glyphicons zur Verfügung stellt. Hier möchte ich nur den Wert des Anchor-Tags erhalten. In diesem Fall MYSQL, die dynamisch erstellt wird, wenn das Anchor-Tag erstellt wird.

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

Ich möchte jedes Anker Tag Werte erhalten und es zu den Array-Fähigkeiten hinzufügen. Aber wenn ich das tue. Es druckt nur Zahlen in der Konsole. Wenn 2 Anker-Tags vorhanden sind, wird 2 gedruckt und wenn 5 dann 5. ohne den Anker-Tag-Wert. Wie geht es dabei?

Answer 1

Sie sollten wissen, dass value Attribut nicht a gültiges Attribut für Anker und Sie können den Wert nicht direkt mit .val() Methode erhalten. Das ist nur für Formularelemente verfügbar.

In Ihrem Fall können Sie dies vereinfachen, indem Sie .map() verwenden, die Ihnen ein Array aus einer Sammlung bietet.

Um es ein gültiges Attribut machen Sie data-* Attribut auf dem Ankerelement verwenden können:

data-value="MYSQL" 

Dann in Ihrem js Code mit oben Update:

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

Answer 2

die Sie interessieren,

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

Ich hoffe, dass dies Ihr Problem lösen wird.

Answer 3

Das Attribut value steht für <button>, <input> und <option> Elemente.

In diesem Fall statt value und .val() verwenden:

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

Arbeitsbeispiel:

$(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>