JQuery get content of span

Question

I\'m trying to get the content of a span when a button is clicked. This is the html:

Answer 1

You want to get the parent first, then find the span:

var span_val = $(this).parent().find("> span").html(); 

---

Edit: Ever go back and look at code you wrote 2 years ago and groan, "Why did I do that?". The above code is awkward. Instead of .find("> span"), I should have used .children("span").

var span_val = $(this).parent().children("span").html(); 

But, what is a child of your parent? A sibling! So, instead of .parent().children("span"), I should have used .siblings("span").

var span_val = $(this).siblings("span").html();

But, looking at the HTML, we don't even need to dig through the siblings, we know it's the next sibling:

var span_val = $(this).next("span").html();

or just:

var span_val = $(this).next().html();

By this point, we're barely using jQuery at all. We could just say:

var span_val = this.nextSibling.innerHTML;

But, maybe now I've swung the pendulum too far the other way?