I'm making an menu and for that I use jquery to display data.
I want to make it more dynamic and for that I'm using the each() function
Here is an representative example of my code http://jsfiddle.net/4r5cLy00/
As you can see the on click displays all the listitems of the unordered list and that's not want i want. I want to get the clicked <li>
I hope someone have a simple solution for this?
Do you mean like this?
$(document).ready(function() {
$('ul > li').click(function() {
alert($(this).text());
});
});
> (greater than) symbol? That just means the li's that are direct descendants of the the ul. It could be written as $('ul li') and still work fine but it would work for any child li's aswell which you may or may not want. It's also useful in CSS if you only want to style top level li's for example.
> denotes a child selector. It's just a way to give more specificity. css-tricks.com/child-and-sibling-selectors<ul> instead of x number of list items.This is how you'd use event delegation in this instance. It's a good practice and every JS programmer should use it. The advantages are that you only bind one event and you get better performance. Read more here:
http://bdadam.com/blog/plain-javascript-event-delegation.html
$('ul').click(function(event) {
if (event.target.tagName == 'LI') {
console.log(event.target.innerText);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>