帮助一个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(); 
});