jquery selector doesn't give all elements

Question

In the next web page I want to select all <li> elements with Jquery. I want to select all the products that are inside <ul class=search-result-gridview-items"> https://www.walmart.com/browse/home-improvement/air-quality/1072864_133032_1231459

I have tried:

$(".search-product-result ul li")
$("ul.search-result-gridview-items li")

Also I have tried:

$("li")
$("ul li")
$("section li")

to select all <li> and none works. All of them give one <li> and not all.

Why this happens?

On the linked webpage, are you sure jQuery is loaded and that $ is not an alias for something else? — Guillaume Rochat, Jul 07 '17 at 15:12
If you're using Chrome dev tools console, $ is equivalent to `document.querySelector()` and will only return the **first** element. If you had actual jQuery loaded your selectors would return all respective elements. jQuery might simply not be loaded on their page. See this [question](https://stackoverflow.com/questions/14308588/simple-jquery-selector-only-selects-first-element-in-chrome) — Alexander Staroselsky, Jul 07 '17 at 15:12
From close vote: Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the **shortest code necessary to reproduce it in the question itself.** It's not possible to reproduce your problem so any answer will be speculative at best (a lucky guess). Please also read [mcve]. — freedomn-m, Jul 07 '17 at 15:15
You can see the html of the page. Also try with the console in Chrome. In this page that is in the same website of walmart.com it works. https://www.walmart.com/browse/home-improvement/air-conditioners/1072864_133032_133026/?cat_id=1072864_133032_133026#searchProductResult — Rey Cruz, Jul 07 '17 at 15:19
If you compare the source of the two different pages, jQuery is referenced in the second one, but **not** in the first. This likely means the first page does **not** load jQuery at all, which is why the behavior is different on the first. — Alexander Staroselsky, Jul 07 '17 at 15:22

score 5 · Accepted Answer · answered Jul 07 '17 at 15:16

5

Because the website is not using jQuery. console.log(window.jQuery) return undefined

Most probably the $ is bind to some function

You can use vanila javascript to get all elements using

document.querySelectorAll('ul.search-result-gridview-items li')

answered Jul 07 '17 at 15:16

slashsharp

2,823
2
19
26

score 0 · Answer 2 · answered Jul 07 '17 at 15:11

0

If that is the actual HTML code that you've got in your site, the problem most likely is with the class declaration on the <ul>.

You have it noted as <ul class=search-result-gridview-items"> when it should be <ul class="search-result-gridview-items">.

You're missing the opening double quotes before the class name.

answered Jul 07 '17 at 15:11

Ryan

579
1
5
17

2

That doesn't explain why `$("li")` only yields one item though. – Niet the Dark Absol Jul 07 '17 at 15:11
@NiettheDarkAbsol it might do - if everything after the missing quote is parsed as a big long string. – Jamiec Jul 07 '17 at 15:12
1

Without seeing a full sample of the HTML that the OP is working with, it's kind of a moot point. We're ultimately guessing. – Ryan Jul 07 '17 at 15:14
If Chrome dev tools are being using with `$`, if jQuery is NOT loaded, `$` acts the same as `document.querySelector()` only returning the first element. Walmart uses React and may not even be loading jQuery. – Alexander Staroselsky Jul 07 '17 at 15:16
1

@AlexanderStaroselsky Edge implements this too. – Niet the Dark Absol Jul 07 '17 at 15:18

score 0 · Answer 3 · answered Jul 07 '17 at 15:12

0

Doing $('.search-result-gridview-items').children seems to work for me

answered Jul 07 '17 at 15:12

Malpp

5
5

score -2 · Answer 4 · edited Jul 07 '17 at 15:15

-2

Did you try using Child Selector (“parent > child”)?

$( ".search-product-result > li" )

Check more info here: https://api.jquery.com/category/selectors/hierarchy-selectors/

edited Jul 07 '17 at 15:15

Jamiec

133,658
13
134
193

answered Jul 07 '17 at 15:14

Andre Agapito

1
2

The `ul` has class `search-result-gridview-items`, so the `search-product-result` is the parent of the `ul` so this will not work as the `li` must be a direct child of a `ul`. – freedomn-m Jul 07 '17 at 15:16

jquery selector doesn't give all elements

4 Answers4