如何選擇匹配濾波器

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，你會如何選擇與#active相鄰的類「a」的img標籤（本例中的中間四個）？

您可以通過循環遍歷所有以下元素和前面的元素，在過濾條件失敗時停止，但我想知道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

我相信循環是你最好的選擇。但是，你可以嘗試，每一個活動，然後前後移動，直到條件中斷，如果設置足夠大，將會更快。

Answer 3

代字號（〜）是siblings selector：

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

Answer 4

@Prestaul

$('#active ~ img.a') 

只會選擇以下兄弟姐妹，並且將包括非連續的兄弟姐妹太。文檔：http://docs.jquery.com/Selectors/siblings#prevsiblings

Answer 5

這是另一種方式來做到這一點，雖然兄弟選擇的答案是很酷：

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

編輯：我重讀你的要求，這是不是你想要什麼很。你可以使用nextAll和prevAll，但是這些也不會停留在沒有類名的IMG上。

Answer 6

下面的代碼將添加兩個新函數nextConsecutive（）和prevConsecutive（）。他們應該做你想做的。 $ .each（['prev'，'next']，function（unusedIndex，name）{0123}fn [name +'Consecutive'] =函數（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; 
}; 

}）;