We Keep Coding

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

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 i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.

$('.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>

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"> < 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"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.

Jquery find element using data attribute of the parent

I have two same ids but in different divs and I am trying to create a click event
<div data-group = "points">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
I have created a onclick event like this
this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}
But this is listening to all the ids with 'first point'.
How can I create a click event only when 'first point' inside data-group="points" is clicked
Any suggestions or help would be appreciated.

First problem is that id should be unique in whole document. Two elements shouldn't have same id. You should use class for that.You can use [data-group=points] before the selector.
You don't need to select id or class using attribute selector. Just use # for id and . for class
$('[data-group=points] .first-point').click(function(){
console.log("I am clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>

You can use the same attribute equals selector with the descendant selector.
this._toolbox._container.on('click', '[data-group="points"] [id="first point"]', function (ev) {
});
$(document).on('click', '[data-group = "zone"] [id ="first point"]', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li id="first point">1</li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li id="first point">2</li>
</ul>
</div>
</div>
From MDN docs:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID.
FYI : The id should be unique in a context so always use class instead of id for a group of elements.
HTML :
<div data-group = "points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
Script :
this._toolbox._container.on('click', '[data-group="points"] .first_point', function (ev) {
});
$(document).on('click', '[data-group="points"] .first_point', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>

You can try this code here: The $(el).click() not work when you add a dynamic element or contents. so you can choose any one solutions.
$(document).on('click','[data-group="points"] li',function(){
console.log("you are points datagroup clicked");
});
$(document).on('click','[data-group="zone"] li',function(){
console.log("you are points zone clicked");
});
//or
$(document).on('click','[data-group] li',function(){
if( $(this).parents('[data-group="points"]') ){ // check group item parent type
console.log(" points datagroup clicked");
}
else if( $(this).parents('[data-group="zone"]') ){ // check group item parent type
console.log("points zone clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
= = =
Thank you
= = =

Use li to select radio input buttons?

I am creating a payment option buttons. The problem is the pre-made option gives no place to add payment images and descriptions. So I have made a (li) list of options using basic html and content now i want to know if we can make li to select input when pressed
HTML Code
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
Current Input Code
<div class="radio-buttons-selection">
<label>
<input name="shipping" type="radio" class="radio" id="shipping_{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true" {/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)">
<div class="shipping_{$shipping.shipping_id} box"> <span>{$shipping.shipping_name}</span> </div>
</label>

I'm unfortunately not quite sure how you have implemented your Current input code with the rest of the code. However, using the first snippet of code, something like this (using jQuery) should work:
$("li").on("click", function() {
$("input[type=radio]").each(function() {
$(this).prop("checked", false);
});
$(this).find("input[type=radio]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
<input type="radio"/>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
<input type="radio"/>
</div>
</li>
</ul></div>
Basically, if a list-item is clicked, find the input[type=radio] in that list item and check it (and before that, make sure all others are unchecked so we keep it 'valid').
If you can merge your HTML code with your Current input code I might be able to provide a better example, but nonetheless you might see what's going on and what you could do?

$(".shipping-method li").on("click", function() {
$(".shipping-method input[type=radio]").each(function() {
$(this).prop("checked", false);
$(this).children(".shipping-method .item").removeClass("on");
});
$(this).find("input[type=radio]").prop("checked", true);
$(this).find(".item").addClass("on");
});

[:I assume the 'selectShipping' method will try to extract above
values(id,value,insure,supportCod) from 'this']
'Right Click' on browser & find out the following in run time the respective values for input element '*' that you are not able to customize:
1.)$shipping.shipping_id=?? , value=??,supportCod=??,insure=?? Of first option
2.)$shipping.shipping_id=?? , value=??,supportCod=??, insure=?? Of second option
elements into elements containin as the selectShipping method expects it to be
-->
<div class="shipping-method">
<ul class="">
<li>
<div class="item"><a href="javascript:;" class="weixin_wap" id="shipping_{$shipping.shipping_id_Of_firstoption}" value="{??Of_firstoption}" insure="{$shipping.insureOf_firstoption}" onclick="selectShipping(this)>Wechat</a>
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on"><a href="javascript:;" class="alipaywap" id="shipping_{$shipping.shipping_id_Of_second_option}" value="{??Of_second_option}" insure="{$shipping.insureOf_second_option}" onclick="selectShipping(this)>AliPay</a>
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>

Obtaining value of a certain field from click event of a list in jquery

Currently i have something like this
<ul class="patient-class" id="patientSelection">
<li>
<label for="plist">
<div class="patient-details"><span class="pheading">Foo</span><span class="page">14 years</span>
</div>
</label>
</li>
</ul>
Now I have a jquery function that tells me which li item is clicked
<script>
$("#patientSelection li").click(function() {
alert('Clicked list.'+$(this).value);
});
</script>
Now my question is how can i alert out the link to the 14 years. which is SomeLink. Essentially i just want to capture the linked text ?

You can use .find() to get the anchor element, the you can get .text()
$("#patientSelection li").click(function() {
console.log($(this).find('.page a').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="patient-class" id="patientSelection">
<li>
<label for="plist">
<div class="patient-details">
<span class="pheading">Foo</span>
<span class="page">14 years</span>
</div>
</label>
</li>
</ul>

Use .find() to find the descendants of the li's element being clicked :
$(this).find( 'a' ).text();

Order divs by class

Is it possible to order divs by class when clicking a menu link?
Here is my code:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director3 commercial"></div>
</div>
What I would like to do is when I click on a director or category in the menu I would like the divs with the connected class to be ordered at the top.
Here is an example: When I click on director2 in the menu I would like the code to change to this:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director3 commercial"></div>
</div>
Any thoughts on this?
Thanks in advance!

After you fix your HTML to be legal (close your divs), you can use this:
$(".directors-menu li").click(function() {
var cls = $(this).text();
var films = $(".films");
films.find("." + cls).each(function() {
films.prepend(this);
});
});
Working demo: http://jsfiddle.net/jfriend00/43muT/
And, a bit shorter version:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).text()).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/nLV2j/
It would better to put a custom attribute on the clickable items so the display text can be anything and you have direct control over the sort key like this:
Here's the HTML:
<ul class="directors-menu">
<li data-sort="director1">Sort by Director 1</li>
<li data-sort="director2">Sort by director 2</li>
<li data-sort="director3">Sort by director 3</li>
<li data-sort="commercial">commercial</li>
<li data-sort="promo">promo</li>
<li data-sort="short">short</li>
</ul>
<div class="films">
<div class="director2 commercial">d2</div>
<div class="director2 short">d2</div>
<div class="director1 commercial">d1</div>
<div class="director1 promo">d1</div>
<div class="director3 commercial">d3</div>
</div>
And, the code:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).data("sort")).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/GZhtr/

I think this is a nice way to do it
$(".directors-menu li").click(function(e){
$("div."+$(this).text()).prependTo("div.films");
});
Here is a fiddle http://jsfiddle.net/Vgt4s/

For sorting anything, the best jQuery plugin I have used is Tablesorter