javascript - 检查 div 之后是否存在某些东西

Question

只是想知道，我可以做些什么来检查 div 之后是否存在任何东西。在这个例子中，在这种情况下应该返回True：

http://jsfiddle.net/BsqTg/1/

http://jsfiddle.net/BsqTg/2/

在这种情况下应该返回False：

http://jsfiddle.net/BsqTg/3/

我尝试使用 $('#text').next().length ，但不起作用。第一个示例特别。

Answer 1

但是，不确定是否存在更短的方式：

var text = $("#text"), 
    hasNext = !!(text.next().length || (text[0].nextSibling && $.trim(text[0].nextSibling.nodeValue)));

基本上我们首先检查是否有任何元素节点使用next()（so，<br/>或其他元素），如果有，那就足够了。否则，我们检查是否有任何nextSibling对象，以及它的值是否不是空字符串（因此不考虑任何空格）。

Answer 2

是的，您可以为此使用 DOM

alert($('div#text').is(':not(:last)') || $.trim($('div#text')[0].nextSibling.nodeValue).length > 0);

在您的第三种情况下返回 false：

http://jsfiddle.net/BsqTg/8/

Answer 3

看看这个演示。我将所有三个案例合二为一。代码是这样的：

var $contents = $(this).contents().filter(function() {
    // modify the following line to indicate what recon as "something"
    return (this.nodeType == 1 || this.nodeType == 3) && /\S/.test(this.nodeValue);
});
var $text = $(this).find(".text:first");
if (console && console.log) {
    console.log($contents, $contents.index($text), $contents.length);
}
if ($contents.index($text) == $contents.length - 1) {
    $(this).css({
        background: "#F99"
    });
}
else {
    $(this).css({
        background: "#9F9"
    });
}

此代码执行以下操作：

1. 抓取所有节点，包括文本和评论节点并检查它们是否是某物
2. 它计算这些节点
3. 查找该列表中特定元素的索引 检查它是否是最后一个

Answer 4

这是因为 jquery 没有提供获取文本节点的便捷方式。您可以使用容器 .contents() 它确实返回文本节点，然后循环通过它来查看有问题的 div 之后有什么。要查看一个节点是否是一个文本节点，它的 nodeType == 3。