I'm unable to select previous element

Question

Im using the following code

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//Document ready
$(document).ready(function(){   

    //Show info
    $('a.getinfo').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).next('.info').css("display","block");
        }
    );
    $('a.getback').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).prev('a.getinfo').css("display","block");
        }
    );



});
</script>
<style>
.info {
    display: none   
}
</style>
<ul>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
</ul>

What it should do:

• When you click on the image, image ll hide and ll display text 'some info back'.
• Now when i click on text 'some info back', i should get previous image

Problem:

• I can't get to display image. Probably i dont know how to proper select class '.getinfo'

Answer 1

Dont use the Prev selector as it will not search on all previous divs. Try the parent and children selectors:

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).hide();
            $(this).parent().children('.info').show();
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().hide();
            $(this).parent().parent().children('.getinfo').show();
    }
);​

Note I have also used the Show and Hide methods to make things easier than settings the css attributes

Here is a working example

---

Due to me missing the need for a double parent use at .parent().parent() it would be more appropriate to use the closest selector in this instance to find the first parent that matches a given selector query, like this:

$(this).closest("li").children('.getinfo').show();

Answer 2

You are not doing the right selects. Here is a modified version of your code that works right: http://jsfiddle.net/ertaD/4/

I've modified the select to get the closest li and inthat li i've found the element needed. You were hiding .getback, and showing back .info (the content of info remained hidden)

Here is the code:

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).css("display","none");
            $(this).closest('li').find('.info').css("display","block");
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().css("display","none");       
            $(this).closest('li').find('.getinfo').css("display","block");
    }
);