suppose i have 3 li. what i want to do is when i click any li then i want to know which li was clicked and add an event according to it. how do i do it with jquery, any help or suggestions please
In jQuery, within an event handler the this keyword refers to the element which triggered the event.
$('li').click(function() {
alert($(this).text()); // read out the text of the list item that was clicked
}
jQuery will automatically capture the clicked element that you specify in the wrapped set:
$('ul li').click(function(){
alert('I was clicked, my text is: ' + $(this).text());
});
See the example here.
You need to provide your html markup for exact what you need.
More Readings:
jQuery's this: demystified
Related
Hi!
My problem is that I'm appending to an UL like that:
$("#tagek").append("<li><a>"+arr[0]+"</a><span class='ex'><a>X</a></span></li>");
So just shortly: I want to make a tag cloud. When someone types a comma, add the tag to the ul list. That works like charm, however I want to add an "X" to the li element so when someone clicks on it, it will be removed.
Something like that:
$(document).on('click','.ex',function(){
var li = $('.ex').closest("li");
li.remove();
});
So when I click on the ".ex" span its' li should disappear. This is working, but EVERY li is removed (logically), because every "X" has the same class.
Any ideas on this?
Maybe with .eq()?
Thank you.
You are experimenting that behaviour because you're removing the closest 'li' of every '.ex' element instead of the one clicked. Use the $(this) selector in the handler instead:
Try:
$(document).on('click','.ex',function(){
$(this).parent().remove();
});
i think u need this if you are using jquery .
$(document).on('click','.ex',function(){
var li = $(this).closest("li");
li.remove();
});
It's because you're re-selecting .ex (which gets all of them) inside the function handler instead of using the one that the event was triggered by.
Fix:
$(document).on('click', '.ex', function() {
$(this).closest('li').remove();
});
Edit: Not enough karma to comment, but alex030293's code should execute faster, but assumes that the element is a direct child as opposed to a descendant. If this is always the case, it's better to use his code. If there might be a situation where the .ex element is encapsulated in another tag, it's better to use mine.
I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much
Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/
First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO
Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)
On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)
I create the menu dynamically in jquery. I created a parent ul and li and it works fine. If I appended the ul to any of the li it's appended but when I click on that child li i am not able to get the id for any of child ul or li. I gave the id to that child li. I even tried to write the click action using li id or class that is also not working. Please find the below code.
Can any one please help me?
From the above image I want to get the id for category1 when I click on that category1.
Html:
<ul id="menu"> </ul>
Script:
$("#menu").on("click", "li", function () {
$("#menu ul").empty('');
var html = "<ul class='sub_ul'>";
var abc = subArrays[$(this).attr('id')];
for(var i = 0; i < abc.length; i++) {
if(abc[i] != ' ') {
html = html + "<li class='sub_first_li' id='sub_" + $(this).attr('id') + "_" + i + "'><a class='sub_first_li' href='#'>" + abc[i] + "</a></li>";
}
html = html + "</ul>";
$(this).append(html);
$("#menu ul").css({
'display': 'block'
});
});
});
Update :
Now i am getting the corrected li id but when i click on any li(category1) the function
will fire twice. What i need to do to make a call it once? Can any one please help me..
As you generating li dynamically.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
i.e. (General example)
$(document).on('event','selector',callback_function)
For you
$("#menu").on('click', "li", function(){
//Your code
});
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.
The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.
This may be a CSS selector issue. The first thing that comes to mind is that #menu li is a descendant selector. It selects all li's anywhere under the #menu. Likewise, #menu ul selects both ul's underneath #menu.
Therefore, your anonymous function is firing every time you click "category1". Try using the child selector: #menu > ul and #menu > ul > li. I'm curious to see if that solves your problem.
I have a drop down list consisting several item.
Now hat i want is when we click And a drop down appears. Now when we click on any option in dropdown, the original should get replaced by clicked.
For eg : Original is And, now in drop down if we click Not And, then And should get replaced by Not And and so on.
Can someone please me out with it.
Thanks
Try
$('.click-nav .js ul li').click(function (e) {
$(this).parent().prev().html($(this).html())
})
Demo: Fiddle
You can use .html() to get and set the html content of an element:
$('.clicker li').click(function (e) {
$('.clicker .hello').html($(this).html())
});
Fiddle Demo
I want to hide everything under (but leave the ones above) the element that was clicked by the user. Check out this demo: http://jsfiddle.net/dS2vA/
So if you click on the 2nd <li> the three <li>s under it should be hidden. If you click the 4th <li>, only the 5th element should be hidden.
I tried doing it with :not('clicked') but that targets the elements above the clicked element, as well.
Any ideas?
Just use the following:
$(this).nextAll().hide();
DEMO: http://jsfiddle.net/dS2vA/1/
Try something like this:
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass();
})
$(this).nextAll("li").slice(0,3).addClass('clicked');
})
in addition to VisioN's answer, to be more specific you can add a selector filter ("li") to nextAll() like this:
$(this).nextAll("li").hide();