JQuery 获取跨度的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7960048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery get content of span
提问by Frank
I'm trying to get the content of a span when a button is clicked. This is the html:
我试图在单击按钮时获取跨度的内容。这是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>
I'm trying to get it so that when the button is clicked it will get the value of the span. This is what I'm using:
我正在尝试获取它，以便在单击按钮时获得跨度的值。这是我正在使用的：
$('button.select-location').live('click', function(event){
// set the span value
var span_val = $(this).parent("span").html();
alert('selecting...' + span_val);
});
But the alert is always showing: selecting... null
但警报总是显示：选择...空
回答by gilly3
You want to get the parent first, then find the span:
您想先获取父项，然后找到跨度：
var span_val = $(this).parent().find("> span").html();
Edit:Ever go back and look at code you wrote 2 years agoand groan, "Why did I do that?". The above code is awkward. Instead of .find("> span"), I should have used .children("span").
编辑：曾经回去看看代码，你写了2年前和呻吟声，“为什么我做那？”。上面的代码很尴尬。相反.find("> span")，我应该使用.children("span").
var span_val = $(this).parent().children("span").html();
But, what is a child of your parent? A sibling! So, instead of .parent().children("span"), I should have used .siblings("span").
但是，你父母的孩子是什么？一个兄弟！因此，.parent().children("span")我应该使用.siblings("span").
var span_val = $(this).siblings("span").html();
But, looking at the HTML, we don't even need to dig through the siblings, we know it's the next sibling:
但是，查看 HTML，我们甚至不需要挖掘兄弟姐妹，我们知道它是下一个兄弟姐妹：
var span_val = $(this).next("span").html();
or just:
要不就：
var span_val = $(this).next().html();
By this point, we're barely using jQuery at all. We couldjust say:
到目前为止，我们几乎没有使用 jQuery。我们只能说：
var span_val = this.nextSibling.innerHTML;
But, maybe now I've swung the pendulum too far the other way?
但是，也许现在我已经把钟摆摆得太远了？
回答by genesis
It's not button's parent. divis button's parent and spanis children of the div. Try
它不是按钮的父级。div是button的父级并且span是 的子级div。尝试
var span_val = $(this).parent().children("span").html();
instead.
反而。
回答by Emil
$('button.select-location').live('click', function(event){
var span_val = $(this).next("span").html();
alert('selecting...' + span_val);
});
回答by Ben
The span isn't a parent of the '.select-location' button, but the div is (which the span is in). Using your markup, try something like this:
跨度不是“.select-location”按钮的父级，但 div 是（跨度所在的）。使用您的标记，尝试这样的事情：
var spanVal = $(this).parent('.multiple-result').find('span').html();
回答by Bjarki Heiear
Here is a Jsfiddler demo using jQuery next
下面是一个使用jQuery的 Jsfiddler 演示
$('button.select-location').live('click', function(event){
// set the span value
var span_val = $(this).next().html();
alert('selecting...' + span_val);
});
回答by JeffBaumgardt
Depending on how many spans you have but if the span will always come directly after the button then the .next('span')will work. If you plan on placing the button anywhere else within the same parent div then you will need to navigate the dom to find it.
取决于你有多少跨度，但如果跨度总是直接在按钮之后，那么.next('span')它将起作用。如果您打算将按钮放置在同一个父 div 中的任何其他位置，那么您将需要导航 dom 以找到它。
$('selector').click(function() {
$(this).parent().find('span');
)};
Also it may be best to add a targetable class or attribute to the span to target it better incase you do plan on a more complex dom or multiple spans.
此外，最好将可定位的类或属性添加到跨度以更好地定位它，以防您计划使用更复杂的 dom 或多个跨度。
<span class='clicktarget'>Text Here</span>
$('button.select-location').click(function() {
var span_val = $(this).parent('div').find('span.clicktarget').html();
});
Hope this helps
希望这可以帮助
