We Keep Coding

Get li Element Text When Click on that Element

I have this code. When I click on any li element then the first alert it shows its value, then show its parent then again that parent and so on. I just want to show the text of the clicked li element. How can I do that?
$('#container li').on('click', function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>

Your first issue is that you need to stop the proprgation of the event from the clicked li to the parent li elements. You can call stopPropagation on the passed event handler to do that.
Secondly, I assume you only want to retrieve the child text value of the li, not the text of it's descendants, in which case you would need to use contents()[0] to access it. Try this:
$('#container li').on('click', function(e) {
e.stopPropagation();
var text = $(this).contents()[0].nodeValue.trim();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>
Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>

tabbing with jquery not working

I wonder if users click "test 1" will add class active in sidebar anchor and add background to expand list "#bar1".
the result should be sidebar font will red, and expand list background will red
But,what I found here if I click "test 1" it wont add class to anchor.
Please is there anyone can help me to correct my code
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).removeClass('active');
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</li>
</ul>
</div>

this line of code $(this).removeClass('active'); make an issue we want to remove active class from siblings anchor tag please find below snippet to know how to do that
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
debugger;
$(this).addClass('active');
$(this).parent().siblings().find("a").removeClass("active")
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</li>
</ul>
</div>

How to add an ul element custom event with jQuery?

I have a draggable pair of lists. The design: 2 ul list, interchangable items, with drag and drop.
I am using jquery sortable widget.
The question is that i want to fire an event when an li item drops in the or fire some event when ul list change.
How can i do that??
HTML:
div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
JavaScript:
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
})

Please check below snippet. Used stop and receive two events. Stop event will trigger every time element dragged and dropped. And receive event will trigger only when element is moved from one list to another.
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" moved");
},
receive: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" Moved from another list");
},
}).disableSelection();
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>

Contrary to my comment above, use 'stop' instead of 'drop':
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(){
alert("yeah buddy");
}
}).disableSelection();
})
https://jsfiddle.net/0yw43n6w/

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D

I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

Wanted a List box or even a list in HTML with drag and drop,double click and button click between the lists

I have requirement of creating two list boxes with drag and drop from one to another. I have a button to add and remove for selecting and paste from one to another. I should also have the same funtionality even on a doubleclick of the item in listbox . I tried with select tag HTML ...I am able to get double click and add/remove btn click. I tried with unorderd lists ul tag HTML ...... I am able to drag and drop and event get the double click. Now I need the solution with doubleclick, button click and drag and drop in one thing. Either select or ul anything is fine, but 3 functionalities should be achieved ..Thanks in advance
$(function() {
$( "#sortable" ).sortable({
connectWith:".conn"
});
$( "#sortable" ).disableSelection();
$( "#sortable1" ).sortable({
connectWith:".conn"
});
$( "#sortable1" ).disableSelection();
});
$('#add').click(function() {
//return !$('#sortable li:selected').remove().appendTo('#sortable1');
// $("#sortable1").trigger("dblclick");
});
$('#remove').click(function() {
return !$('#sortable1 li:selected').remove().appendTo('#sortable');
});
$("#sortable1").on("dblclick", "li", function () {
$(this).remove();
$("#sortable").append("<li >"+$(this).text()+"</li>");
//$("#sortable1").remove(this);
});
$("#sortable").on("dblclick", "li", function () {
$(this).remove();
$("#sortable1").append("<li >"+$(this).text()+"</li>");
// $(this).remove();
});
.listTab{
width:75px;
}
#sortable,#sortable1{
width:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Disposition References</title>
<style type="text/css">
.listTab{
width:75px;
}
#sortable,#sortable1{
width:50%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div style="display: inline-flex;">
<table>
<tr><td>
<ul id="sortable" class="conn">
<li class="listTab" class="ui-state-default">Item 1</li>
<li class="listTab" class="ui-state-default">Item 2</li>
<li class="listTab" class="ui-state-default">Item 3</li>
<li class="listTab" class="ui-state-default">Item 4</li>
<li class="listTab" class="ui-state-default">Item 5</li>
<li class="listTab" class="ui-state-default">Item 6</li>
<li class="listTab" class="ui-state-default">Item 7</li>
</ul>
</td>
<td><table><tr><td id='add'>>></td></tr><tr><td id='remove'><<</td></tr></table></td>
<td>
<ul id="sortable1" class="conn">
<li class="listTab" class="ui-state-default">Item 1</li>
<li class="listTab" class="ui-state-default">Item 2</li>
<li class="listTab" class="ui-state-default">Item 3</li>
<li class="listTab" class="ui-state-default">Item 4</li>
<li class="listTab" class="ui-state-default">Item 5</li>
<li class="listTab" class="ui-state-default">Item 6</li>
<li class="listTab" class="ui-state-default">Item 7</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
https://jsfiddle.net/raawdhm6/ here is my fiddle for this one..