Getting the innerHTML of the next() Element on a Click Event using Prototype

Question

I am attempting to get the innerHTML of the next element, next to which a Click has occured.

So far, I have this as my code

$('translate_this').observe('click', function(e) {  
    // Immediately stop the click through  
    Event.stop(e);  
    x = this.next().innerHTML;  
    alert(x);    
});

However, nothing actually happens, which suggests the variable isn't being populated with anything at all. Why is this.

HTML for reference

<li class="say public">
 <p>  
     <span style="padding: 2px 7px; background-color: rgb(230, 230, 230); -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px;">  
      <a id="translate_this" href="">Translate</a>
  </span>
 </p>
 <div class="post_non_translated">
  <p>Bonjour </p>
 </div>
</li>

Answer 1

Your problem is that there is no next element in your case. You have to traverse up to the <li> then down to the <div> to get "Bonjour"

Try this:

var x = this.up('li').down('.post_non_translated').innerHTML;

Which will give you <p>Bonjour</p>, you can then refine it more if you want to get rid of the p

Answer 2

The problem is that in your example, the translate_this element doesn't have any siblings. It is the only child element of the span element.

Answer 3

next() finds the next node in a node-tree way; not just top to bottom. translate_this is the only child of a span, and so it has no siblings, and next will return null. You have to parent your way back to the p and next from there.