Target div with jQuery

I have modified my code to streamline it a bit better. I need to be able to hide "old" span and show "new" one when "change" is clicke开发者_开发知识库d. I tried using siblings() but it does not appear to work. Am I missing something here:

$(".new").hide();

$('.change').click(function() {
    $(".new").hide();
    $(this).siblings(".old").hide();
    $(this).siblings(".new").show();
});

<div id="container">
  <div>
    <div class="switches">
        <span class="change">switch</span>
        <span class="go">go</span>
    </div>
    <span class="old">old content</span>
    <span class="new">new content</span>
  </div>

  <div>
    <span class="change">switch</span>
    <span class="old">old content</span>
    <span class="new">new content</span>
  </div>
</div>

Thanks.

UPDATE:

Please note that I have added another level of depth for my triggers placing it inside

<div class="switches">

Now I can't target the right div...

$('.change').click(function() {
    $(".new").hide();
    $(this).siblings(".old").hide();
    $(this).siblings(".new").show();
});

You aren't listening to the right element, this should fix it.

Try replacing this:

$('.editIco').click(function() {
    $(".new").hide();
    $(this).siblings(".old").hide();
    $(this).siblings(".new").show();
})

With:

$('.change').click(function() {
    $(".new").hide();
    $(this).siblings(".old").hide();
    $(this).siblings(".new").show();
})

I think $(this).siblings refers to the children of the parent of the thing with the class, editIco.

Andy