How to get the content of a span element using jQuery?

Question

When a text is clicked on my page, I want to get the value of the nearest (going upwards) span element with the class of 'network_ip'. Here is my code:

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

Here my attempt in jQuery so far:

    $(".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;                   
});

The alert comes up with nothing.

Appreciate any help.

You need to traverse your dom to find the element.. since who knows what divs your span is inside.. you aren't showing your whole structure as I see 2 extra closing divs — wirey00, Nov 14 '12 at 16:34
down vote The problem that you're having is that the network_ip isn't an ancestor of domain. You have to find a common ancestor and it is hard to tell what that is since your HTML sample is incomplete here. — Jay Blanchard, Nov 14 '12 at 16:36
@wirey Apologies, I've amended this now. The span element which I'm interested in, is in a div.flag_and_ip which is in a div with an inline style which is in a div.ip_header — Mr B, Nov 14 '12 at 17:04
@Sid I think you're missing the closing div around your table.. I added it in my anwer. I explained how I traversed your structure though — wirey00, Nov 14 '12 at 19:04

score 1 · Accepted Answer · answered Nov 14 '12 at 19:03

What you need to do is this

$(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/

score 0 · Answer 2 · answered Nov 14 '12 at 18:04

You really should find a better way of linking the anchor to the span - i.e. use IDs or data- attributes.

But since you asked for searching for the nearest span going upwards, here you go:

$(".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;
});

This takes all the parents of the anchor and loops from the nearest parent upwards. For each parent it checks previous siblings using .prevAll() and looks for the span. Finally, it takes the last from the found spans - i.e. the "bottom" span if there were more than one.

Working demo here.

How to get the content of a span element using jQuery?

2 Answers2