我正在使用SVG.js select()函数,该函数使用querySelector()函数。
目前,我使用的命令是:select("[id='1']")
(1可以被其他一些数字替换)
我想做的是选择这个元素中的第一个内部元素。或者,我可以通过标签名称来选择它。
怎么做?
我试过select("[id='1']:first")
但收到错误。
顺便说一句,我选择它的原因是,显然querySelector有一个id为数字的问题。
: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
。)
“我使用的是使用
select()
函数的SVG.jsquerySelector()
函数。”
但是根据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 > *"