幫助一個JQuery選擇器？

Question

我有一個HTML的結構類似如下

<div id="answer-1"> 
    <a class="edit"></a> 
</div> 

<div id="answer-2"> 
    <a class="edit"></a> 
</div> 

<div id="answer-3"> 
    <a class="edit"></a> 
</div> 
<div id="editor" style="display:none;"> 
</div> 

我想什麼做的就是當用戶點擊一類的編輯的鏈接，我將不得不隱藏它的父DIV，並具有類似的答案-X ID的所有後續的div並且必須用編輯器的id來顯示div。我需要幫助。這不是確切的html結構。並配有一流的編輯的定位標記可能會或可能不會與ID answer-x.It的div直接孩子可以在一個或兩個以上的水平內心深處喜歡

<div id="answer-x"> 
    <div id="hor-list"> 
     <a class="edit"></a> 
    </div> 
</div> 

所以，如果用戶點擊答案-2中的錨鏈接，我必須先隱藏答案-2，然後所有的答案x div後。所以對於上述結構，它將隱藏答案-2和答案-3的div，然後顯示編輯器div。

Answer 1

可能迴應最快的選項是給你的答案div一個獨特的類如「答案」，並隱藏所有div.answer下面的容器，但如果你不能或不能要做到這一點：

$("a.edit").click(function() { 
    $(this).closest('div[id^="answer-"]').nextAll('div[id^="answer-"]').andSelf().hide(); 
    $("#edit").show(); 
}); 

此尋找最近的祖先開始「答案 - 」然後找到該div滿足相同的選擇，並添加原始元素來選擇畢竟兄弟元素的ID。然後它隱藏了整個集合。

這附帶一個警告。答案-x divs必須是同一父母的孩子。否則，遍歷不起作用。

參考文獻：

• Attribute Starts With Selector [name^="value"]
• .nextAll()
• .andSelf()

Answer 2

這將隱藏所有的div與answer-開頭的ID：

var $answers = $('div[id^=answer-]'), 
    $editor = $('#editor'); 

$('a.edit').live('click', function() 
{ 
    $answers.hide(); 
    $editor.show(); 
}); 

，這將隱藏鏈接的answer-X祖先的div被點擊，並且所有這些後續的div：

var $editor = $('#editor'); 

$('a.edit').live('click', function() 
{ 
    $(this).closest('div[id^=answer-]').hide() 
     .nextAll('div[id^=answer-]').hide(); 

    $editor.show(); 
}); 

Answer 3

你可以使用 「答案」 作爲類名的div呢？這將簡化以下內容：

$('a .edit').click(function() { 
    $(this).closest('.answer').hide().nextAll('.answer').hide(); 
    $('#editor').show(); 
});