jQueryを使わずにクリックした順番を取得し、別要素の同じ番目にクラスを付与したい

Question

jQueryを使わずにクリックした順番を取得し、別要素の同じ番目にクラスを付与したいです。
tab_linkを持っている要素の順番を取得し、その順番と同じpost_linkの要素に「hFind」のクラスを付与させたいです。

<section id="top-tabmenu-list-box" class="container">
		<input type="radio" name="switch" id="tab-1" checked>
		<input type="radio" name="switch" id="tab-2">
		<input type="radio" name="switch" id="tab-3">
		<input type="radio" name="switch" id="tab-4">
		<input type="radio" name="switch" id="tab-5">
		<div id="top-tabmenu-list">
			<ul>
				<li class="top-tabmenu-item tab_link"><label for="tab-1" ontouchstart=""><span>aaa</span></label></li>
				<li class="top-tabmenu-item"><label for="tab-2" ontouchstart=""><span>bbb</span></label></li>
				<li class="top-tabmenu-item"><label for="tab-3" ontouchstart=""><span>ccc</span></label></li>
				<li class="top-tabmenu-item"><label for="tab-4" ontouchstart=""><span>ddd</span></label></li>
				<li class="top-tabmenu-item"><label for="tab-5" ontouchstart=""><span>eee</span></label></li>
			</ul>
		</div>

		<div class="top-newpost-list-box">
			<ul class="post-list">
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
			</ul>
			<ul class="post-list">
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
			</ul>
			<ul class="post-list">
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
			</ul>
			<ul class="post-list">
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
			</ul>
			<ul class="post-list">
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
				<li class="post-item"></li>
			</ul>
		</div>
	</section>

function tabBar_animation() {
	var tabBar = document.querySelectorAll('#top-tabmenu-list li');
	tabBar.forEach(el => {
		el.addEventListener('click', () => {
			tabBar.forEach(el => {
				el.classList.remove('tab_link');
			});
			el.classList.add('tab_link');
		});
	});
}
tabBar_animation();

function tabBar_height_adding(){
	var eventTrigger = document.querySelectorAll('#top-tabmenu-list li');//引き金
	var contentParent = document.querySelector('.top-newpost-list-box');//高さを与える要素
	var hGet = document.querySelectorAll('.post-list');//高さ持ってる

	eventTrigger.forEach( el => {
	    el.addEventListener('click', () => {
	    	// Javascritでindex()を使う
	    	var index = function(wrapper, target) {
				var nodeList = document.querySelectorAll(wrapper),
				element = document.querySelector(target);
				return Array.prototype.indexOf.call(nodeList, element);
			};
	        var tabOrder = index('#top-tabmenu-list .top-tabmenu-item', '.tab_link');//クリックされた要素の順番を取得
	        // 番目を指定するjavascript
    		var eq = function(wrapper, index) {
    			var nodeList = document.querySelectorAll(wrapper),
    			length = nodeList.length;
    			if (0 < index && index < length) {
    				return nodeList[index];
    			}
    			if (0 <= length + index) {
    				return nodeList[length + index];
    			}
    			return null;
			};

			// クリックされた要素の番目と同じ番目の要素を取得
			var heightOrder = eq('.top-newpost-list-box .post-list', tabOrder);
			console.log(heightOrder);
			if(heightOrder.classList.contains('hFind')){
				return;
        	} else {
        		for ( var i=0 ; i<hGet.length; i++ ){
        			hGet[i].classList.remove('hFind');
        		}
				heightOrder.classList.add('hFind');
				var contentChild = heightOrder.offsetHeight;
				const addHeight = `height: ${contentChild}px;`;
				contentParent.setAttribute('style', addHeight);
        	}
	    });
	});
}
tabBar_height_adding();

このままでも動くことは動くんですが、indexの第二引数のtargetに「0」が入るとheightOrderの値がundifinedになってしまいます。

参考サイトとして、

https://spyweb.media/2017/11/04/pure-js-jquery-eq-index/

上記のサイトを参考にこのjsは作成しています。
無駄なコード等あるかと思いますが、一旦は挙動できる形まで持っていきたいです。

宜しくお願いします。

Comments

[yambejp]

「クリックした順番を取得」と「別要素の同じ番目にクラスを付与」
の相関関係がわかりません。
何をクリックした時にどこになんというクラスが付加されるのか
順を追って具体的に説明してもらえませんか？
見た感じ「hFind」が順番を使っているようには思えないのですが

[m.ts10806]

タグが「JavaScript」だけなので「jQueryを使わずに」はタイトルに書かなくてもいいのではと。
また、きちんと経緯や背景を書いておかないと「なぜjQueryを使いたくないの？」とか「jQueryだとできているんですか？」とか突っ込みたくなります。
同じような質問の仕方をしている人は大抵はjQueryでも実装できていませんからね。
jQueryで出来てるならJavaScriptでも問題なく組めるはずです(だってjQueryはJavaScriptのライブラリーでしかないからJavaScriptで出来ないことは出来ません)

Answer 1

おそらく参照元が間違っていると思いますが、index === 0 のときも条件に含みました。

var eq = function(wrapper, index) {
  var nodeList = document.querySelectorAll(wrapper),
  length = nodeList.length;
  if (0 <= index && index < length) { // indexが0のときが考慮されていなかった?
    return nodeList[index];
  }
  if (0 <= length + index) {
    return nodeList[length + index];
  }
  return null;
};