Listen Sie einige JQuery-Objekte in einem Selektor

Question

Es ist nicht kritisch, nur meinen Code perfekt machen wollen. So , haben wir:

var $a = $('div#first-very-long-selector'); 
var $b = $('div#second-very-long-selector'); 

// I can make this: 
$a.fadeOut(10000); 
$b.fadeOut(10000); 

// or this: 
$('div#first-very-long-selector,div#second-very-long-selector').fadeOut(10000); 

// we can put object to selector, like: 
$($a).fadeOut(10000); 
$($b).fadeOut(10000); 

// BUT this way doesn't work: 
$($a,$b).fadeOut(10000); 

// put them to array doesn't work too: 
$([$a,$b]).fadeOut(10000); 

// use .map doesn't help: 
[$a,$b].map($.fadeOut); 

Wir alle wissen, dass Objekte Variable setzen ist besser für die Leistung, und auch in der Regel macht es Code kürzer. Aber wie kann man diese Variablen zusammen für die gleiche Aktion verwenden?

Answer 1

jQuery-Selektoren können auf IDs oder Klassen ausgerichtet werden. Lesen Sie hier: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Auch - Sie müssen nicht eine JavaScript-Variable mit $ festlegen. Sie können dies auch tun

var CoolVariable = $('#whateverdiviwant'); 

Zum Beispiel sagen Sie wollten nur ein Element ausblenden. Sie würden diese spezifische ID zielen.

Aber wenn Sie alle Elemente zielen wollten, würden Sie die Klasse anvisieren. Sie würden dies tun, wenn Sie dieselbe Funktion für mehrere Elemente ausführen möchten.

Ich habe eine kleine Demo für Sie gemacht, um zu demonstrieren, was ich oben erwähnte & einschließlich Einstellelemente zu Variablen.

var a = $('#one'), 
 
    b = $('#two'), 
 
    c = $('.div-choice'); 
 

 
$('#fadeA').click(function() { 
 
    a.fadeOut(1000); 
 
}); 
 

 
$('#fadeB').click(function() { 
 
    b.fadeOut(1000); 
 
}); 
 

 
$('#fadeAll').click(function() { 
 
    c.fadeOut(1000); 
 
}); 
 

 
$('#revert').click(function() { 
 
    c.fadeIn(1000); 
 
});

#one { 
 
    background-color: blue; 
 
} 
 

 
#two { 
 
    background-color: red; 
 
} 
 

 
.div-choice { 
 
    height: 50px; 
 
    width: 50px; 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
button { 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one" class="div-choice">A</div> 
 
<div id="two" class="div-choice">B</div> 
 
<button id="fadeA">Fade A</button> 
 
<button id="fadeB">Fade B</button> 
 
<button id="fadeAll">Fade All</button> 
 
<button id="revert">Bring back</button>

EDIT

Hoffentlich bin ich nicht verschwenden Sie haben Zeit für das Lesen - aber ich glaube, Sie würden die Variablen als ein Array zu speichern, dann Schleife durch Dieses Array ruft die Funktion für jedes Element im Array auf. Dies ist wahrscheinlich die einzige Möglichkeit (die ich kenne) zu erreichen, was Sie suchen.

Wie so:

var g  = [ a, b ], 
    gLength = g.length; 

$('#someDiv').click(function() { 
    for (i = 0; i < gLength; i++) { 
    g[i].fadeOut(1000); 
    } 
}); 

diesen codepen mit meiner Updates anzeigen. http://codepen.io/anon/pen/KNyjMr

Answer 2

Ist das Markup so, dass Sie einfach alle untergeordneten Elemente durchlaufen und die benötigten Funktionen mit this anhängen können?

http://codepen.io/anon/pen/vyWoEr

<div id="wrapper"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
    <div>D</div> 
    <div>E</div> 
</div> 

<script> 
$('#wrapper').children('div').each(function() { 
    $(this).click(function(e) { 
    alert('I can do stuff to ' + $(this).text()) 
    }) 
}); 
</script>