Question

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

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

Answer 1

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

Answer 2

您可以使用node.lastChild Property

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

var tr = document.getElementById("row1");
var corner_td = tr.lastChild;

Answer 3

您得到的错误应该是某种can't set property on undefined。

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

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

Answer 4

这是一种检查方法：

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

还有一个：

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

Answer 5

如果您尝试将其与旧版浏览器兼容，请使用childNodes：

// Last element in the body
document.getElementsByTagName('body')[0].childNodes[document.getElementsByTagName('body')[0].childNodes.length-1]

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

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

Answer 6

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

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

Answer 7

使用节点的.lastChild属性。

示例：

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

＆＃13;
＆＃13;
function clearAll() { var sidemenu = document.getElementById('side_menu'); console.log("sidemenu.childNodes.length = " + sidemenu.childNodes.length); while (sidemenu.childNodes.length > 2) { console.log(sidemenu.childNodes); sidemenu.removeChild(sidemenu.lastChild); console.log("removed"); console.log("sidemenu.childNodes.length = " + sidemenu.childNodes.length); } console.log("What we have left now:"); console.log(sidemenu.childNodes); } clearAll();
＆＃13;
<ul id="side_menu"> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> </ul>
＆＃13;
＆＃13;
＆＃13;

了解详情： Node.lastChild - Web API Interfaces | MDN

Answer 8

var isLastChild = element === element.parentNode.lastChild怎么样？

Answer 9

由于某种原因，没有一个答案对我有用，所以我总是最终看到一个#text节点而不是undefined或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.
}

可能会比其他答案更长，但不会使您失望。

Answer 10

询问是否存在下一个元素，不知道它是否是最后一个元素：

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

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

10 个答案: