jQuery click on a inside of ul and get it's attribute - javascript

I need to register click on the element a in ul list and get id of the a.
$("#nativeLang > ul > li > a").click(function(){
alert($(this).attr("id"));
});
This code is not working.
I found another way:
$("#nativeLang > ul").on("click", "a", function(event){
alert($(this).attr("id"));
});
But here I cannot get id of the clicked element a.
HTML
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>

If you're dynamically inserting these <li> tags, then you need to use $(document).on(...);
$(document).on("click", "#nativeLang > ul > li > a", function( event ){
$('#Result').html( $(this).attr("id") );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
<div id="Result" ></div>

HTML:
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
JS:
$("#nativeLang > ul").on('click', 'a', function(){
alert(this.id);
});
CODEPEN DEMO

Related

open one level deep sub-menu, only, on each click using jquery OR javascript

The issue I am having is:
when I click on "menu2", it is showing me sub-menu and all options of sub-menu.
Expected result:
click on "menu2" should open "sub-menu2" only and NO "sub-menu2" options.
click on ""sub-menu2" should open all it's children.
I see there are some question on related to this one but I did not find any question similar to mine.
If you can suggest a way to do this in pure JS/ES that would be great. Currently I am using jQuery.
$('.container > ul > li').on('click', function(){
$('ul',this).toggle(200);
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
YOu just need to use your selector a bit different way, and its done, if need something else, pls let me know
$('.container li').on('click', function(e) {
var ckeckChildVisiblity = $(this).find('>ul').is(':visible');
if (!ckeckChildVisiblity) {
$(this).find('>ul').slideDown();
return false;
} else {
$(this).find('>ul').slideUp();
return false;
}
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
This can be done using toggling immediate children and stop event propagation.
$('.container li').on('click', function(event){
$(this).children("ul").toggle(200)
event.stopPropagation()
})
.menu ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class ="menu">menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li class ="menu">menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Get href value while clicking li tag

Following is the code of the Div which is created dynamically.
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
When I click any <li> tag, I need to take the href value(eg: /some_url?page=2) of corresponding <li> tag.
$("ul.pagination li").click(function(e) {
alert($(this).attr('href'));
});
In the above code, clicking event is firing but i am getting undefined in the alert.
Please help.
but i am getting undefined in the alert.
Yes because you're trying to alert the href of the clicked li when it has no attribute href.
You need to alert the href of the anchor inside the li using a in your selector, or also using .find() like :
alert( $('a', this).attr('href') );
//Or also
alert( $(this).find('a').attr('href') );
You could also attach the click event directly to the child anchors of the il's like :
$("ul.pagination li a").click(function(e) {
alert( $(this).attr('href') );
});
$("ul.pagination li").click(function(e) {
alert($('a', this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
here is a technique very close to what you had:
$("ul.pagination li a").click(function(e) {
alert($(this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
$(this) inside your function call is referring to li element and not the a. You need to find a inside li and then get the attribute href like this
$("ul.pagination li").click(function(e) {
alert($(this).find('a').attr('href') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
because elements are created dynamically,
You should provide a selector to the on function:
$(document).on('click', 'ul.pagination li', function(e) {
alert($(this).children('a').attr('href'));
});
children() vs find()
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well

Disable `<a>` link inside <ul> issue

Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
<script>
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
</script>
</body>
</html>
I hope it helps you. Bye.
Link
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>
Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

Remove all ul within li except the current li

I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});​
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".

Categories

Resources