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

Question

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

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

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

Answer 1

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

Answer 2

您可以简单地询问其 .index() 位置（相对于其兄弟姐妹）。

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

Answer 3

对于 #thing 中所有非第一个子元素的 li：

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

请参阅 http://api.jquery.com/not-selector/

Answer 4

另外，您可以检查是否定义了 $(this).prev().length ，如下所示：

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

Answer 5

如果您想选择除第一个子项之外的所有项，请按以下步骤操作：

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

Answer 6

检查索引

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

Answer 7

保持简单，使用 DOM

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

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

});

Answer 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

Answer 9

jQuery .not()

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

Answer 10

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

Answer 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