Search code examples
jqueryselectelementparent

JQuery: How to select fifth parent element of a div?

http://www.netindex.com/download/allcountries/

I want to load the div with the class .ranking-item for Germany. I am targeting the div with .DE and then try to get the fifth parent of that.

var ger = $('<div />').load( "proxy.php?url=http://www.netindex.com/download/allcountries/&mode=native&callback=complete .top-20-countries .DE");

Tried :parent, .parent(), .closest() all to no avail.

Solution

  • The HTML looks like this:

    <ol class="ranking">
    <li class="ranking-item">
  <a class="ranking-link" href="/download/2,91/Hong-Kong/">
    <div class="figure">
      <b class="figure-content">84.01</b>
      <span class="figure-unit">Mbps </span>
    </div>
    <div class="ranking-content">
      <div class="ranking-heading">
        <i class="flag HK"></i>Hong Kong
      </div>
      <div class="ranking-chart country-list"><svg width="280" height="20">...</svg></div>
    </div>
  </a>
</li>
...
</ol>

    The fifth parent of the <i> tag is the <ol class="ranking"> element, so use .ranking:has(.de) as a single selector to pass into .load():

    var ger = $('<div />').load( "proxy.php?url=http://www.netindex.com/download/allcountries/&mode=native&callback=complete .ranking:has(.DE)");