jQuery の parents() は、指定の要素からの親が全部取得できるので便利です。
JavaScript オンリーで書くと以下のような感じですかね。
上の関数が jQuery 、下の関数が JavaScript オンリーです。
main.js
(function () {
// jQuery の parents()
const jqueryParents = function () {
console.log($('#hoge').parents());
};
// JavaScript で 親→祖先を再帰で取得
const javascriptParents = function () {
const parents = [];
const parentElem = function (elem) {
if (elem.parentNode) {
parents.push(elem.parentNode);
parentElem(elem.parentNode);
}
};
const baseElem = document.getElementById('hoge');
parents['prevObject'] = baseElem;
parentElem(baseElem);
console.log(parents);
};
// 実行
jqueryParents();
javascriptParents();
})();
以下のHTMLで id="hoge" に対して実行してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="POST">
<input type="hidden" name="hiddenValue" value="12345678901234567890">
<table>
<tbody>
<tr>
<th>
<label for="">名前</label>
</th>
<td>
<p>名前を入力してください。</p>
<div>
<table>
<tr>
<th>
<label>氏名</label>
</th>
</tr>
<tr>
<td>
<input type="text" id="username" value="" placeholder="山田 太郎" maxlength="50">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<th>
<label for="">内容</label>
</th>
<td>
<p>内容を入力してください。</p>
<div>
<input type="text" id="hoge" value="" maxlength="100">
</div>
<p>１００文字以内で入力してください。</p>
</td>
</tr>
</tbody>
</table>
</form>
<script src="main.js"></script>
</body>
</html>
結果はこんな感じです。
なんかちょっと違うけど、だいたい同じになりました。