jQuery syntaxe de plusieurs sélecteurs

Question

Les gars est-ce que cette syntaxe est correcte? Je suis en train de faire une dropdown select et obtenir la valeur mais je ne suis pas sûr si cette syntaxe de plusieurs sélecteurs sont corrects

var countries = []; 
var locations = []; 
var zips = []; 
$.each($(".country option:selected, .location option:selected ,.zip option:selected"), function(){    
    countries.push($(this).val()); 
    locations.push($(this).val()); 
    zips.push($(this).val()); 
}); 

Answer 1

La façon dont vous faites peut être correcte. Vous utilisez la méthode jQuery.each(). Si vous ciblez jQuery objets, j'irais avec la méthode .each(). J'ai écrit une troisième méthode pour placer correctement les valeurs dans le tableau correct. En cas de doute, référez-vous au jQuery API. C'est plein d'informations et d'exemples utiles.

/* Method 1 - jQuery.each(object, callback) */ 
 
var countries = []; 
 
var locations = []; 
 
var zips  = []; 
 
$.each($('.country option:selected, .location option:selected, .zip option:selected'), function(index, value) { 
 
    countries.push($(this).val()); 
 
    locations.push($(this).val()); 
 
    zips.push($(this).val()); 
 
}); 
 
console.log('Method 1 - countries', countries); 
 
console.log('Method 1 - locations', locations); 
 
console.log('Method 1 - zips', zips); 
 

 
/* Method 2 - .each(function) */ 
 
var countries = []; 
 
var locations = []; 
 
var zips  = []; 
 
$('.country option:selected, .location option:selected, .zip option:selected').each(function() { 
 
    countries.push($(this).val()); 
 
    locations.push($(this).val()); 
 
    zips.push($(this).val()); 
 
}); 
 
console.log('Method 2 - countries', countries); 
 
console.log('Method 2 - locations', locations); 
 
console.log('Method 2 - zips', zips); 
 

 
/* Suggested Method */ 
 
var countries = []; 
 
var locations = []; 
 
var zips  = []; 
 
$('.country option:selected, .location option:selected, .zip option:selected').each(function() { 
 
    if($(this).parents('.country').length) countries.push($(this).val()); 
 
    if($(this).parents('.location').length) locations.push($(this).val()); 
 
    if($(this).parents('.zip').length) zips.push($(this).val()); 
 
}); 
 
console.log('Suggested Method - countries', countries); 
 
console.log('Suggested Method - locations', locations); 
 
console.log('Suggested Method - zips', zips);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="country"> 
 
    <option>USA</option> 
 
</select> 
 
<select class="location"> 
 
    <option>Florida</option> 
 
</select> 
 
<select class="zip"> 
 
    <option>32935</option> 
 
</select>

Answer 2

Oui vous pouvez utiliser multiselector comme syntaxe suivante.

$('#lbl1,#lbl2,#lbl3').css('border','1px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<label id="lbl1">Label 1 </label> <br/> 
 
<label id="lbl2">Label 2 </label> <br/> 
 
<label id="lbl3">Label 3 </label> 
 
    
 
</div>

Permettez-moi de savoir si cela fonctionne pour vous!

Answer 3

Cela affichera la sortie dans la console.

$('#btn').click(function(){ 
 
    console.log('hi'); 
 
    //console.log($('.country option:selected, .location option:selected').val()); 
 
    
 
    $('.country option:selected, .location option:selected').each(function(){ 
 
    console.log($(this).val()); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="country"> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
    <option>D</option> 
 
    </select> 
 
    
 
    <select class="location"> 
 
    <option>loc1</option> 
 
    <option>loc2</option> 
 
    <option>loc3</option> 
 
    <option>loc4</option> 
 
    </select> 
 
    
 
    <input type="button" id="btn" value="get"/>