サイドバーのカレント表示で詰まったことと解決策

（備忘録なので少々煩雑です。落ち着いてきたら整理したい）

困った

hogehoge.hbs

<ul class="side-menu">
    <!-- ここからカレント表示したいのに・・・ --->
    <li id="side-menu"><a href="#gohan">{{oishiina}}</a></li>

        ...

    <li id="side-menu"><a href="#panmo">{{daisuki}}</a></li>
    <li id="side-menu"><a href="#pasta">{{mogumogu}}</a>
        <ul class="side-menu-child">
            {{#each this.shushoku as | koubutu | }}
            <li id='side-menu-child'>
                <!--ここ以降だけカレント表示で色がつく.なんで?? -->
                <a href='#{{koubutu.link}}'>{{koubutu.namae}}</a>
            </li>
            {{/each}}
        </ul>
    </li>
</ul>

<script>
    function changeBackColor(secNum) {
	if (secNum != current) {
	    current = secNum;
	    let secNum2 = secNum + 1;
	    $('#side-menu li').removeClass('colorOn');
	    $('#side-menu li:nth-child(' + secNum2 + ')').addClass('colorOn');
    }
</script>

原因

• :nth-childの仕様にあるようでした。

つまり上の書き方だと、「side-menuというidがついたタグ（ここではli）の子要素としてあるliタグ（id='side-menu-child'であるli）」にcolorOnクラスが追加されていたのです。

対応策

以下のように実装を変更すると、うまくサイドバーの最初からカレント表示されました。

newHogehoge.hbs

<ul class="side-menu">
    <li id="side-menu"><a href="#gohan">{{oishiina}}</a></li>

        ...

    <li id="side-menu"><a href="#panmo">{{daisuki}}</a></li>
    <li id="side-menu"><a href="#pasta">{{mogumogu}}</a>
        <ul class="side-menu-child">
            {{#each this.shushoku as | koubutu | }}
            <li id='side-menu-child'>
                <a href='#{{koubutu.link}}'>{{koubutu.namae}}</a>   
            </li>
            {{/each}}
        </ul>
    </li>
</ul>

<script>
    function changeBackColor(secNum) {
	if (secNum != current) {
	    current = secNum;
	    let secNum2 = secNum + 1;
	    if (secNum2 <= 5) {
	        $('ul #side-menu-child').removeClass('active');
	        $('ul #side-menu').removeClass('active');
	        $('#side-menu:nth-child(' + secNum2 + ')').addClass('active');
	    } else {
	        let secNum3 = secNum2 - 5;

	        $('ul #side-menu').removeClass('active');
	        $('ul #side-menu-child').removeClass('active');
	        $('#side-menu-child:nth-child(' + secNum3 + ')').addClass('active');
	    }
    }
</script>