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

このデモをご覧ください。3つのケースすべてを1つにまとめました。コードは次のようになります。

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 3

はい、これにはDOMを使用できます

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

3 番目のケースでは false を返します。

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

Answer 4

これは、jquery がテキスト ノードを取得する便利な方法を提供しないためです。テキストノードを返す container .contents() を使用し、それをループして、問題の div の後にあるものを確認できます。ノードがテキスト ノードかどうかを確認するには、nodeType == 3 を持っています。