Search code examples
jqueryhtml-parsingdom-traversaldomjquery-traversing

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


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.


Solution

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