I have a dropdown menu like this:
<ul class="dropdown-menu" id="Appdropdown">
</ul>
which I am populating dynamically using this code:
for (var i = 0; i < arrdropdownMenuItems.length; i++)
{
dropdownMenuhtml += '<li>' + arrdropdownMenuItems[i] + '</li>';
}
$('#ApplicationNames').css("visibility", "visible");
$('#Appdropdown').append(dropdownMenuhtml);
And now when the user clicks on an <a>, I need to get the selected dropdown value. - I've tried this:
$('ul#Appdropdown').click(function ()
{
var cache = $('.btn-primary').children();
$('.btn-primary').text($(this).text()).append(cache);
}
but it's not giving the selected value from the dropdown.
Though it is not correct to listen click on parent element rather than child event, still your requirement can be accomplished using following code.
Basically you can fetch actual element that is clicked from event data that is passed by click event by default.
$('ul#Appdropdown').click(function (ev) {
var a = $(ev.target);
if(a.is("a"))
$('#selectedText').text($(a).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id ="Appdropdown">
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
<li>Test D</li>
<li>Test E</li>
</ul>
<div id="selectedText"></div>
Several things missing in you code.
First ensure you are writing entire piece of code in document.ready,then make sure you fire the click event on li click instead of ul.Next as you are creating the control dynamically use .on.
$(document).ready(function() {
$('ul#Appdropdownli li').on('click', function() {
var selctedtext = $(this).find('a').html();
console.log(selctedtext);
});
});
You can get the selected drop-down value using the following code.
Please note, a reference of #selectedText is kept outside the event handler for a so no additional dom query is necessary.
var selectedText = $('#selectedText');
$('#Appdropdown > li > a').on('click', function(event) {
selectedText.text($(event.target).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="Appdropdown">
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
<li>Test D</li>
<li>Test E</li>
</ul>
<div id="selectedText"></div>
You could add a class/id to each option, and then add an event listener to that class, like this:
Html:
<ul class="dropdown-menu">
<li><button class="dropdown-option">Option 1</button></li>
<li><button class="dropdown-option">Option 2</button></li>
<li><button class="dropdown-option">Option 3</button></li>
<li><button class="dropdown-option">Option 4</button></li>
<li><button class="dropdown-option">Option 5</button></li>
</ul>
JavaScript:
$('.dropdown-option').click(function () {
console.log($(this).html());
});
$(this) is the actual element that is being clicked.
Pretty simple solution, which could also easily be converted to vanilla javascript.
JSfiddle example
Related
I want jquery to include <li> and all other tags inside <ul class="visib-1"></ul> to <ul class="visib-2"></ul> without writing li,a href="" tags again. Is there have any solution?Is it possible to capture all elements from one UL and transfer to other UL?
From:
<ul class="visib-1">
<li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
To:
<ul visib-1>
?
</ul>
If all you want is to move from one <ul> to another:
$('#first-ul-id li').appendTo('#second-ul-id');
If you want to copy use clone()
$('#first-ul-id li').clone().appendTo('#second-ul-id');
Here is the solution. Check the code below:
This code will also copy the event handlers attached.
var cloneOfOld = $('[data-status="old"]').clone(true);
cloneOfOld.attr('data-status','new');
var newUl = $('[data-status="new"]');
newUl.replaceWith(cloneOfOld);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-status="old"><li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
<ul data-status="new">
</ul>
What I'm trying to do here is check if an element has the same id as a class in another element if so hide the matching id.
So far this is what I have came up with but it doesn't seem to kick.
JSfiddle
var theid = $('#me li').attr('id');
if ($('#you li').hasClass( theid )) {
$('#me li#'+theid+'').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2 & should be hidden</li>
<li id="num-2">iam 3</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-1">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Use each() to loop over all the li elements inside the #you
hide() the elements having the id same as the class of current element in loop.
$('#you li').each(function() {
$('#' + $(this).attr('class')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2</li>
<li id="num-2">iam 3 & should be hidden</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-2">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Demo
When you use the .attr() method on a jQuery object that contains multiple elements, it just returns the attribute from the first element. You need to loop over each element and check them one at a time.
It is, however, OK for your purposes to use .hasClass() on the set of all of the #you elements, because .hasClass() will return true if any of the elements in the set has that class. So:
var you = $('#you li');
$('#me li').each(function() {
if (you.hasClass(this.id))
$(this).hide();
});
Note that I'm keeping a reference to the $('#you li') jQuery object in the variable you to save selecting those elements again every time in the loop.
Demo: https://jsfiddle.net/d65sz4js/2/
Try this for your jquery:
$(function() {
$("#you li").each(function(){
var theid = $(this).attr('class');
$('#'+theid).hide();
});
});
Demo: https://jsfiddle.net/nkem9o7o/
You could filter the #me li's, returning elements where their id exists as a class in #you li's, then just hide them. This would also work for multiple classes:
$('#me li').filter(function() {
return $('#you').has('.' + this.id).length;
}).hide();
Here's a fiddle
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
I have li with unique text and i want to get the id on that text.
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
I want to get the UL id, whose li anchor tag onclick function contains text is users.
You can use filter to do this:
var $usersUl = $('a').filter(function() {
return $(this).attr('onclick').indexOf('users') != -1;
}).closest('ul');
Example fiddle
It should be noted however that having your UI rely on a parameter in a JS function call is a little unsightly, if not verging on a hack. If you can, change the HTML to include some data attributes and filter by those:
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
var $users = $('a').filter(function() {
return $(this).data('users');
}).closest('ul');
Using the attribute contains selector:
Fiddle
var id = $('ul > li > a[onclick*="\'users\'"]').closest('ul').attr('id');
Or to include the function name as well:
var id = $('ul > li > a[onclick="myfunction(\'users\')"]').closest('ul').attr('id');
I wouldn't use an onclick in this case, try something like this:
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
Then jQuery:
$("li").click(function() {
parent = $(this).parent(); // your UL element
value = $(this).data('value'); // your parameter, you can use it now
// Rest of your function right here
});
Try this:
$('a[onclick*="users"]').each(function() {
console.log($(this).text());
});
DEMO
Try this:
$(document).ready(function(){
$('li a').on('click', function(){
alert($(this).closest('ul').prop('id'));
});
});
Here is my fiddle example http://jsfiddle.net/58CTf/3/
<script>
function myfunction(param, event) {
console.log(event.target.parentElement.parentElement.id);
}
</script>
Pass the current object in event handler and use to get the id of parent ul using closest(), onclick="myfunction(this,'users')"
Live Demo
HTML
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
Javascript
function myfunction(obj, parm)
{
alert($(obj).closest('ul').attr('id'));
}
here it is:
$('ul a').click(function(){ // click event for anchor tag which is inside ul
if($(this).indexOf("users") == -1) // check if text contains users
{
console.log($(this).parent("ul").attr("id")); // get its parent ul id
}
})
try this this works great(use parent function)
$(function(){
$("ul li").find("a:contains(Link)").parent().parent().attr("id");
})
my question is how to give the priority of being detected by "mouseover" event to the child element rather than its parent?
this is the jquery code:
<script>
$(function() {
$("li").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
and this is the html code
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ul>
</li>
<li>item 4</li>
</ul>
<div id="log">log</div>
how to output the current element when doing mouseover?
the problem is when you mouseover "item 3.1" the jquery will not detect "item 3.1" and instead jquery will assume that you mouseover "item 3" ?
Thanks
You want the event target:
$("li").mouseover(function(event) {
$('#log').html($(event.target).text());
});
From quirksmode (linked above):
Even if an event is captured or
bubbles up, the target/srcElement
always remains the element the event
took place on.
Demo here.
Add a span inside each li around the text, and check for a mouse over on that
<script>
$(function() {
$("li span").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span>
<ul>
<li><span>item 3.1</span></li>
<li><span>item 3.2</span></li>
<li><span>item 3.3</span></li>
</ul>
</li>
<li><span>item 4</span></li>
</ul>
<div id="log">log</div>
Here is an alternative to Karim79 method.
$("li").mouseover(function(event){
$('#log').html($(this).text());
event.stopPropagation();
});
Make sure to read what stopPropagation() actually does.
http://jsbin.com/afunu3
You should select the inner 'li' tags instead of all 'li' tags.
For example, you could add a class='innerItem" to inner 'li', like this:
<li class='innerItem'>item 3.1</li>
Then your jQuery should look like this:
<script>
$(function() {
$("li.innerItem").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>