檢查div後是否存在某些東西

Question

想知道，我能做些什麼來檢查div後是否存在任何東西。 在這個例子在這個情況下，應返回真：

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

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

在這種情況下應該返回假：

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

我嘗試使用$ （'#text'）。next（）。長度，但不工作。特殊爲第一個例子。

Answer 1

不知道但是如果存在一個較短的方式：

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

基本上我們檢查如果有任何Element節點使用next()（so，<br/>或其他元素），如果存在的話，這是第一個地方，那就足夠了。否則，我們檢查是否存在任何nextSibling對象，以及它是否具有非空字符串的值（因此不考慮任何空格）。

Answer 2

這是因爲jquery沒有提供獲取文本節點的方便方法。您可以使用容器.contents（），它返回文本節點，然後循環查看該div後面的內容。要看到，如果一個節點是它的nodeType ==文本節點3.

Answer 3

是的，你可以使用DOM這種

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

你的第三個案件

返回FALSE：

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

Answer 4

看一看this demo。我把所有三個案例合併爲一個。該代碼是這樣的：

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. 找到該列表內特定元素的索引，檢查它是否是最後一個