jQuery获取<span>标签内容

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>

我正在尝试实现这样的功能：当按钮被点击时，可以获取 span 标签的值。我正在使用以下代码：

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

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

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

});

但警告一直在显示：选择... 空

- Frank

Answer 1

你想先获取父元素，然后再找到它的子元素span：

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

编辑：你有没有回头看过2年前写的代码，然后咕哝着说：“我为什么要这样做？”。上面的代码很笨拙。我应该使用.children("span")而不是.find("> span")。

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

但是，你父元素的子元素是什么？它是兄弟元素！因此，我应该使用 .siblings("span") 代替 .parent().children("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;

但是，也许现在我已经把摆锤摆得太过极端了？

- gilly3

---

我喜欢这个回答。这基本上就是我的内心独白，每天都是如此。这个回答值得比六个赞更多！ - WheretheresaWill

你是否曾经回顾自己两年前写的代码，然后不禁感叹：“我当时怎么会这样写呢？”如果是的话，请点赞。 - Ajay Kulkarni

我刚刚登录了六年后（在匿名状态下发现这个答案后）只是为了点赞这个对话。太有启发性了。 - CXJ

Answer 2

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

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

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

});

- Emil

Answer 3

不是 '.select-location' 按钮的父元素，但 div 是（span 在其中）。使用您的标记，尝试这样做：

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

- Ben

Answer 4

这是一个使用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);
});

- Bjarki Heiðar

Answer 5

这不是按钮的父级元素。 div 是 button 的父级元素，而 span 是 div 的子元素。请尝试

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

改为使用“instead”。

工作演示

- genesis

Answer 6

根据您拥有的span数量，但如果span始终直接在按钮之后，则.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();
});

希望这能有所帮助。

- JeffBaumgardt