1つのセレクタで少数のJQueryオブジェクトをリストする

Question

これは重要ではなく、コードを完璧にしたいだけです。 だから、我々が持っている：

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); 

を我々の変数にオブジェクトを置くすべてのノウハウは、パフォーマンスのために優れている、とも通常はコード短くなります。しかし、どのように同じアクションのために一緒にいくつかの変数を使用する？

Answer 1

jQueryセレクタは、IDまたはクラスを対象とすることができます。ここをクリックしてください：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

また、$を使用してjavascript変数を設定する必要はありません。あなたが例えば、このような

var CoolVariable = $('#whateverdiviwant'); 

ように行うことができます、あなただけの1要素をフェードアウトしたいと言います。その特定のIDをターゲットにします。

しかし、すべての要素をターゲットにしたい場合は、そのクラスをターゲットにします。複数の要素で同じ関数を実行する予定がある場合は、これを行います。

私はあなたが変数を設定する要素を含む上記の&を示していることを実証するために少しデモを行いました。

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

うまくいけば、私はあなたが時間にこれを読んでいる無駄にしないよ - を通じてしかし、私はあなたが配列として変数を格納しなければならないと信じて、その後、ループ配列内の各項目の関数を呼び出す配列です。これはたぶんあなたが探しているものを達成するために（私が知っている）の唯一の方法です。

ようなので：

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

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

は私のアップデートでこれcodepenを参照してください。 http://codepen.io/anon/pen/KNyjMr

Answer 2

すべての子要素を繰り返し処理し、必要な機能をthisで追加できるようなマークアップですか？答えを

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>