Search code examples
jqueryjquery-selectorshtml-parsing

Inconsistent behavior of jQuery selectors on goodreads site

Trying to extract quotes from goodreads site and met inconsistent behavior. For example go to this page: https://www.goodreads.com/quotes?page=56 and run this selector in Chrome console: jQuery(".quote") you will get a list of nodes where quote of Mark Twain:

“Everyone is a moon, and has a dark side which he never shows to anybody.” ― Mark Twain

Is the second one, you can visually see that it's the second.

But when you run: jQuery(".quotes .quote:nth-of-type(2)") it returns nothing, and only if you run jQuery(".quotes .quote:nth-of-type(3)") it returns Mark Twain's quote which supposed to be second, not third.

Why does this happen?

Solution

  • Inspect the elements on that page, and you get:

    enter image description here

    The second element is not a .quote, but:

    <div data-react-class="ReactComponents.NativeAd" ... ></div>

    So .quotes .quote:nth-of-type(2) does not select anything, because none of the .quote elements are the second child of the .quotes parent; that's where the advertisement is.

    .quotes .quote:nth-of-type(3) selects the second quote because the ad is in between the first and second quote, so the second quote is actually the 3rd child of its parent.

    Remember that nth-of-type selects the nth tag name. Here, since all the children are <div>s, .quotes .quote:nth-of-type(3) selects the third <div>, which happens to be a .quote. (It does not select the nth element in the class collection)