使用Jsoup处理CSS类名称中的空格

Question

I want to select some supermarket product info from this page:

http://www.angeloni.com.br/super/index?grupo=15022

For that I should select <ul> tags with class "lstProd " :

If the class name were "lstProd" it would be easy, but the problem is the whitespace at the end of name. I couldn't make Jsoup deal with it.

I tried the code below and other ways but it always get an empty list.

org.jsoup.nodes.Document document = Jsoup.connect("http://www.angeloni.com.br/super/index?grupo=15022").get();
    org.jsoup.select.Elements list = doc.select("ul.lstProd  ");

the code snippet from html page that I want to get:

<ul class="lstProd  ">
    <li>
        <span class="cod">CÓD. 1341372</span>
        <span class="lnkImgProd">
            <a href="/super/produto?grupo=15022&amp;idProduto=1341372">
                <img src="http://assets.angeloni.com.br/files/images/7/1B/C6/1341372_1_V.jpg" width="120" height="120"
                     alt="Creme Dental SORRISO Super Refrescante Tubo 90g">
            </a>
                    </span>
        <div class="RgtDetProd">
            <div class="boxInfoProd">
                <span class="descr">
                    <a href="/super/produto?grupo=15022&amp;idProduto=1341372">Creme Dental SORRISO Super Refrescante
                        Tubo 90g</a>

                                    </span>

                <ul class="lstProdFlags after">
                </ul>
            </div>
...

Answer 1

I think you are facing two completely separate problems:

1. Jsoup does not load the site you think it loads. The website you specified renders its contents via JavaScript and loads some content after initial page loading through AJAX. JSoup can't deal with this. You either need to investigative the AJAX calls and get them directly with Jsoup, or you use something like selenium webdriver to get the page in a real browser which will render everything as you expect it.

2. CSS class names can't contain spaces for practical purposes ¹ . In HTML spaces are used as separator between class names. Hence <ul class="lstProd "> is the same as <ul class="lstProd"> . In CSS selectors however a class name is specified by .className , ie dot followed by the class name. You can concatinate several classes like this: element.select(".className1.className2")

¹ Technically you can put spaces in CSS classes, but you need to escape them with '\\ ' . See https://mathiasbynens.be/notes/css-escapes or Which characters are valid in CSS class names/selectors?

edit: be more precise about CSS class names

Answer 2

CSS class names CAN contain whitespaces.
And <ul class="lstProd "> is NOT same as <ul class="lstProd"> .

And I can see that you have multiple <ul> with same class name.
The better way to inspect or traverse such element is by nth-child
So to find your required selector you can use #abaProd > ul:nth-child(4)
For more details about nth-child