Getting next tag - jquery

I have the following markup:

<button class="button" type="button"><spa开发者_StackOverflow社区n>Edit</span></button>

I want to have a click event on .button that changes the value of the next span.

So I have this as a test:

    $('.button').click(function(){
    $(this).next('span').val();
})

This returns 'undefined' however. How can I select the span?

Thank you!

you need to fix two things. First next() applies to sibling elements. your span is inside your button. So change that to children. Next to get the value inside a span element you'll need to use .html()

$('.button').click(function(){
    $(this).children('span').html();
})

EDITED: Here is a jsFiddle

you want .text() or .html() depending if you want just the text, or the markup to go along with it.

edit:

wait a second, your span is inside your button?? interesting... you can just use $(this).text(); to get at the text then.

Does this work:

$('.button').click(function(){
    $(this).children('span').html();
})

.val() only works on form elements as far as I know. Use .text() or .html() to change the text of the <span>

In you example, the span is not 'next', it is a child node. You would use next if your html looked something like this:

<button class="button" type="button">Click me</button><span>Edit</span>

Also, you want to get the text using html(), (as Björn mentioned)