Question

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

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

});

但警告始终显示：选择... null

Answer 1

您希望先获取父级，然后找到范围：

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;

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

Answer 2

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

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

代替。

<强> Working demo

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 next

的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或多个跨度。

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

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

希望这有帮助

JQuery获得span的内容

6 个答案: