• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 647
  • Last Modified:

jQuery: Find matching children but not matching grandchildren

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
hankknight
Asked:
hankknight
1 Solution
 
Snarf0001Commented:
Use .children instead of .find

$(this).children('ul').show()
0
 
leakim971PluritechnicianCommented:
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now