Question

nth-child是一个非常方便的伪元素选择器，用于定位我想用CSS设置样式的孩子。不幸的是，在尝试确定哪个数字（第n个）是我想要在DOM中定位的孩子时，我度过了一段可怕的时光。

所以我想有没有办法使用JavaScript / JQuery函数来提供DOM中孩子的确切数量？

此外，如果有一个SCSS（sass）功能可以做到这一点，我希望有一些见解。

以下代码可能会准确演示我想要的内容：

<section>
 <p>Little</p>
 <p>Piggy</p>    <!-- Want this one -->
 <p>foo</p>
 <p>bar</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
</section>

这个DOM很简单，我可以定位第二个p孩子p:nth-child(?) { color: red; }。只有我的DOM不那么简单;它有吨和吨p，我不知道它是哪个子编号。

Answer 1

您可以在父{/ 3}}集合中使用indexOf：

[].indexOf.call(child.parentElement.children, child) + 1;

＆＃13;

function getIndex(child) {
  return [].indexOf.call(child.parentElement.children, child) + 1;
}
function getSelector(element) {
  var arr = [];
  while(element.parentElement) {
    arr.push(':nth-child(' + getIndex(element) + ')');
    element = element.parentElement;
  }
  if (element !== document.documentElement) return false;
  return ':root > ' + arr.reverse().join(' > ');
}
var el = document.getElementById('i-want-this-one');
console.log('Index: ' + getIndex(el));
document.styleSheets[0].insertRule(getSelector(el) + ' { color: red; }', 0);

＆＃13;

<section>
 <p>Little</p>
 <p id="i-want-this-one">Piggy</p>
 <p>foo</p>
 <p>bar</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
 <p>String</p>
</section>

＆＃13;

Answer 2

使用Array#find()我们使用谓词从一组元素中找到目标元素。然后我们可以使用@Oriol的方法通过普通父母找到元素的兄弟姐妹。现在我们可以使用Array#indexOf()从兄弟姐妹中获取目标索引，并添加1，因为nth child是1（第一个元素索引是1），Array#indexOf()方法是0基于

function findNth(baseSelector, predicate) {
  var elements = document.querySelectorAll(baseSelector); // find all elements in the page that fit the selector

  var target = [].slice.call(elements, 0).find(predicate); // find the target by using the predicate

  if(!target) { // target not found
    return -1;
  }

  var siblings = target.parentNode.children; // find the target's siblings

  return [].slice.call(siblings, 0).indexOf(target) + 1; // return the target's nth index
}

＆＃13;

function findNth(baseSelector, predicate) {
  var elements = document.querySelectorAll(baseSelector); // find all elements in the page that fit the selector
  
  var target = [].slice.call(elements, 0).find(predicate); // find the target by using the predicate
  
  if(!target) { // target not found
    return -1;
  }
  
  var siblings = target.parentNode.children; // find the target's siblings
  
  return [].slice.call(siblings, 0).indexOf(target) + 1; // return the target's nth index
}

function predicate(element) {
  return element.textContent === 'Piggy';
}

var piggyIndex = findNth('p', predicate);

console.log('The index is:', piggyIndex);

＆＃13;

<section>
 <p>Little</p>
 <p>foo</p>
 <p>bar</p>
</section>

<section>
 <p>Little</p>
 <p>Piggy</p>    <!-- Want this one -->
 <p>foo</p>
 <p>bar</p>
</section>

＆＃13;

Answer 3

一种补救针对错误孩子的可能性的方法是首先识别该部分，然后简单地计入所需的孩子：

＆＃13;

    <style>
    #market p:nth-child(2) {color:#f00}
    </style>
    
    <section id="wall">
    <p>Humpty</p>
    <p>Dumpty</p>
    <p>King's horses</p>
    <p>King's men</p>
    <p>foo</p>
    <p>bar</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    </section>

    <section id="market">
    <p>Little</p>
    <p>Piggy</p>    <!-- Want this one -->
    <p>foo</p>
    <p>bar</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    <p>String</p>
    </section>

＆＃13;

这个孩子是哪一个？

3 个答案: