元素[attribute]的可行性：nth-​​of-type（n）选择器

Question

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

exclude_from_search => false

我尝试使用<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)')属性的第一个textarea。我一直不明白。我重新阅读documentation并注意到该行

  

选择与具有相同元素名称的兄弟姐妹相关的父元素的第n个子元素。

因为第一个textarea没有for属性，textarea[for]:nth-of-type(1)将返回undefined是有意义的。

我的问题是，将来有可能for选择器返回具有指定属性的第n个元素吗？由于jQuery / CSS的工作方式，这需要一个全新的选择器吗？

Answer 1

  

我的问题是，将来element[attribute]:nth-of-type(n)选择器是否可以返回具有指定属性的第n个元素？

不是真的，因为:nth-of-type()中的“type”具有非常特定的含义，并且因为简单的选择器基于除元素自身特征之外的任何其他标准来匹配元素并不是非常直观的DOM或类似的东西。

  

由于jQuery / CSS的工作方式，这需要一个全新的选择器吗？

是的，这就是选择器4引入:nth-match()的原因，:nth-child()已成为现有$('.example').children(':nth-child(1 of textarea[for])') 的扩展，它根据选择器参数仅考虑元素的子集。请参阅我对this question的回答。在你的情况下，它将是

:eq(0)

这仍未在任何地方实施;希望这会在新的一年里改变。

由于这是jQuery，您可以使用.example，但除非您只有一个这样的.example和一个这样的textarea，否则您可能需要使用{迭代.each()元素{1}}（感谢这些非标准选择器的unintuitive）。

Answer 2

nth-of-type使用来自实际DOM的索引，而不是来自筛选列表，因此nth-of-type(1)会找到第一个textarea <textarea>...</textarea>，但是您按[for] ... {{过滤了它1}}是nth-of-type(2)

<textarea for="1">foo</textarea>是nth-of-type(3)等...

答案是肯定的，你不能使用<textarea for="2">bar</textarea>。

为了获得第一个textarea孩子＆＃34;为＆＃34;你可以使用document.querySelector

nth-of-type

var first = document.querySelector('.example > textarea[for]'); var first = document.querySelectorAll('.example > textarea[for]')[0]; //or jQuery var first = $('.example > textarea[for]:eq(0)'); 索引中的BTW从1开始而不是从0开始...

Answer 3

从我的角度来看，这不是一个限制，它对patters来说已经足够好了。但不是你的情况（选择单个节点），我们根本不需要它。

在你的情况下，你不需要使用第n个类型的（n），因为你选择单个节点而不是一个具有某些模式的集合（奇数，偶数，2n + 1）

对于您的情况，您可以尝试以下

 $('.example textarea[for]').first()

如果你中继有一个场景来选择具有nth-of-type（n）的节点集。是的，它可以解决任何问题。

$('.example textarea[for]:nth-of-type(2n)')  This selector is working well enough.

参见演示＆gt;运行代码片段

$(document).ready(function() {
  setTimeout(function() {
    $('.example textarea[for]:nth-of-type(2n)').css('background-color', 'red');
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>