JQuery获得span的内容

我试图在单击按钮时获取跨度的内容。 这是html：

 Select Athens, Greece 
 
 Select Athens, Georgia, USA  

我试图得到它，以便当单击按钮时它将获得跨度的值。 这就是我正在使用的：

 $('button.select-location').live('click', function(event){ // set the span value var span_val = $(this).parent("span").html(); alert('selecting...' + span_val); }); 

但警报始终显示：选择… null

Answer 1

你想先得到父母，然后找到范围：

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

---

编辑： 回过头来看看你2年前写的代码并呻吟，“为什么我这样做？”。 上面的代码很尴尬。 而不是.find("> span") ，我应该使用.children("span") 。

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

但是，你父母的孩子是什么？ 一个兄弟姐妹！ 所以，我应该使用.siblings("span")代替.parent().children("span") .siblings("span") 。

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

但是，看看HTML，我们甚至不需要挖掘兄弟姐妹，我们知道它是下一个兄弟姐妹：

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

要不就：

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

到目前为止，我们几乎没有使用jQuery。 我们可以说：

 var span_val = this.nextSibling.innerHTML; 

但是，也许现在我把钟摆摆得太远了？

Answer 2

这不是按钮的父母。 div是button的父级， span是div 。 尝试

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

代替。

工作演示

Answer 3

 $('button.select-location').live('click', function(event){ var span_val = $(this).next("span").html(); alert('selecting...' + span_val); }); 

Answer 4

跨度不是’.select-location’按钮的父级，但是div是（跨度所在的）。 使用您的标记，尝试这样的事情：

 var spanVal = $(this).parent('.multiple-result').find('span').html(); 

Answer 5

这是接下来使用jQuery的Jsfiddler演示

http://jsfiddle.net/vVK54/1/

 $('button.select-location').live('click', function(event){ // set the span value var span_val = $(this).next().html(); alert('selecting...' + span_val); }); 

Answer 6

根据您拥有的跨度数量，但是如果跨度将始终直接位于按钮之后，则.next('span')将起作用。 如果您打算将按钮放在同一父div中的任何其他位置，那么您将需要导航dom才能找到它。

 $('selector').click(function() { $(this).parent().find('span'); )}; 

此外，最好在跨度中添加可定位的类或属性以更好地定位它，以便您计划更复杂的dom或多个跨度。

 Text Here $('button.select-location').click(function() { var span_val = $(this).parent('div').find('span.clicktarget').html(); }); 

希望这可以帮助