JQuery获取span的内容

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

<div class="multiple-result"> 
<button class="select-location" id="168">Select</button> 
<span>Athens, Greece</span> 
</div> 

<div class="multiple-result"> 
<button class="select-location" id="102">Select</button> 
<span>Athens, Georgia, USA</span> 
</div>

我试图得到它，所以当按钮被点击时，它会得到跨度的值。这是我使用的是什么：

$('button.select-location').live('click', function(event){ 

    // set the span value 
    var span_val = $(this).parent("span").html(); 

    alert('selecting...' + span_val); 

});

但警报始终显示：选择...空

来源

2011-10-31 Frank

你想先得到父，然后找到跨度：

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

编辑：Ever go back and look at code you wrote 2 years ago叹息，“为什么我要这么做那？“。上面的代码很尴尬。而不是.find("> span")，我应该使用.children("span")。

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

但是，你父母的孩子是什么？兄弟姐妹！所以，而不是.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;

但是，也许现在我已经摆摆得太远的其他方式？

来源

2011-10-31 21:40:24 gilly3

谢谢，这工作。 – Frank

我喜欢这个答案。这几乎是我的内心独白每天都在发声。这值得超过6个upvotes！ – WheretheresaWill

投票赞成'永远回头看看你2年前写的代码并呻吟，“我为什么这样做？”' –

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

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

改为。

Working demo

来源

2011-10-31 21:39:36 genesis

$('button.select-location').live('click', function(event){ 

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

    alert('selecting...' + span_val); 

});

来源

2011-10-31 21:40:06 Emil

为什么在正确的解决方案反对票？ – Emil

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

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

来源

2011-10-31 21:48:51 Ben

下面是使用jQuery next

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); 
});

来源

2011-10-31 21:48:52

根据一个Jsfiddler演示多少跨越，你有，但如果跨度总会直接上门按钮后，.next('span')将工作。如果你打算把按钮放在同一父母div的其他地方，那么你将需要导航dom来找到它。

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

此外，它可能是最好添加一个靶向类或属性的跨度为目标的更好柜面你打算通过更复杂的DOM或多个跨距。

<span class='clicktarget'>Text Here</span> 

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

希望这有助于

来源

2011-10-31 21:51:30 Jeff

JQuery获取span的内容

回答

相关问题