JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div class="menu_1">
            <ul>
            <li><a href="/anemone"> anemone </a></li>
            <li><a href="/artichoke "> artichoke </a></li>
            <li><a href="/aubergine "> aubergine </a></li>
            </ul>
      </div>
      <div class="menu_2">
            <ul>
            <li class="current" ><a href="/lemon_grass"> lemon grass </a></li>
            <li><a href="/pomegranate "> pomegranate </a></li>
            <li><a href="/tomato "> tomato </a></li>
            </ul>
      </div>

JavaScript

var elements = $( 'li' ),
    current = elements.filter( '.current' ),
    index,
    selected,
    hrefText;

if( current.length > 0 ){
    index = elements.index( current[ 0 ] );
    if( index > -1 ) {
        selected = elements.eq( index - 1 );
        //we have the correct list item now get the 
        //href text
        hrefText = selected.find('>a').attr('href');
        console.log(hrefText);
        
    }
}

selected.css('background-color', 'green');