如何检查元素是不是不是第一个孩子？

Posted 2023-03-05

【中文标题】如何检查元素是不是不是第一个孩子？

【英文标题】：How to check if the element is not the first-child?如何检查元素是否不是第一个孩子？

【发布时间】：2011-04-10 05:45:23

【问题描述】：

如何知道当前元素是否不是第一个子元素？

它应该与$(this)一起使用，例如：

$("li").click(function(e) 
    if (/* $(this) is not the first-child */)
    
        /* do something */
    
);

【参考方案1】：

您可以这样做只是为了测试一个元素是否是第一个子元素：$(this).is(':first-child')。 :last-child 等其他选择器也可以使用。

【讨论】：

这将为所有内容返回true...:first 将检查它是否是 jQuery 集合中的第一项，我相信您可能想要:first-child

另外，.not(':first-child') 仍将返回一个 jQuery 集，而不是布尔值....is(':not(:first-child)')....

当@WorkingHard 询问何时“不是”第一个孩子时，如果元素“是”第一个孩子，则此解决方案将返回。更不用说基本上所有的答案都是由@gnarf 给出的。我希望@gnarf 回答了这个问题，并且 SO 用户没有投票给错误的答案（当它全错时它至少有 3 分）。

把它变成“不是”就是添加!操作符的问题。

耸耸肩我评论是为了让他的回答更好（或者至少是正确的；））

【参考方案2】：

你可以简单地询问它的.index() 位置（相对于它的兄弟）。

$(this).index();   // returns a zero based index position

【讨论】：

有趣的是，.index() 将为第一个孩子返回 0，这是错误的，其他任何事情都是真的，因此，.index() 实际上会为除第一个孩子之外的任何事情返回 true ...完美的答案

我认为这更像是 .index() 的副作用，但确实是不错的观察结果。

不确定我是否在 jQuery 中看到了一个错误，但我有一些可以在 firebug 中看到的 parentDiv.parent('td') 包含 1 个元素。 parentDiv.parent('td').size() 为 1，但 parentDiv.parent('td').index() 返回 -1。有人知道为什么吗？

这是一个非常好的测试项目是否不是第一个的方法。谢谢！ if ( $(this).index() ) //那么它不是第一个

【参考方案3】：

对于#thing 中不是第一个孩子的所有li：

$('#thing li:not(:first-child)')

见http://api.jquery.com/not-selector/

【参考方案4】：

如果您想选择除第一个孩子以外的所有内容，方法如下：

$('#some-parent').children().not(':first')

【参考方案5】：

此外，您可以检查是否定义了$(this).prev().length，例如：

if (!$(this).prev().length) //This means $(this is the first child
    //do stuff

【讨论】：

非常好，我认为最易读并且与我的其他实现相匹配。替代长度使用 .size()

【参考方案6】：

检查索引

$(this).index() == 0 // is first

【参考方案7】：

保持简单，使用 DOM

$("li").click(function(e) 

    if (this.previousSibling != null)
    
        /* do something */
    

);

【参考方案8】：

对于想要普通 JS 解决方案的人：

<div id="parent">
  <div id="child-1"></div>
  <div id="child-2"></div>
  <div id="child-3"></div>
</div>

let element = document.getElementById('child-1');
console.log(element.parentElement.firstElementChild === element); // true
console.log(element.parentElement.lastElementChild === element);  // false

element = document.getElementById('child-2');
console.log(element.parentElement.firstElementChild === element); // false
console.log(element.parentElement.lastElementChild === element);  // false

element = document.getElementById('child-3');
console.log(element.parentElement.firstElementChild === element); // false
console.log(element.parentElement.lastElementChild === element);  // true

这不是最优雅的事情，但它可以完成工作。

您甚至可以以同样的方式检查它是否是第 n 个元素。

let n = 2; // check if it's the 2nd child

let element = document.getElementById('child-2');
// index starts at 0
console.log(element.parentElement.children[-1 + n] === element); // true

【参考方案9】：

jQuery .not()

$(this).not(':first');

【讨论】：

:first 与:first-child 不同，使用.not(':first') 将删除集合中的:first 项。

【参考方案10】：

$("li").click(function(e) 
   if ($(this).index != 0 )
  
      /* do something */
   
);

【参考方案11】：

实现此目的的一种不太复杂（IE 9 兼容）纯/香草 javascript 方法是使用 Element 的 matches 函数。见https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

例子：

console.log( document.querySelectoer( '#my-div' ).matches( ':first-child' ) ); // true or false