लगातार तत्वों है कि एक फिल्टर

Question

इस उदाहरण को देखते हुए मेल खाते का चुनाव कैसे करें:

<img class="a" /> 
<img /> 
<img class="a" /> 
<img class="a" id="active" /> 
<img class="a" /> 
<img class="a" /> 
<img /> 
<img class="a" /> 

(मैं तो बस, एक उदाहरण के रूप img टैग का उपयोग किया है कि क्या यह मेरे कोड में है नहीं है)

JQuery का उपयोग करके, आप "ए" वर्ग के साथ आईएमजी टैग का चयन कैसे करेंगे जो # सक्रिय (मध्य चार, इस उदाहरण में) के समीप हैं?

आप निम्न सभी और पिछले तत्वों को लूप करके इसे आसानी से कर सकते हैं, फ़िल्टर स्थिति विफल होने पर रोकते हुए, लेकिन मैं सोच रहा था कि jQuery इसे मूल रूप से कर सकता है या नहीं?

Answer 1

यहां मैं अंत में क्या आया था।

// here's our active element. 
var $active = $('#active'); 

// here is the filter we'll be testing against. 
var filter = "img.a"; 

// $all will be the final jQuery object with all the consecutively matched elements. 
// start it out by populating it with the current object. 
var $all = $active; 

for ($curr = $active.prev(filter); $curr.length > 0; $curr = $curr.prev(filter)) { 
    $all = $all.add($curr); 
} 
for ($curr = $td.next(filter); $curr.length > 0; $curr = $curr.next(filter)) { 
    $all = $all.add($curr); 
} 

एक सवाल अनुवर्ती कार्रवाई के लिए, मैं देख सकता था कि यह कैसे आसानी से एक समारोह जो दो तर्क लेता में बनाकर सामान्यीकृत किया जा सकता है: एक प्रारंभिक तत्व है, और एक फिल्टर स्ट्रिंग - किसी ने मुझे सही दिशा में बात कर सकते हैं इस तरह के एक समारोह को जोड़ने के लिए jQuery ऑब्जेक्ट को विस्तारित करने का तरीका जानने के लिए?

---

संपादित: मैं के बाद से पाया है कि प्रत्येक() फ़ंक्शन कुछ प्रयोजनों के लिए नहीं बल्कि अच्छी तरह से इस करना होगा। मेरे अपने मामले में यह स्पष्ट रूप से काम नहीं करता है, क्योंकि मैं उन सभी तत्वों के लिए एक एकल jQuery ऑब्जेक्ट चाहता हूं, लेकिन यहां आप इस उदाहरण में प्रत्येक अलग-अलग उद्देश्य (लगातार ".a" तत्वों को छिपाने के लिए उपयोग कर सकते हैं :)

$('#active') 
    .nextAll() 
    .each(hideConsecutive) 
    .end() 
    .prevAll() 
    .each(hideConsecutive) 
; 
function hideConsecutive(index, element) { 
    var $e = $(element); 
    if (!$e.is(".a")) { 
     return false; // this stops the each function. 
    } else { 
     $e.hide('slow'); 
    } 
} 

-

संपादित करें: मैं एक प्लगइन में इस डाल दिया है एक साथ अब। यदि आप रुचि रखते हैं तो http://plugins.jquery.com/project/Adjacent पर एक नज़र डालें।

Answer 2

मेरा मानना ​​है कि लूपिंग आपकी सबसे अच्छी शर्त है। लेकिन आप प्रत्येक सक्रिय, कोशिश कर सकते हैं, और तब स्थिति को तोड़ने तक पहले और बाद में स्थानांतरित कर सकते हैं, यदि सेट पर्याप्त बड़ा हो तो तेज़ होगा। केवल निम्नलिखित भाई बहन का चयन करेंगे

$('#active ~ img.a').hide(); 

Answer 3

टिल्ड (~) siblings selector है। डॉक्स: http://docs.jquery.com/Selectors/siblings#prevsiblings

Answer 4

@Prestaul

$('#active ~ img.a') 

, और गैर लगातार भाई बहन भी शामिल होंगे:

Answer 5

यह एक और तरीका यह करने के लिए, हालांकि भाई चयनकर्ता जवाब बहुत अच्छा है है:

var next = $('#active').next('.a'); 
var prev = $('#active').prev('.a'); 

संपादित करें: मैं फिर से पढ़ अपनी आवश्यकताओं और यह वह जगह है नहीं काफी क्या आप चाहते हैं । आप अगली और सभी का उपयोग कर सकते हैं, लेकिन वे भी कक्षा के नाम के बिना आईएमजी पर नहीं रुकेंगे।

Answer 6

नीचे दिया गया कोड दो नए फ़ंक्शन, अगली कॉन्सकटिव() और prevConsecutive() जोड़ देगा। उन्हें वही करना चाहिए जो आप चाहते हैं।

$ .each (['prev', 'अगला'], फ़ंक्शन (अप्रयुक्त इंडेक्स, नाम) { $।fn [नाम + 'लगातार'] समारोह (matchExpr) = {

var $all = 
     (name == 'prev') 
      ? $(this).prevAll() 
      : $(this).nextAll(); 
    if (!matchExpr) 
     return $all; 

    var $notMatch = $($all).not(matchExpr).filter(':first'); 
    if ($all.index($notMatch) != -1) 
     return $allConsecutive = $all.slice(0, $all.index($notMatch)); 

    return $all; 
}; 

});