querySelector() - 第一个内部元素

问题描述 投票:2回答:2

我正在使用SVG.js select()函数,该函数使用querySelector()函数。

目前,我使用的命令是:select("[id='1']")(1可以被其他一些数字替换)

我想做的是选择这个元素中的第一个内部元素。或者,我可以通过标签名称来选择它。

怎么做?

我试过select("[id='1']:first")但收到错误。

顺便说一句,我选择它的原因是,显然querySelector有一个id为数字的问题。

javascript jquery svg jquery-selectors selectors-api
2个回答
5
投票

:first是一个jQuery的东西。对于你正在做的事情,你可以使用:first-child,这是a CSS thing

select("[id='1'] > :first-child");

该选择器使用id="1"匹配所有元素的第一个子元素,但如果select在封面下使用querySelector,您将获得第一个这样的元素。

请注意,>就是child combinator:这意味着我们正在寻找:first-child内的[id='1']。 (这个答案的早期版本使用[id='1'] :first-child,它使用descendant combinator [只是空格]。选择元素列表很重要,但是如果只选择第一场比赛则不重要。)(你需要一个或另一个,因为没有任何组合器([id='1']:first-child),它会看到第一个[id='1'],也是一个:first-child。)


1
投票

“我使用的是使用select()函数的SVG.js querySelector()函数。”

但是根据TJ的回答你的评论表明它使用了querySelectorAll()。有区别。

“我想做的是选择这个元素中的第一个内部元素。”

如果它确实使用querySelector,那么使用此选择器:

"[id='1'] > *"

那将为你提供[id='1']元素中的第一个子元素。

但如果它实际上使用querySelectorAll,那么使用TJ的:first-child选择器将起作用,但正如他所指出的,你需要知道它将返回所有父元素的第一个子元素。

您可以使用>子选择器来确保只有一个。

"[id='1'] > :first-child"

“或者,我可以通过标签名称选择它。怎么做?”

我不知道你指的是哪个元素,但一般来说,如果选择器在属性或位置上选择,则包括标记名称。这将极大地帮助引擎缩小元素集。

// querySelector       // querySelectorAll
"div[id='1'] > p" ... "div[id='1'] > :first-child"

“我尝试了select("[id='1']:first"),但收到了错误。”

正如TJ所说,这是一个无效的选择器。 jQuery的选择器引擎以不同的方式不符合标准。保持你的选择器尽可能纯净,这样你就不会迷上不必要的依赖。

“顺便说一句,我选择它的原因是,显然querySelector有一个id是数字的问题。”

如果您逃避前导号码,您可以按数字选择。

"#\\1 > *"
© www.soinside.com 2019 - 2024. All rights reserved.