Question

我正在使用SVG.js select（）函数，该函数使用querySelector（）函数。

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

我想做的是选择此元素中的第一个内部元素。或者，我可以按标签名称选择它。

怎么做？

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

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

Answer 1

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

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

该选择器会匹配所有元素的第一个子元素id="1"，但如果select使用querySelector，那么您将获得第一个这样的元素。

请注意>中的:first-child是child combinator：这意味着我们正在[id='1']内寻找[id='1'] :first-child。（此答案的早期版本使用[id='1']:first-child，它使用descendant combinator [只是空格]。选择元素列表很重要，但如果只选择第一场匹配则不重要。）（你需要一个或另一个，因为没有任何组合器（[id='1']），它会看到第一个:first-child也是/* get 3x3 neighbourhood, padding for boundaries Params: out - return pointer for neighbourhood binary - the binary image width - image width height - image height x, y - centre pixel x, y co-ordinates border - value to pad borders with. Notes: pattern returned is 0 1 2 3 4 5 6 7 8 where 4 is the pixel at x, y. */ static void get3x3(unsigned char *out, unsigned char *binary, int width, int height, int x, int y, unsigned char border) { if(y > 0 && x > 0) out[0] = binary[(y-1)*width+x-1]; else out[0] = border; if(y > 0) out[1] = binary[(y-1)*width+x]; else out[1] = border; if(y > 0 && x < width-1) out[2] = binary[(y-1)*width+x+1]; else out[2] = border; if(x > 0) out[3] = binary[y*width+x-1]; else out[3] = border; out[4] = binary[y*width+x]; if(x < width-1) out[5] = binary[y*width+x+1]; else out[5] = border; if(y < height-1 && x > 0) out[6] = binary[(y+1)*width+x-1]; else out[6] = border; if(y < height-1) out[7] = binary[(y+1)*width+x]; else out[7] = border; if(y < height-1 && x < width-1) out[8] = binary[(y+1)*width+x+1]; else out[8] = border; }`。）

Answer 2

“我正在使用使用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 > *"

querySelector（） - 第一个内部元素

2 个答案: