Zurück gefilterten Ergebnisse in Array

Question

Ich habe die HTML folgende button s:

<button name="foo" class="one active">cat</button> 
<button name="foo" class="one active">dog</button> 
<button name="foo" class="one active">hamster</button> 
<button name="foo" class="one">rhino</button> 
<button name="foo" class="one">rat</button> 

folgende jQuery Code Gegeben:

var res = $('button[name=foo]', '#my-form').filter(function() { 
    return $(this).hasClass('active'); 
}).text(); 

res endet mit der Zeichenfolge "catdoghamster", wenn ich hätte das Ergebnis erwartet in einem Array wie ["cat", "dog", "hamster"].

Wie filtere ich die oben genannten Schaltflächen basierend auf einer Klasse und die text der Schaltflächen in einem Array zurück?

Answer 1

Sie wahrscheinlich eine Karte zusätzlich zu dem Filter, und dann zurückkehren, um den Text innerhalb der Karte, nicht, nachdem es

var res = $('button[name=foo]', '#my-form').filter(function() { 
 
    return $(this).hasClass('active'); 
 
}).map(function() { 
 
    return $(this).text(); 
 
}).get(); 
 

 
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="my-form"> 
 
    <button name="foo" class="one active">cat</button> 
 
    <button name="foo" class="one active">dog</button> 
 
    <button name="foo" class="one active">hamster</button> 
 
    <button name="foo" class="one">rhino</button> 
 
    <button name="foo" class="one">rat</button> 
 
</form>

Als Nebenbei bemerkt, die Filter scheinen uneccessary wollte, wie Sie gerade hier

$('button[name=foo].active', '#my-form') 

Answer 2

tun könnten, ist eine Lösung, die nicht .filter() verwendet, sondern arbeitet man im Szenario hat gegeben

var res = []; 
$("button[name=foo].active").each(function(){ res.push($(this).text()}) 

Dies funktioniert, da der Selektor gut genug ist.