97

例：

<div someAttr="parentDiv. We need to get it from child.">
    <table>
        ...
        <td> <div id="myDiv"></div> </td>
        ...
    </table>
</div>

myDiv内部の div 要素(クラスを持つもの)からいくつかのセレクターで親を取得したい。

jQuery を使用せずに、プレーンな JavaScript でそれを実現するにはどうすればよいですか?

何かのようなもの：

var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');
4

11 に答える 11

272

closest()最新のブラウザーで使用できます。

var div = document.querySelector('div#myDiv');
div.closest('div[someAtrr]');

オブジェクト検出を使用して、ポリフィルまたは IE との下位互換性のための代替方法を提供します。

于 2016-02-17T09:29:00.457 に答える
46

最も基本的なバージョンは次のとおりです。

function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}
function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}

var yourElm = document.getElementById("yourElm"); //div in your original code
var selector = ".yes";
var parent = findParentBySelector(yourElm, selector);
于 2013-01-09T11:52:24.107 に答える
43

指定されたセレクターに一致する最も近い親 (または要素自体) を検索します。また、検索を停止する必要がある共通の祖先がわかっている場合に備えて、検索を停止するセレクターも含まれています。

function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.matches(selector)) {
      retval = el;
      break
    } else if (stopSelector && el.matches(stopSelector)) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}
于 2016-07-01T16:06:52.057 に答える
0

これは、再帰を使用して特定のクラスを持つ親を取得する簡単な方法です。セレクタに応じて切り替えるように変更できますが、原則は同じです。

function findParentByClass(child, parentClass) {
    let parent = child.parentElement;

    while(!(parent.className === parentClass)){
        parent = findParentByClass(child.parentElement, parentClass)
    }

    return parent;
}
于 2022-02-27T02:51:49.673 に答える
-4

親IDにアクセスする簡単な方法は次のとおりです

document.getElementById("child1").parentNode;

親divにアクセスするための魔法を行います。

<html>
<head>
</head>
<body id="body">
<script>
function alertAncestorsUntilID() {
var a = document.getElementById("child").parentNode;
alert(a.id);
}
</script>
<div id="master">
Master
<div id="child">Child</div>
</div>
<script>
alertAncestorsUntilID();
</script>
</body>
</html>
于 2013-01-09T11:57:02.183 に答える