在一個選擇器中列出幾個JQuery對象

-1

這並不重要，只是想讓我的代碼更完美。因此，我們有：在一個選擇器中列出幾個JQuery對象

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

我們是把對象變量都知道獲得更好的性能，而且還通常它使代碼更短。但是如何將這些變量一起用於相同的操作？

來源

2016-12-01 Levsha

jQuery選擇器可以針對ID或類。這裏閱讀：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

此外 - 你不需要設置一個JavaScript變量使用$。你可以這樣做

var CoolVariable = $('#whateverdiviwant');

例如，假設你想淡出一個元素。您需要定位該特定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>

編輯

希望我沒有浪費你的時間閱讀這一點 - 但我相信你將不得不通過對變量存儲爲一個數組，然後循環該數組調用數組中每個項目的函數。這可能是唯一的方法（我知道）達到你要找的東西。

像這樣：

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

來源

2016-12-01 03:37:59 Minum

謝謝回答！我知道它是如何工作的，也許我解釋了我的問題不好。例如這個代碼「$（$ a）.fadeOut（5000）;」也會起作用，所以不僅可以有選擇器，也可以有對象。但不是很少的對象:( – Levsha

我更新了一些問題。 – Levsha

是否可以使用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>

來源

2016-12-01 05:07:07 Zac

在一個選擇器中列出幾個JQuery對象

回答

相關問題