Jsoup getElementsByClass gives size 0 Elements

Question

I'm trying to write a program that fetches weather information from weather.com by using JSoup. This is what I have so far:

import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import org.jsoup.Jsoup;

public class WeatherComHandler {
    private Element ForeCastDiv;

    public static void main(String[] args) {
        WeatherComHandler wch = new WeatherComHandler("http://www.weather.com/weather/today/Brussels+BEXX0005:1:BE");
        wch.getTodaysForeCast();
    }

    public WeatherComHandler(String url) {
        getForeCastDiv(url);
    }

    private void getForeCastDiv(String url) {
        try {            
            Document doc = Jsoup.connect(url).get();
            ForeCastDiv = doc.getElementById("wx-forecast-container");
        }    catch(Exception e) {
            e.getStackTrace();
        }
    }

    public void getTodaysForeCast() {
        System.out.println(ForeCastDiv.toString());
        System.out.println(ForeCastDiv.hasClass("wx-data-part wx-first"));
        Elements todaysElements = ForeCastDiv.getElementsByClass("wx-data-part wx-first");
        System.out.println(todaysElements.size());
    }
}

This is the output:

    <div id="wx-forecast-container"> 
<div class="wx-today wx-module wx-grid3of6"> 
  <div class="wx-title-container"> 
   <h2 class="wx-title"><img src="http://i.imwx.com/common/My.png" /> Forecast for Today</h2> 
   <div class="wx-updated">
    Updated: Oct 28, 5:45pm Local Time
   </div> 
   <div class="wx-promo-links wx-cond wx-severe wx-severe-0"> 
    <ul class="wx-links"> 
  <li class="wx-icon wx-cond wx-desktop"> <a class="wx-icon wx-cond wx-desktop" href="/apps/desktop-weather" location="" from="today_promo_1" title="Weather on my Desktop">Desktop App</a> </li> 
    </ul> 
   </div> 
  </div> 
  <div class="wx-weather-details"> 
   <div class="wx-timepart-title wx-first">
  Right Now 
    <div class="wx-module wx-grid1of6 wx-weather wx-love-module wx-cond-bg"> 
  <div class="wx-module-inner"> 
  <div class="wx-icon wx-social wx-balloon-wt-lt wx-clickable wx-love-ugh" data-good="true" data-share-trx="" data-share-icon="http://s.imwx.com/img/common/social/lmw-love.jpg" title="Love My Weather" data-share-desc="It's 55&deg;F, Clear"> 
  <div class="wx-icon wx-social wx-heart"></div> 
  <h4 data-share-title="Love! Right now in Brussels, Belgium"></h4> 
  </div> 
  <div class="wx-icon wx-social wx-balloon-wt-rt wx-clickable wx-love-ugh" data-good="false" data-share-trx="" data-share-icon="http://s.imwx.com/img/common/social/lmw-ugg.jpg" title="Don't Love My Weather" data-share-desc="It's 55&deg;F, Clear"> 
  <h4 data-share-title="Ugh! Right now in Brussels, Belgium"></h4> 
  </div> 
  </div> 
    </div> 
   </div> 
   <div class="wx-timepart-title">
  Earlier Today 
   </div> 
   <div class="wx-timepart-title">
    Tonight
   </div> 
   <div class="wx-data-part wx-first"> 
    <img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/31.png" height="120" width="120" alt="Clear" class="wx-weather-icon" /> 
   </div> 
   <div class="wx-data-part"> 
    <img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/34.png" height="120" width="120" alt="Fair / Windy" class="wx-weather-icon" /> 
   </div> 
   <div class="wx-data-part"> 
    <img src="http://s.imwx.com/v.20131006.214956/img/wxicon/120/29.png" height="120" width="120" alt="Partly Cloudy" class="wx-weather-icon" /> 
   </div> 
   <div class="wx-data-part wx-first"> 
    <div class="wx-temperature">
  <span itemprop="temperature-fahrenheit">55</span>
  <span class="wx-degrees">&deg;<span class="wx-unit">F</span></span>
    </div> 
    <div class="wx-temperature-label">
  FEELS LIKE 
  <span itemprop="feels-like-temperature-fahrenheit">55</span>&deg;
    </div> 
   </div> 
   <div class="wx-data-part"> 
    <div class="wx-temperature">
  62
  <span class="wx-degrees">&deg;</span>
    </div> 
    <div class="wx-temperature-label">
  HIGH AT 11:45 AM
    </div> 
   </div> 
   <div class="wx-data-part"> 
    <div class="wx-temperature">
  47
  <span class="wx-degrees">&deg;</span>
    </div> 
    <div class="wx-temperature-label">
  LOW
    </div> 
   </div> 
   <div class="wx-data-part wx-first"> 
    <div class="wx-phrase ">
  Clear
    </div> 
    <div class="wx-obs-qualifier "> 
  <span class="wx-hide" itemprop="observation-qualifier">OQ1190</span> 
  <span class="wx-hide" itemprop="observation-qualifier-severity">2</span> 
  <span itemprop="observation-qualifier-phrase">Locations nearby are reporting rain with wind.</span> 
    </div> 
   </div> 
   <div class="wx-data-part"> 
    <div class="wx-phrase ">
  Fair / Windy
    </div> 
   </div> 
   <div class="wx-data-part"> 
    <div class="wx-phrase ">
  Partly Cloudy
    </div> 
   </div> 
   <div class="wx-data-part wx-first"> 
    <h6 class="wx-label">Past 24-hr Precip:</h6> 
    <div class="wx-data">
  0.34 in 
  <span class="wx-estimated">(est.)</span>
    </div> 
   </div> 
   <div class="wx-data-part"> 
    <h6 class="wx-label"></h6> 
    <div class="wx-data"></div> 
   </div> 
   <div class="wx-data-part"> 
    <h6 class="wx-label">Chance of <span class="wx-firstletter">rain</span></h6> 
    <div class="wx-data">
  <span class="wx-icon wx-raindrop"></span>20%
    </div> 
   </div> 
   <div class="wx-collapsible"> 
    <div class="wx-data-part wx-first wx-wind"> 
  <h6 class="wx-label">Wind:</h6> 
  <div class="wx-data"> 
  <div class="wx-icon wx-dir-arrow-sm wind-dir-SW"></div> 
  <div class="wx-wind-label">
  SW at 17 mph
  </div> 
  </div> 
    </div> 
    <div class="wx-data-part wx-wind"> 
  <h6 class="wx-label"></h6> 
  <div class="wx-data"> 
  <div class="wx-wind-label"></div> 
  </div> 
    </div> 
    <div class="wx-data-part wx-wind"> 
  <h6 class="wx-label">Wind:</h6> 
  <div class="wx-data"> 
  <div class="wx-icon wx-dir-arrow-sm wind-dir-SW"></div> 
  <div class="wx-wind-label">
  SW at 18 mph
  </div> 
  </div> 
    </div> 
    <div class="wx-data-part wx-first"> 
  <h6 class="wx-label">Humidity:</h6> 
  <div class="wx-data">
  76%
  </div> 
    </div> 
    <div class="wx-data-part"> 
  <h6 class="wx-label"></h6> 
  <div class="wx-data"></div> 
    </div> 
    <div class="wx-data-part"> 
  <h6 class="wx-label">Humidity:</h6> 
  <div class="wx-data">
  82%
  </div> 
    </div> 
    <div class="wx-data-part wx-first"> 
  <h6 class="wx-label">UV Index:</h6> 
  <div class="wx-data">
  0 - Low
  </div> 
    </div> 
    <div class="wx-data-part"> 
  <h6 class="wx-label"></h6> 
  <div class="wx-data"></div> 
    </div> 
    <div class="wx-data-part"></div> 
    <div class="wx-data-part wx-first "> 
  <h6 class="wx-label"></h6> 
  <p class="wx-text"></p> 
    </div> 
    <div class="wx-data-part "> 
  <h6 class="wx-label"></h6> 
  <p class="wx-text"></p> 
    </div> 
    <div class="wx-data-part "> 
  <h6 class="wx-label">Tonight:</h6> 
  <p class="wx-text">Partly cloudy skies. Low 47F. Winds SW at 15 to 25 mph.</p> 
    </div> 
    <div class="wx-astro-neighbor"> 
  <div class="wx-data-part wx-first"> 
  <h6 class="wx-label">Pressure:</h6> 
  <div class="wx-data">
  <span itemprop="barometric-pressure-incheshg"> 29.59 in </span>
  <span class="wx-icon wx-dir-arrow-sm wx-pressure-steady"></span>
  </div> 
  </div> 
  <div class="wx-data-part wx-first wx-dewpoint"> 
  <h6 class="wx-label">Dew Point: <span class="wx-icon wx-long wx-info"> <i>Humidity becomes more noticeable as the dew point rises above 60&deg;F. Readings above 75&deg;F can feel stifling.</i> </span> </h6> 
  <div class="wx-data">
  47&deg;
  </div> 
  </div> 
  <div class="wx-data-part wx-first"> 
  <h6 class="wx-label">Visibility:</h6> 
  <div class="wx-data">
  6.0 mi
  </div> 
  </div> 
    </div> 
    <div class="wx-astro-details"> 
  <h3 class="wx-astro-title">Sun &amp; Moon</h3> 
  <dl class="wx-first"> 
  <dt>
  Sunrise:
  </dt> 
  <dd>
  7:28 am
  </dd> 
  <dt>
  Sunset:
  </dt> 
  <dd>
  5:25 pm
  </dd> 
  </dl> 
  <dl> 
  <dt>
  Moonrise:
  </dt> 
  <dd>
  12:27 am
  </dd> 
  <dt>
  Moonset:
  </dt> 
  <dd>
  2:32 pm
  </dd> 
  </dl> 
  <dl class="wx-moonphase-container"> 
  <dt>
  Moonphase:
  </dt> 
  <dd> 
  <div class="wx-icon wx-moonphase wx-moon-23"></div> 
  <div class="wx-moonphase-label">
  Waning Crescent
  </div> 
  </dd> 
  </dl> 
    </div> 
   </div> 
  </div> 
  <div class="wx-toggle-collapsible-container"> 
   <div class="wx-toggle-collapsible wx-clickable"> 
    <div class="wx-control wx-expand-control" tracktype="action" trackstr="today_rightnow_showmore">
  <span class="wx-icon wx-arrow wx-mb-lg-dn"></span>Open Weather Details
    </div> 
    <div class="wx-control wx-collapse-control wx-hide" tracktype="action" trackstr="today_rightnow_showless">
  <span class="wx-icon wx-arrow wx-mb-lg-up"></span>Close Weather Details
    </div> 
   </div> 
  </div> 
  <div class="wx-pagination-linkers"> 
   <div class="wx-next-linker"> 
    <ul class="wx-links"> 
  <li class=""> <a class="" href="/weather/hourbyhour/graph/Brussels+BEXX0005:1:BE" location="" from="today_rightnow-Today_tempGraph_1" title="">Hourly Forecast</a> </li> 
    </ul> 
   </div> 
  </div> 
</div> 
<script>$("#wx-icon wx-long wx-info").attr('title','This is the hover-over text');</script> 
<div id="wunderground-lightbox" class="wx-dialog"> 
  <div class="wx-close" title="Close">
   <div class="wx-icon"></div>
  </div> 
</div> 
<div class="wx-combinedPromo wx-module wx-grid3of6"> 
  <div class="wx-commuter-promo" data-classname="wx-grid-2" from="today-commuterpromo" data-layers="traffic,weather" data-locationinus="false" data-backgroundimageurl="" data-location-zoom="10" data-location-latitude="50.85045" data-location-longitude="4.34878"> 
   <div class="wx-commute-promo-callout-title"> 
    <div class="wx-titleIconHolder"> 
  <img class="wx-titleIcon" src="http://s.imwx.com/img/module/TrafficCams_16x16.png" /> 
    </div> 
    <div class="wx-titleText">
  NEW! Traffic &amp; Commuter Forecast
    </div> 
   </div> 
  </div> 
</div> 
<div class="wx-clear"></div> 
<div class="wx-scroll-tracking wx-scroll-pres" data-modulecode="ScrollTracking1_Today" data-location="BEXX0005:1:BE" data-groupname="weblocal"></div> 
<div class="wx-free-title "> 
  <h3>Latest Stories</h3> 
</div> 
<div id="wx-rightnowsecond-container"> 
  <div id="wx-rightnow-container"> 
   <div class="wx-module wx-mod1 wx-corsican wx-1x155M wx-render-mode" id="mod_4" data-vr-zone="today_beta_Media_top2"> 
    <div class="wx-inner" data-vr-contentbox=""></div> 
   </div> 
   <div class="wx-module wx-mod1 wx-corsican wx-1x155M wx-render-mode" id="mod_5" data-vr-zone="today_beta_Media_top1"> 
    <div class="wx-inner" data-vr-contentbox=""></div> 
   </div> 
  </div> 
  <div class="wx-module wx-trending-stories wx-tabbed-content wx-grid2of6"> 
   <div class="wx-inner"> 
    <h2 class="wx-title">Most Popular</h2> 
    <ul class="wx-tabs" data-vr-zone="Most Popular"> 
  <li class="wx-tab wx-active" data-tab="today" data-vr-contentbox="">Today</li> 
  <li class="wx-tab wx-clickable" data-tab="this_week" data-vr-contentbox="">This Week</li> 
    </ul> 
    <ul class="wx-tab-content" data-tab="today" data-vr-zone="Most Popular"> 
  <li data-vr-contentbox=""><a href="/article/superstorm-sandy-photos-then-and-now-20131024" from="62288_MostPopular_1">Superstorm Sandy: Then and Now (EXCLUSIVE PHOTOS)</a></li>
  <li data-vr-contentbox=""><a href="/article/eerie-nighttime-shots-abandoned-america-20131023" from="62288_MostPopular_2">Eerie Nighttime Shots of Abandoned America</a></li> 
  <li data-vr-contentbox=""><a href="/article/fall-foliage-photos-20131021" from="62288_MostPopular_3">Astounding Fall Photos That Will Make You Say 'Wow!'</a></li> 
  <li data-vr-contentbox=""><a href="/article/nightmares-fear-factory-terrified-reactions-haunted-house-photos-20131001" from="62288_MostPopular_4">Nightmares Fear Factory: Terrified Reactions at Haunted House (PHOTOS)</a></li> 
  <li data-vr-contentbox=""><a href="/article/2013s-worst-cities-asthma-20131025" from="62288_MostPopular_5">The 15 Worst U.S. Cities for Asthma</a></li> 
  <li data-vr-contentbox=""><a href="/video/shocking-end-to-shark-attack-39402" from="62288_MostPopular_6">Shocking End to Shark Attack <span class="wx-icon wx-video wx-trending-video"></span></a></li> 
  <li data-vr-contentbox=""><a href="/video/gigantic-hornets-are-breeding-39247" from="62288_MostPopular_7">Gigantic Hornets Are Breeding <span class="wx-icon wx-video wx-trending-video"></span></a></li> 
  <li data-vr-contentbox=""><a href="/video/18-foot-what-39575" from="62288_MostPopular_8">18-Foot WHAT? <span class="wx-icon wx-video wx-trending-video"></span></a></li> 
    </ul> 
    <ul class="wx-tab-content" data-tab="this_week" style="display:none;" data-vr-zone="Most Popular"> 
  <li data-vr-contentbox=""><a href="/article/superstorm-sandy-photos-then-and-now-20131024" from="62288_MostPopular_1">Superstorm Sandy: Then and Now (EXCLUSIVE PHOTOS)</a></li>
  <li data-vr-contentbox=""><a href="/article/nightmares-fear-factory-terrified-reactions-haunted-house-photos-20131001" from="62288_MostPopular_2">Nightmares Fear Factory: Terrified Reactions at Haunted House (PHOTOS)</a></li> 
  <li data-vr-contentbox=""><a href="/article/eerie-nighttime-shots-abandoned-america-20131023" from="62288_MostPopular_3">Eerie Nighttime Shots of Abandoned America</a></li> 
  <li data-vr-contentbox=""><a href="/article/deadly-venomous-creatures-20131022" from="62288_MostPopular_4">8 Deadly Venomous Creatures and Those Who've Survived (PHOTOS)</a></li> 
  <li data-vr-contentbox=""><a href="/article/fall-foliage-photos-20131021" from="62288_MostPopular_5">Astounding Fall Photos That Will Make You Say 'Wow!'</a></li> 
    </ul> 
   </div> 
  </div> 
</div> 
<div class="wx-map wx-cc-map wx-grid3of6 wx-module pagelet " data-severelocation="false" data-location="BEXX0005" data-location-type="1" data-overlay="" data-zoom="" data-tropical="" data-mapsize="3" data-fragid="frag_newccMap_166739" data-modulecode="beta_CCMap" data-pageid="62288"> 
</div> 
</div>
false
0

The problem is getTodaysForeCast() keeps saying that the size of todaysElements is 0, which it shouldn't be. Could anyone explain me why this is happening or what I'm doing wrong?

thanks in advance.

Answer 1

Jsoup will not accept two combined classes in the getElementsByClass method. Try something like:

    Elements todaysElements = ForeCastDiv.getElementsByAttributeValueContaining("class", "wx-data-part wx-first");

Answer 2

You're passing two separate class names (separated by a space) to both hasClass() and getElementsByClass(), both of which can only handle one class at a time.

Try using select() instead. It allows you to use complex CSS selectors to find elements, like this:

ForeCastDiv.select(".wx-data-part.wx-first")