Solved

jQuery: Find matching children but not matching grandchildren

Posted on 2014-02-14
2
512 Views
Last Modified: 2014-02-16
Using jQuery, how can I select matching children but not matching grandchildren?


<!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;
}

ul ul {
display: none;
}

</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 () {
  $(this).find('ul').show()
 });
});

</script>

</head>
<body>
When you click on "Vegitation" only "Fruit" and "Vegies" should be shown. "Apple" and "Peas" should not be shown.
 <ul>
  <li>Vegitation
   <ul>
    <li>Fruit
     <ul>
      <li>Apple</li>
      <li>Peach</li>
      <li>Pear</li>
     </ul>
    <li>Vegies
     <ul>
      <li>Spinich</li>
      <li>Peas</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>

</body>
</html>

Open in new window

0
Comment
Question by:hankknight
2 Comments
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 500 total points
ID: 39860244
Use .children instead of .find

$(this).children('ul').show()
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39860252
Your HTML is malformed, there's a missing </li>

When you click on "Vegitation" only "Fruit" and "Vegies" should be shown. "Apple" and "Peas" should not be shown.
<ul>
    <li>Vegitation
        <ul>
            <li>Fruit
                <ul>
                    <li>Apple</li>
                    <li>Peach</li>
                    <li>Pear</li>
                </ul>
            </li>
            <li>Vegies
                <ul>
                    <li>Spinich</li>
                    <li>Peas</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Open in new window

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
XSS cleaning when using ajax & json encode 5 38
jQuery or CSS 9 37
custom jquery validation method 11 12
Bootstap Icons 3 19
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now