यह संभव jQuery

Question

में चयनकर्ताओं के बजाय कई चर का उपयोग करने के मुझे पता है कि यह निम्न करने के लिए तेज है है

$("#header").css({color:"#ff0000"}); 
$("#header a").addClass("foo"); 

क्योंकि jQuery खोजने की जरूरत नहीं है फिर डीओएम में तत्वों के रूप में हमारे पास प्रत्यक्ष संदर्भ है।

var $header_elements = $("#header li"); 
var $footer_elements = $("#footer li"); 

और मैं कुछ jQuery जोड़तोड़ के लिए व्यक्तिगत रूप से दोनों का उपयोग करें:

चलो कहते हैं कि मैं इस किया है कि करते हैं। लेकिन फिर, मुझे दोनों पर कुछ करने की ज़रूरत है। चयनकर्ता का उपयोग करना, मैं यह कर जाएगा:

$("#header li, #footer li").css({color:"#ff0000"}); 

लेकिन फिर, डोम मिलान तत्वों को खोजने के लिए फिर से पार्स किया जाना चाहिए। क्या एक नए चयनकर्ता के बजाय मेरे पहले घोषित चर का उपयोग करने का कोई तरीका है?

$($header_elements + $footer_elements).css({color:"#ff0000"}); 

मुझे लगता है कि चयनकर्ता सरणी या वस्तु किसी तरह का रिटर्न: निम्नलिखित की तरह कुछ (जो नहीं काम कर रहे, मुझे पता है, यह मैं क्या देख रहा हूँ की एक विचार देने के लिए है)। जो मैं खोज रहा हूं वह उनको विलय करने का एक तरीका है। किसी को पता है कि यह संभव है और इसे कैसे करें?

आपकी मदद के लिए धन्यवाद!

Answer 1

बस add विधि का उपयोग करें:

$header_elements.add($footer_elements).css({color:'#ff0000'}); 

एक jQuery उद्देश्य यह है कि डोम तत्वों का एक सेट, .add() विधि उन के मिलन से एक नया jQuery वस्तु निर्माण का प्रतिनिधित्व करता है को देखते हुए तत्व और विधि में पारित किए गए हैं। .add() के लिए तर्क बहुत अधिक कुछ भी हो सकता है जो jQuery चयनकर्ता अभिव्यक्ति, संदर्भ डीओएम तत्वों, या एक HTML स्निपेट के संदर्भ में स्वीकार करता है।

Answer 2

यह प्रदर्शन कोई प्रभाव नहीं पड़ेगा बुद्धिमान मौसम तुम जैसे (भले ही वह काम किया) कुछ करना होगा:

$($header_elements + $footer_elements).css({color:"#ff0000"}); 

या उन्हें अलग से कार्य करें:

$($header_elements).css({color:"#ff0000"}); 
$($footer_elements).css({color:"#ff0000"}); 

jQuery के रूप में आंतरिक रूप से जाना होगा each() का उपयोग कर आपूर्ति किए गए तर्कों के माध्यम से।

सिद्धांत अधिक DRY प्रेरित, प्रदर्शन की तुलना में बुद्धिमान, आप एक समारोह बना सकते हैं यह है:

function makeThemRed(el) {el.css({color:"#ff0000"})} 

और फिर

makeThemRed($header_elements); 
makeThemRed($footer_elements); 

या यहाँ तक कि:

function makeThemRed() 
{ 
    var l=arguments.length, 
     o=0; 
    while (o<l) { 
     arguments[o++].css({color:"#ff0000"}) 
    } 
} 

और उसके बाद

makeThemRed($header_elements, $footer_elements); //any number of parameters 

Answer 3

संदर्भ की एक सरणी दर्रा:

$([$header_elements, $footer_elements]).css({color:"#ff0000"}); 

Answer 4

मैं कुछ ही मिनटों के इस पोस्ट करने के बाद समाधान मिल गया। जो लोग सोच रहे हैं, उनके लिए यहां है:

$.merge($header_elements, $footer_elements).css({color:"#ff0000"}); 

क्या यह तेज़ है? मुझे अभी तक पता नहीं है, मुझे पता लगाने के लिए कुछ परीक्षण चलाने की आवश्यकता होगी।

संपादित करें:

मैं जे एस फिडल यहाँ के साथ यह परीक्षण किया: http://jsfiddle.net/bgLfz/1/

मैं दोनों चयनकर्ता के लिए चयनकर्ता हर बार, चर का उपयोग कर परीक्षण, $ .merge साथ चर() और .add का उपयोग कर()। प्रत्येक परीक्षण 1000 बार चलाया गया था। मेरी तरफ

परिणाम इस प्रकार (धीमा करने के लिए तेजी से से) कर रहे हैं:

1. $ .merge() (7ms की औसत)
2. का उपयोग अन्य (10ms की औसत के बाद दोनों चर एक का उपयोग करना है, लेकिन कोड .add का उपयोग करना() (16ms की औसत)
3. चयनकर्ताओं हर बार का उपयोग करना (295ms की औसत)

Answer 5

आप cou दोहराया होने की जरूरत है)

ld हमेशा एक चर के सभी तत्वों का सेट:

var $lis = $('#header li, #footer li'); 
$($lis).css({color:"#ff0000"}); 

Answer 6

आप उपयोग कर सकते हैं add या merge विधि:
जोड़े

$header_elements.add($footer_elements).css({color:'#f00'}); 

मर्ज

$.merge($header_elements, $footer_elements).css({color:"#f00"}); 

दोनों काम , लेकिन जोड़ अधिक प्रदर्शन है। स्रोत:http://jsperf.com/add-vs-merge

क्रेडिट: मैं @GenericTypeTea और @Gabriel जवाब upvoted, उन्हें तुलना में और यहाँ परिणाम है, दोनों का एक सारांश था।

Answer 7

'विलय' का उपयोग करने वाली बात यह है कि यह केवल दो चयनकर्ताओं तक ही सीमित है, और 'एड' का उपयोग करके यह दो से अधिक है, इसलिए यदि यह दो से अधिक है, तो आपको इस तरह 'प्रत्येक' का उपयोग करना चाहिए :

$([selector1, selector2, selector3, .....etc]).each(function(){ 
    // your code here 
});