Solved

jQuery: Make $(this) apply ONLY to the last child clicked

Posted on 2014-02-16
2
324 Views
Last Modified: 2014-02-16
How can I get $(this) to ONLY apply to the last child clicked on?  For example, if I click on "Kale" only Kale should become red and not all parent <li> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examples</title>
<style type="text/css">
li {
cursor: pointer;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
 $('li').click(function (e) {
        $('li').css('background','transparent');
        $(this).css('background','red');
 });
});

</script>

</head>
<body>

<ul>
    <li>Animals
     <ul>
       <li>Mammals</li>
       <li>Reptiles</li>
       <li>Fish</li>
     </ul>
    </li>
    <li>Minerals
     <ul>
       <li>Salt</li>
     </ul>
    </li>
    <li>Vegitation
        <ul>
            <li>Fruit
                <ul>
                    <li>Apple</li>
                    <li>Peach</li>
                    <li>Pear</li>
                </ul>
            </li>
            <li>Vegies
                <ul>
                    <li>Leafy
                         <ul>
                             <li>Kale</li>
                             <li>Spinich</li>
                             <li>Lettuce</li>
                        </ul>
                    </li>
                    <li>Roots
                         <ul>
                             <li>Kale</li>
                             <li>Spinich</li>
                             <li>Lettuce</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


</body>
</html>

Open in new window

0
Comment
Question by:hankknight
2 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39862831
$(document).ready(function () {
 $('li li').click(function (e) {
        $('li').css('background','transparent');
        $(this).css('background','red');
 });
});

Open in new window

0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39862843
I think the proper way would be to call stopPropagation() in your event handler:
$(document).ready(function () {
 $('li').click(function (e) {
        e.stopPropagation();
        $('li').css('background','transparent');
        $(this).css('background','red');
 });
});

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question