Помогите с селектором 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 и все последующие div, имеющие идентификатор, напримерanswer-x и должен показать div с идентификатором редактора.Мне нужна помощь с этим.Это не точная структура HTML.И тег привязки с классом редактирования может быть или не быть непосредственным потомком div с идентификатором answer-x. Он может быть на одном или двух уровнях глубже внутри, как

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

Так что, если пользователищелкает по ссылке привязки внутри answer-2. Сначала я должен спрятать answer-2, а затем все answer-x div. Так что для приведенной выше структуры будет скрываться div answer-2 и answer-3 div, а затем показываться div редактора.

Answer 1

Это будет скрывать все деления с идентификатором, который начинается с answer-:

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

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

, и это скроет div предка answer-X ссылки, по которой щелкнули, и все последующие 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?Это упростит вещи с:

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

Answer 3

Вариант, который может ответить быстрее всего, - дать вашему ответу divs уникальный класс, такой как "answer", и спрятать все div.answer следующих контейнеров, но в случае, если вы не можете или не хотите этого делать:

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

Это находит ближайшего предка с идентификатором, начинающимся с "answer-", затем находит все элементы одного и того же элемента после этого div, которые встречаются с тем же селектором, и добавляет исходный элемент в выборку.Тогда он скрывает всю коллекцию.

Это идет с одной оговоркой.Ответ-х divs все должны быть детьми одного и того же родителя.В противном случае обход не будет работать.

Ссылки:

• Атрибут начинается с селектора [name ^ = "value"]
• .следующийВсе ()
• .andSelf ()