12

以下のスニペットをご覧ください。

<div>
    <div></div>
    <div><!-- my target node -->
        <div><!-- not my target node -->
            <img /><!-- my source node -->
        </div>
    </div>
</div>

ご覧のとおり、 img-elment には 2 つdivの囲み があります。これらの 2 つの囲み s の最初のものを-elmentdivの「本当の」親 (見つける必要があるもの) と見なしたいのは、前に兄弟があるため、検索が終了し、兄弟と外側の囲みが無視されるためです。imgdivdivdiv

兄弟がまったくいない場合は、外側divを譲らなければなりません。要素が囲まれていない場合は、要素自体を明け渡す必要があります。

JavaScriptで説明したように、要素をターゲットにする方法を知りたいだけです。

4

3 に答える 3

21

したがって、兄弟要素を持つ最初の祖先が必要なようです。もしそうなら、あなたは次のようにすることができます：

var parent = img.parentNode;

while (parent && !parent.previousElementSibling && !parent.nextElementSibling) {
    parent = parent.parentNode;
}

do-whileまたは、おそらくループとしてより適切に記述されます。

do {
    var parent = img.parentNode;
} while (parent && !parent.previousElementSibling && !parent.nextElementSibling);

そのため、少なくとも 1 つの兄弟要素を持つ要素が見つかるか、祖先がなくなると、ループは終了します。

兄弟が親の前に来るか後に来るかがわかっている場合は、どちらか一方をテストするだけです。

***ElementSiblingまた、レガシー ブラウザーをサポートしている場合は、プロパティの shim が必要になることにも注意してください。

これを行う関数を作成できます。

function prevElement(el) {
    while ((el = el.previousSibling) && el.nodeType !== 1) {
        // nothing needed here
    }

    return el;
}

function nextElement(el) {
    while ((el = el.nextSibling) && el.nodeType !== 1) {
        // nothing needed here
    }

    return el;
}

次に、次のような関数を使用します。

do {
    var parent = img.parentNode;
} while (parent && !prevElement(parent) && !nextElement(parent));
于 2012-10-12T17:52:13.623 に答える
0

親要素が何段上なのか分からないと、element.getParent単独のような方法で選択するのは困難です。bodyただし、見ているノードに兄弟があり、要素の子になるまで、親ノードを反復処理できます。imgあなたのタグが によって参照されていると仮定しましょうimgNode。

function getParentWithSiblings(imgNode) {
    for( ; n; n = imgNode.parentNode) {
        if (n.nextSibling && n.parentNode.tagName == 'body') {
            return n;
       }
    }
}

上記のコードでは、画像ノードの親を段階的に繰り返します。各反復で、現在のノード (ノードの親img) に兄弟があり、bodyタグの子であるかどうかを確認します。

于 2012-10-12T18:04:41.473 に答える
0

興味がある場合に備えて、jQueryを使用してuser1689607 の回答を実装する方法を次に示します。

function getAncestorWithSiblings(element) {
  var ancestor = element.parent();
  while (ancestor && ancestor.siblings().length === 0) {
    ancestor = ancestor.parent();
  }
  return ancestor;
}

このライブラリを目的に使用することが理にかなっているかどうかは、私たちが持っていない多くのコンテキストに依存します。他の人が正当に指摘したように、この問題を解決するために jQuery は必要ありません。また、jQuery は不必要に重い解決策になる可能性があります。とはいえ、これは非常に便利なライブラリである可能性があり、それを認識していなかったり、まだ調査したことがない場合は、検討する価値があります。

于 2012-10-12T18:34:48.617 に答える