why is jQuery selector only selecting first hierarchy element on specific website?

Question

I'm trying to select some elements from this website: https://www.pexels.com/

For example I try this simple selector to match all the divs elements inside the div father container with "photos__column" class:

$('div.photos__column div')

But as a result it only selects the first of all of them, why is this happening?

Thanks in advance.

Answer 1

$ could be anything.

Does this site have jQuery at all? You can check it in the browser console via

$.fn.jquery

Querying with native DOM API

document.querySelectorAll('div.photos__column div')

works.

Answer 2

$('div.photos__column div') return an array with all elements with this pattern "div.photos__column div" but whene you call a function like text() , the function text use only the firest rsult of array

if you want to do an operation on all selected element , can you use :

$('div.photos__column div').each(function( index ) {
  console.log( index + ": " + $( this ).attr("src") );
});

or if you want to select element by index , you can call element by hir index for example : $('div.photos__column div')[2]

can you use this query to get all img source from the home page :

var allimegs = document.querySelectorAll(".photo-item__img");
var newsrc = [] ;for(var i = 0;i<allimegs.length;i++){
    newsrc[i] = allimegs[i].getAttribute("src"); 
}