Help with a JQuery selector?

Question

I have a HTML structure like follows

<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>

What i wanna do is when user clicks on the link with a class of edit i will have to hide it's parent div and all subsequent divs having ID like answer-x and have to show the div with the id of editor. I need help with this. This is not not the exact html structure. And the anchor tag with a class of edit may or may not be the immediate child of the div with ID answer-x.It can be in one or two more levels deep inside like

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

So if users clicks on the anchor link inside answer-2 i have to first hide answer-2 and then all answer-x div afterwards.So for the above structure it will be hiding answer-2 and answer-3 div and then showing editor div.

Matt Ball · Accepted Answer · 2011-06-04 13:45:54Z

4

This will hide all divs with an ID that starts with answer-:

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

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

and this will hide the answer-X ancestor div of the link that was clicked, and all such subsequent divs:

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

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

    $editor.show();
});

edited Jun 4, 2011 at 13:45

answered Jun 4, 2011 at 13:39

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lsuarez Over a year ago

Doesn't hide all subsequent answer divs.

Prasenjit Kumar Nag Over a year ago

if i am not mistaken this will only hide the parent div with id answer-x, i need to all siblings of that parent div afterwords.

Matt Ball Over a year ago

I've edited my answer. I wasn't clear on which divs should be hidden.

lsuarez · Accepted Answer · 2011-06-04 13:45:12Z

The option likely to respond fastest is to give your answer divs a unique class like "answer" and hide all div.answer following containers, but in the event you can't or don't wish to do that:

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

This finds the nearest ancestor with an id starting with "answer-" then finds all sibling elements after that div that meet the same selector and adds the original element to the selection. Then it hides the entire collection.

This comes with one caveat. The answer-x divs all have to be children of the same parent. Otherwise the traversal won't work.

References:

Jazaret · Accepted Answer · 2011-06-04 14:13:58Z

2

Can you use "answer" as a class name for the div as well? That would simplify things with:

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

edited Jun 4, 2011 at 14:13

answered Jun 4, 2011 at 13:46

Jazaret

3,7053 gold badges19 silver badges15 bronze badges

1 Comment

Prasenjit Kumar Nag Over a year ago

Good idea. i am working with someone else's HTML structure. So have to check if he has any dependencies with id. thnx.

Collectives™ on Stack Overflow

Help with a JQuery selector?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related