Verständnis der einzelnen jquery Funktion - Unerwarteter Ausgang

Question

Ich versuche, meinen Kopf um die each Funktion zu wickeln. In dieser Geige here Ich möchte nacheinander die ausgewählten Elemente der List-Box durchlaufen.

Wesentlichen

found itemA 
found itemB 

dieses eine Ausgabe wie ich es erwartet hatte aber ich eine Ausgabe wie diese

found itemA,itemB 

bekommen würde ich gerne wissen, warum das passiert und wie ich es beheben kann. Dieser ist der Code, ich verwende

HTML

<select multiple="multiple" size="5" id="test"> 
    <option>itemA</option> 
    <option>itemB</option> 
</select> 
<br> 
<button type="button" id="bid">test</button> 

JQuery

$("#bid").click(function() { 
    $("#test").each(function() { 
     console.log("found " + $(this).val()); 
    });   
}); 

Answer 1

Du Iterieren über die select und nicht die option s. Die Funktion, die Sie an beide übergeben haben, wird nur einmal aufgerufen. Ändern Sie Ihren Selektor in #test > option und ändern Sie, wie die Kommentare zu der Frage, val() in text().

$("#bid").click(function() { 
    $("#test > option").each(function() { 
     console.log("found " + $(this).text()); 
    });   
}); 

Answer 2

• Sie müssen die Elemente Selektor angeben. Wenn Sie nur #test verwenden, wird nicht über options iteriert, weil Sie nicht wirklich darauf Bezug genommen haben.

$("#bid").click(function() { 
 
    $("#test option").each(function() { 
 
    console.log("found " + $(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" size="5" id="test"> 
 
    <option>itemA</option> 
 
    <option>itemB</option> 
 
</select> 
 
<br> 
 
<button type="button" id="bid">test</button>

Answer 3

Sie werden

$.each($("#test").prop("options"), function() { 
    console.log("found " + this.value); 
}); 

oder

$("#test").children().each(function() { 
    console.log("found " + this.value); 
}); 

Answer 4

Hier verwenden möchten ist ein Beispiel, das es mehr erklären könnte: https://jsfiddle.net/Twisty/dr1tay6f/6/

HTML

<select multiple="multiple" size="5" id="test"> 
    <option value="a">Item A</option> 
    <option value="b">Item B</option> 
</select> 
<br> 
<button type="button" id="bid">test</button> 

JavaScript

$(function() { 
    $("#bid").click(function() { 
    $("#test option").each(function(ind, el) { 
     console.log("At Index " + ind +" found Option with Value: " + $(el).val() + " and Label of: " + $(el).html()); 
    }); 
    }); 
}); 

Die $(selector).each(callback(index, element)); über jedes Element in dem Auswahllaufen wird, ist es des Index und Element an die Funktion übergeben.