jquery - 元素[属性] :nth-of-type(n) selector 的可行性

Question

这个问题与选择器的工作方式有关，不是我遇到的问题。我正在使用与此类似的一些 HTML:

<div class="example">
    <textarea>...</textarea>
    <textarea for="1">foo</textarea>
    <textarea for="2">bar</textarea>
    <textarea for="3">hello</textarea>
    <textarea for="4">world</textarea>
</div>

我试图使用 $('.example').children('textarea[for]:nth-of-type(1)') 来选择第一个带有 for 属性。我一直不确定。我重读了 documentation并注意到这条线说

Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

textarea[for]:nth-of-type(1) 会返回 undefined 是有道理的，因为第一个 textarea 没有 for 属性.

那么我的问题是，element[attribute]:nth-of-type(n) 选择器将来是否有可能返回具有指定属性的第 n 个元素？由于 jQuery/CSS 的工作方式，这是否需要一个全新的选择器？

Answer 1

My question then is, would it be possible in the future for an element[attribute]:nth-of-type(n) selector to return the nth element with the specified attribute?

不是真的，因为 :nth-of-type() 中的“类型”具有非常具体的含义，并且因为对于一个简单的选择器来说，基于任何匹配元素不是很直观除了反射(reflect)在 DOM 或类似元素中的元素自身特征之外的其他标准。

Would this require a whole new selector because of the way jQuery/CSS work?

是的，这就是 Selectors 4 引入 :nth-match() 的原因，它已成为现有 :nth-child() 的扩展，即根据选择器参数仅考虑元素的子集。请参阅我对 this question 的回答。在你的情况下是

$('.example').children(':nth-child(1 of textarea[for])')

这仍然没有在任何地方实现；希望这会在新的一年有所改变。

由于这是 jQuery，您可以使用 :eq(0)，但除非您只有一个这样的 .example 和一个这样的文本区域，否则您可能需要使用 .each() 迭代 .example 元素(感谢这些非标准选择器的 unintuitive)。