js querySelectorAll() 在 className 中包含特定的字符串



我正在渲染自定义组件app.js

return (
{cards.map((index) => {
return <Card key={index} />
)

Card中,我提出了具体的className

return (
<ListItem id="root" className="find-card"> ...

由于<ListItem/>本身是material-ui的一部分,所以它把className转化为

<li class="MuiListItem-root find-card MuiListItem-gutters" id="root">

那么如何使用querySelectorAll()以便它可以找到className中包含特定字符串的所有项目?

我已经尝试使用与本指南相同的方法document.querySelectorAll('li[find-card]')但没有找到。

编辑1:

我遵循了您的建议,浏览器控制台document.querySelectorAll(".find-card")记录了我的所有项目。

我正在尝试实现lazy load这是hook

const imagesRef = useRef(null)
useEffect(
() => {
imagesRef.current = document.querySelectorAll(".find-card")
console.log(document.querySelectorAll(".find-card"))            
},
[imagesRef, cardData.cards]
)

开始时,卡的数量是0,但在滚动数量发生变化时,该钩子会触发,但会记录NodeList []。我还有另一个钩子,可以记录在那lazy load之前加载的数据量。换句话说,当加载项目时,该内容仍显示0,但浏览器控制台显示正确的数量。基本上问题必须在钩子上

编辑2:

我已经更新了上面的useEffect

useEffect(
() => {
imagesRef.current = document.querySelectorAll(".find-card")         
console.log(cardData.cards)
console.log(document.querySelectorAll(".find-card"))
...

这就是我在日志中的内容。起初数组是空的,然后它被填满了,但钩子找不到任何东西。

[]
NodeList []
(5) [Array(4), Array(4), Array(4), Array(4), Array(4)]
NodeList []

溶液:

回顾评论部分

setTimeout()是必需的,document.querySelectorAll(".find-card")运作良好。

useEffect(
() => {
setTimeout(() => {
imagesRef.current = document.querySelectorAll(".find-card")
console.log(cardData.players)
}, 10)
},
[cardData.cards]
)
querySelectorAll

不知道您正在寻找类名。你必须把它表示为.find-card所以querySelectorAll知道要查找该类。这应该是抓取所有具有该类名的元素,不应该比我认为的更复杂。

document.querySelectorAll('.find-card')

若要使用"find-card"类获取元素,请使用以下代码:

document.querySelectorAll('[class="find-card"], [class^="find-card "], [class$=" find-card"], [class*=" find-card "]');

您也可以使用

document.querySelectorAll('.find-card');

document.getElementsByClassName('find-card');

编辑:

这也有效:

document.querySelectorAll('[class~="find-card"]');

相关内容

  • 没有找到相关文章

最新更新