Question

我正在尝试获取下一个元素的innerHTML，然后发生了一次点击。

到目前为止，我将此作为我的代码

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

然而，实际上并没有发生任何事情，这表明该变量根本没有填充任何内容。为什么会这样。

HTML供参考

<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

您的问题是您的案例中没有下一个元素。您必须遍历<li>然后向下到<div>才能获得“Bonjour”

试试这个：

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

哪会给你<p>Bonjour</p>，如果你想摆脱p

，你可以更多地改进它

Answer 2

问题在于，在您的示例中，translate_this元素没有任何兄弟。它是span元素的唯一子元素。

Answer 3

next()以节点树方式查找下一个节点;不只是从上到下。 translate_this是span的唯一子节点，因此没有兄弟节点，next将返回null。您必须parent从那里回到p和next。

使用Prototype在Click事件上获取next（）元素的innerHTML

3 个答案: