Javascript 如何检查元素是否是没有JQuery的最后一个子元素

我有一个带有onclick事件的纯Javascript脚本，它在决定做什么之前检查下一个兄弟的值。如果单击的元素是其容器中的最后一个元素（因为访问nextSibling），这将导致错误。我需要首先检查单击的元素是否不是容器中的最后一个元素，但似乎无法找到如何单击

---

注：我不认为这是一个重复。关于检查元素是否是最后一个子元素，有很多问题，但是所有接受的答案通常都使用JQuery。

您可以在元素上使用.nextSibling属性，查看它是否返回为空（未定义等）

这是检查的一种方法：

document.querySelector(":last-child");

这里还有一个：

var isLastChild = (element === element.parentNode.lastChild);

你可以使用

Node.lastChild只读属性返回节点的最后一个子节点。>如果其父节点是元素，则子节点通常是元素节点、>文本节点或注释节点。如果没有子元素，则返回null

---

您得到的错误应该是某种类型的

无法在未定义的
上设置属性

您只需检查下一个元素是否存在：

if (typeof element.nextSibling === "undefined")
    return;

如果要使其与旧浏览器兼容，只需使用：

因此，对于您的特定问题，请在onclick中使用事件对象：

element.onclick = function(event) {
    var parent = event.target.parentNode;
    if(event.target === parent.childNodes[parent.childNodes.length-1])
        // Code here
}

访问一个元素的元素时，如果该元素没有下一个同级元素，您将得到
null
，因此您可以在继续使用代码之前进行检查，如下所示：

if (myElement.nextSibling) {
    // the element has a next sibling
    // go on...
} else {
    // the element is the last child
}

使用节点的
.lastChild
属性

示例：

在这里，我们将删除列表中最后4个子节点


函数clearAll（）{
var sidemenu=document.getElementById（'side_menu'）；
log（“sidemenu.childNodes.length=“+sidemenu.childNodes.length”）；
while（sidemenu.childNodes.length>2）{
console.log（sidemenu.childNodes）；
sidemenu.removeChild（sidemenu.lastChild）；
控制台日志（“删除”）；
log（“sidemenu.childNodes.length=“+sidemenu.childNodes.length”）；
}
log（“我们现在剩下的：”）；
console.log（sidemenu.childNodes）；
}
clearAll（）

清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
关于
var isLastChild=element==element.parentNode.lastChild
？
由于某些原因，所有答案对我都不起作用，我总是看到一个
#text
节点，而不是未定义或null，因此我将我的元素与该元素父元素的最后一个子元素进行比较：

element === element.parentNode.children[element.parentNode.children.length-1] 

或者如果你想把它作为一个函数

function isLastChild(el) {
  return (el === el.parentNode.children[el.parentNode.children.length-1]) 
}

//Useage
if(isLastChild(el)) {
  //Element is the last child of its parent.
}

可能比其他答案要长，但肯定不会让你失望。
询问是否有下一个元素，或者不知道它是否是最后一个元素：

if (typeof element.nextElementSibling == null) {
    //is last
    return;
} else {
    //is not last
}

nextSibling
不是功能谢谢，是的。。。我刚刚将其更改为属性。您可能希望
nextElementSibling
作为
nextSibling
可以是注释。nextElementSibling是正确的属性。这是节点的属性。这不是一个函数您可能已经考虑过了，但是为什么不使用jQuery呢？很有可能它不仅在这里，而且在项目的许多其他地方都会派上用场。你能给我们看一些代码吗。下一步sibling返回
null
，你能检查一下吗？e、 g.
如果（el.nextSibling！=null）{//do this}
@simpleManderson是的。。。所以现在我很尴尬。我有所有这些答案，结果证明我只是测试部署的代码，而不是开发代码。在提问之前，我正确地检查了
nextSibling
，但没有看到它是否起作用。@Joseph实际上，如果您需要元素，您不能依赖
nextSibling
。要检测一个元素，您可以使用
nextElementSibling
，它保证为您提供一个元素（或
null
，如果没有元素），而不是一个文本节点或注释。@MarcoBonelli更适合当前的问题。@Jonathan我不这么认为：使用next sibling属性会更快，您可以使用
if
语句检查元素是否有下一个同级。OP想检查一个元素是否有下一个同级，如果有，就使用它。OP想找到一种方法来检查一个元素是否是最后一个子元素。但我同意他可能只是漏掉了一个空检查，这就是为什么我需要一些代码。
element==element.parentNode.lastChild
读取文档“……子元素通常是元素节点、文本节点或注释节点。”-->在尝试检测最后一个子元素时，此属性不可靠（这也代表
nextSibling
）。检查
element.nextSibling===null
@Lukas如果（！element.nextSibling）
，如果你愿意，你甚至可以做
。看看这个-
function isLastChild(el) {
  return (el === el.parentNode.children[el.parentNode.children.length-1]) 
}

//Useage
if(isLastChild(el)) {
  //Element is the last child of its parent.
}

if (typeof element.nextElementSibling == null) {
    //is last
    return;
} else {
    //is not last
}