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)