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和所有后续的div具有类似answer-x的ID，并且必须显示带有编辑器ID的div。我需要帮助。这不是确切的html结构。带有一类编辑的锚标签可能是也可能不是具有ID answer-x的div的直接子节点。它可以在一个或两个更深层次的内部像

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

因此，如果用户点击answer-2里面的锚点链接，我必须首先隐藏答案-2，然后再隐藏所有的答案-x div。所以对于上面的结构，它将隐藏答案-2和答案3 div和然后显示编辑器div。

Answer 1

这会隐藏所有 div，其ID以answer-开头：

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 2

可能响应最快的选项是给你的答案div一个独特的类，如“回答”并隐藏所有div.answer个容器，但如果你不能或不想这样做：

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

这将找到id为“answer-”的最近的祖先，然后在该div之后找到符合相同选择器的所有兄弟元素，并将原始元素添加到选择中。然后它隐藏了整个集合。

这有一点需要注意。答案-x divs都必须是同一父母的孩子。否则遍历将无效。

<强>参考文献：

Answer 3

你可以使用“answer”作为div的类名吗？这样可以简化：

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

帮助JQuery选择器？

3 个答案: