javascript：检查标记是否彼此相邻

Question

So here is the problem: I want to check if element <x-statement> is right next to <p> and there is no text in between them. So this will return true:

<div>
     <x-statement>[discover.prev]</x-statement>
     <p>Go forward<p>
</div>

But this won't:

<div>
     <x-statement>[discover.prev]</x-statement>
     im in the way herr der
     <p>Go forward<p>
</div>

This what I've tried to do:

if($(this).next().is('p')){
    alert("p is next to you");
}

Answer 1

<div id="div1">
     <x-statement>[discover.prev]</x-statement>
     <p>Go forward<p>
</div>

<div id="div2">
     <x-statement>[discover.prev]</x-statement>
     im in the way herr der
     <p>Go forward<p>
</div>

var exp = /<x-statement>.*<\/x-statement>\s*\n*<p>.*<\/p>/;
alert(exp.test($("#div1").html()));
alert(exp.test($("#div2").html()));

Example on JSFiddle: http://jsfiddle.net/PL9pN/

Answer 2

Here's a more robust function using DOM methods

function nextIs(self, tag) {
    return self ? ((function(el) {
        while(el && el.nodeValue && el.nodeValue.trim() == '' ) el = el.nextSibling
        return el;
    })(self.nextSibling).tagName || '').toLowerCase() === tag : false;
}

can be used as

var element = document.querySelector('x-statement');
var isNextP = nextIs(, 'p');

FIDDLE