1. ホーム
  2. javascript

[解決済み] JavaScriptを使用しています。セレクタで親要素を取得するには?

2023-01-21 22:45:50

質問

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

内側のdiv要素から、何らかのセレクタで親を取得したい( myDiv クラスのもの)から何らかのセレクタで親を取得したい。

素のJavaScriptで実現するにはどうしたらいいのでしょう。 jQueryなし ?

のようなものです。

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

どのように解決するのですか?

最も基本的なバージョンを紹介します。

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);