为啥 jQuery 选择器只选择特定网站上的第一个层次结构元素？

Posted 2023-03-05

【中文标题】为啥 jQuery 选择器只选择特定网站上的第一个层次结构元素？

【英文标题】：why is jQuery selector only selecting first hierarchy element on specific website?为什么 jQuery 选择器只选择特定网站上的第一个层次结构元素？

【发布时间】：2020-09-09 21:46:24

【问题描述】：

我正在尝试从该网站中选择一些元素： https://www.pexels.com/

例如，我尝试使用这个简单的选择器将 div 父容器内的所有 divs 元素与“photos__column”类匹配：

$('div.photos__column div')

但结果它只选择了第一个，为什么会发生这种情况？

提前致谢。

【问题讨论】：

您能否发布相关的 html 而不是指向该站点的链接？这将使这对未来的访问者更有用，因为 HTML 可以随时在该网站上更改。

【参考方案1】：

$ 可以是任何东西。

这个网站有 jQuery 吗？您可以通过

在浏览器控制台中查看

$.fn.jquery

使用原生 DOM API 进行查询

document.querySelectorAll('div.photos__column div')

有效。

【讨论】：

详细说明一下，如果你只是使用 Chrome 控制台，$ 是 document.querySelector 的别名，$$ 是 document.querySelectorAll。前者只选择一个元素。事实上，那个网站似乎没有 jQuery。

【参考方案2】：

$('div.photos__column div') 返回一个数组，其中包含具有此模式 "div.photos__column div" 的所有元素，但是当您调用像 text() 这样的函数时，函数文本仅使用数组的最触发结果

如果你想对所有选定的元素进行操作，你可以使用：

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

或者如果你想按索引选择元素，你可以按 hir 索引调用元素，例如：$('div.photos__column div')[2]

您可以使用此查询从主页获取所有 img 源吗：

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