如何使用 jQuery 获取 span 元素的内容？答案

【问题标题】：How to get the content of a span element using jQuery?如何使用 jQuery 获取 span 元素的内容？
【发布时间】：2012-11-03 04:36:37
【问题描述】：

当在我的页面上单击文本时，我想获取具有“network_ip”类的最近（向上）跨度元素的值。这是我的代码：

<div class="ip_header">
<div style="margin-left:30px;">
<div class="flag_and_ip">
<img title="United Kingdom" src="/gearbox/component/ui/htdocs_zend/public/img/mini-flags/gb.gif">
<span class="network_ip">213.171.218.xxx</span>
</div>
<div class="align_count">48</div>
IPs,
<div class="align_count">63</div>
Domains
</div>
</div>
<div class="network_ip_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 4417.6px; display: block;" role="tabpanel">
<h4>
213.171.218.97 (
<b>1</b>
Domains)
</h4>
<p>
<a href="http://private.dnsstuff.com/tools/whois.ch?ip=213.171.218.97&src=ShowIP" target="_blank">IP Whois</a>
,
<a href="http://search.live.com/results.aspx?q=ip%3A213.171.218.97" target="_blank">IP Neighbours</a>
</p>
<table class="table table-striped table-bordered table-condensed">
<colgroup>
<tbody>
<tr>
<td>
<a class="domain" href="#">studentjetpacks.com</a>
</td>
<td>
</tr>
</tbody>
</table>

到目前为止我在 jQuery 中的尝试：

    $(".domain").click(function(){ 
    $("div#list_lm_domain_urls_dialog").dialog('open');
    var domain = $(this).text();
    var network_ip = $(this).closest('span.network_ip').text();

    alert(network_ip);
    refresh_lm_domain_links(domain,0,100);
    return false;                   
});

警报什么都没有。

感谢任何帮助。

【问题讨论】：

你需要遍历你的 dom 才能找到元素.. 因为谁知道你的 span 里面是什么 div.. 你没有显示你的整个结构，因为我看到了 2 个额外的关闭 div
否决票您遇到的问题是 network_ip 不是域的祖先。您必须找到一个共同的祖先，因为您的 HTML 示例在这里不完整，所以很难分辨那是什么。
@wirey 抱歉，我现在已经修改了。我感兴趣的 span 元素位于 div.flag_and_ip 中，该 div 位于 div 中，内联样式位于 div.ip_header
@Sid 我想你错过了你桌子周围的最后一个 div。我在我的回答中添加了它。我解释了我是如何遍历你的结构的

标签： jquery html-parsing dom-traversal dom jquery-traversing

【解决方案1】：

您确实应该找到一种将锚点链接到跨度的更好方法 - 即使用 ID 或 data- 属性。

但是由于您要求向上搜索最近的span，因此您可以：

$(".domain").click(function(){
    var $anchor = $(this);
    $("div#list_lm_domain_urls_dialog").dialog('open');
    var domain = $anchor.text();
    var network_ip;
    $anchor.parents().each(function(){
        var $spans = $(this).prevAll().find('span.network_ip');
        if ($spans.length>0) {
            network_ip = $spans.last().text()
            return false;
        }
    });

    alert(network_ip);
    refresh_lm_domain_links(domain,0,100);

    return false;
});

这会获取锚点的所有父节点，并从最近的父节点向上循环。对于每个父母，它使用.prevAll() 检查以前的兄弟姐妹并查找跨度。最后，它从找到的跨度中获取最后一个 - 即如果有多个跨度，则为“底部”跨度。

Working demo here.

【讨论】：

【解决方案2】：

你需要做的是这个

$(this) // starting from the anchor
   .closest('div.network_ip_content ') // find div that wraps the table content
   .prevAll('.ip_header:first') // get first prev div sibling with class=ip_header
   .find('span.network_ip') // find the span
   .text() // get the text

http://jsfiddle.net/XJvZH/

【讨论】：