JavaScriptで親要素のElementsを検索し、一致した場合に返す

jQueryには、親要素を検索することができるparentsという関数があります。

ただ、jQueryを導入せず、生のJavaSctiptで同じような動きを再現したかったため、以下の関数を作成しました。

function parents(elements, attribute, name){
    while(true){
        elements = elements.parentNode ? elements.parentNode : false;
        if(!elements) break;
        if(elements[attribute] == name) return elements;
    }
    return false;
}

動作は、jQueryのparentsとは少し異なります。

動作サンプル

第一引数にElementsを指定し、第二、三引数には、親要素の属性とその値を指定します。

もし親要素に、指定した属性と値が存在しなければ、falseを返します。

見つかった場合は、一番近い親要素のElementsを返します。

以下はサンプルコードです。

<div id="parent">
    <div>
        <p id="child">Sample</p>
    </div>
</div>

<script>
function parents(elements, attribute, name){
    while(true){
        elements = elements.parentNode ? elements.parentNode : false;
        if(!elements) break;
        if(elements[attribute] == name) return elements;
    }
    return false;
}
//<p id="child">Sample</p>
var child = document.getElementById('child');
var display = parents(child, 'id', 'parent');
console.log(display);
</script>