如何检测严格相邻的兄弟姐妹 [英] How to detect strictly adjacent siblings

问题描述

请考虑以下HTML，其中ID #p1 ，#p2 和#p3 是同级兄弟(请参见

Consider the following HTML where IDs #p1, #p2 and #p3 are siblings (see fiddle):

<div id="container">
    <span id="p1">Paragraph 1</span>
    <span id="p2">Paragraph 2</span>
    This is just loose text.
    <p id="p3">Paragraph 3</p>
</div>

这些是我对严格和宽松兄弟姐妹的定义:

These are my definitions of strict and loose siblings:

• 我认为ID #p1 和#p2 是严格的兄弟姐妹(因为它们之间没有任何未封装在任何html元素中的文本.

• I consider ID #p1 and #p2 strict siblings (because there is no text which is not encapsulated in any kind of html element between them.

和ID #p2 和#p3 是兄弟姐妹.

And ID #p2 and #p3 to be loose siblings.

考虑到下一个同级的任何元素，是否有可能知道下一个同级是严格的还是宽松的?

Given any element with a next sibling is it possible to know if the next sibling is strict or loose?

兄弟姐妹的类型可能不同，我更新了小提琴以反映这一点.

The siblings may be of different type and I updated the fiddle to reflect that.

推荐答案

回答您的问题

考虑到下一个同级的任何元素，是否有可能知道下一个同级是严格的还是宽松的?

Given any element with a next sibling is it possible to know if the next sibling is strict or loose?

是有可能的，而不是从小提琴中追随您的领导.

rather than following your lead from the fiddle, yes it's possible.

function isMyNextSiblingStrict(element)
{
    return ("nodeType" in element && element.nodeType === 1 && element.nextSibling !== null && element.nextSibling.nodeType === 1);
}

当一个元素的下一个同级元素是另一个元素时，它将返回 true .但是，请谨慎对待您的示例，因为根据您自己的定义它是不正确的，两个跨度之间都有一个由空格组成的文本节点，因此#1和#2并非严格的同级兄弟".

This will return true when an element's next sibling is another element. However, be careful with your example as it is incorrect by your own definition, the two spans have a text node between them made up of white space, so #1 and #2 are not "strict siblings".

<div id="container">
    <span id="p1">Paragraph 1</span><!-- WHITESPACE
 --><span id="p2">Paragraph 2</span>
    This is just loose text.
    <p id="p3">Paragraph 3</p>
</div>

这些将是严格的兄弟姐妹".

These would be "strict siblings".

<div id="container">
    <span id="p1">Paragraph 1</span><span id="p2">Paragraph 2</span>
    This is just loose text.
    <p id="p3">Paragraph 3</p>
</div>

---

编辑-只是为了好玩，我创建了一个jQuery扩展，可以执行您想要的操作-您可以在更新后的

---

edit - just for fun I've created a jQuery extension that should do what you want - you can see it in your updated jsFiddle, I've not tested it much but it seems to work as you describe

$.fn.extend({
    siblingsStrict: function( until, selector ) {
        var ret = jQuery.map( this, function( elem ) {
            var n = ( elem.parentNode || {} ).firstChild,
                r = [],
                contig = false;

        for ( ; n; n = n.nextSibling ) {
                if ( n === elem ) {
                    contig = true;
                }
                else if ( n.nodeType === 1 && n !== elem ) {
                    r.push( n );
                }
                else if ( n.nodeType === 3 && n.textContent.replace(/\s/g, "") === "" ) {
                    continue;
                }
                else if ( n.nodeType === 3 && contig === true ) {
                    break;
                }
                else if ( n.nodeType === 3 && contig === false) {
                    r = [];
                }
        }

        return r;
    }, until );

        if ( name.slice( -5 ) !== "Until" ) {
            selector = until;
        }

        if ( selector && typeof selector === "string" ) {
            ret = jQuery.filter( selector, ret );
        }

        if ( this.length > 1 ) {
            // Remove duplicates
            if ( !guaranteedUnique[ name ] ) {
                ret = jQuery.unique( ret );
            }

            // Reverse order for parents* and prev-derivatives
            if ( rparentsprev.test( name ) ) {
                ret = ret.reverse();
            }
        }

        return this.pushStack( ret );
    }
});

这篇关于如何检测严格相邻的兄弟姐妹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！