Remove and re-add Class Attribute inside a <div> unordered list item

Question

This is the answer as i was able to solve. Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.

 $(document).ready(function () { //remove Class $('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked'); //need to do add it to List Item which has Id =3 //check the list item which has id =3 if so add the class to it // It is not a button click event. $('#myJSTree li').each(function (i, li) { console.log('<li> id =' + $(li).attr('id')); var myIdVal = $(li).attr('id'); if (myIdVal == 3) { $(this).addClass('jsTree-clicked'); } }); });

 .jsTree-clicked { background-color:red;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myJSTree"> <ul class="nav nav-list"> <li id="1"> <a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a> </li> <li id="2"> <a title="Hyperlink2">HyperLink2</a> </li> <li id="3"> <a title="Hyperlink3">HyperLink3</a> </li> </ul> </div>

When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked". When you navigate to a different node it will remove and re-add the same class to the navigated node.

Expected

I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div. AND Re-add [class="jsTree-clicked"] to any ListItem by passing the Key ie ID.

I hope I was able to explain my problem. Thank you

My JSTree is a third party open source.

Answer 1

Maybe this is helpful to you?

 $(function () { $('#myJSTree').jstree(); }); const toggle = (e) => { if (+$("#test").val()>=10 ) { e.target.classList.remove("jstree-clicked"); console.log("You entered an invalid number.") } console.log(e.target) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <div id="myJSTree"> <ul> <li id="1"> <a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a> </li> <li id="2"> <a title="Hyperlink2">HyperLink2</a> </li> <li id="3"> <a title="Hyperlink3">HyperLink3</a> </li> </ul> </div> <input type="text" value="3" id="test"> &lt; 10

I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.

It appears to me as if the class jstree-clicked (not: jsTree-clicked ) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.

The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:

 $(function () { $('#myJSTree').jstree(); }); const checkinput = (e) => { if (+$("#test").val()>=10 ) { console.log("You entered an invalid number.") } else document.location.href=e.target.href; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <div id="myJSTree"> <ul> <li id="1"> <a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a> </li> <li id="2"> <a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a> </li> <li id="3"> <a title="Hyperlink3">HyperLink3</a> </li> </ul> </div> <input type="text" value="3" id="test"> &lt; 10<br> HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.

Answer 2

 $('.nav-list').on('click', 'li', function() { $('.nav-list li.active').removeClass('active'); $(this).addClass('active'); });

 .active{ background-color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myJSTree"> <ul class="nav nav-list"> <li id="1"> <a title="Hyperlink1">HyperLink1</a> </li> <li id="2"> <a title="Hyperlink2">HyperLink2</a> </li> <li id="3"> <a title="Hyperlink3">HyperLink3</a> </li> </ul> </div>