Solved

jQuery: Find matching children but not matching grandchildren

Posted on 2014-02-14
2
560 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 23

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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

726 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