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

jQuery: Find element of ancestor by type

Using jQuery, I want to do something to the last address element of a great great great great grand parent.

Please test my example below and you will see what I need.

Thanks.
<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
a {display: block; text-decoration: underline; color: blue; cursor: pointer;}
address {color: #bbb;}
</style>


</head>
<body>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "a1" and make "a1" red)</a>
     </p>
    </div>
    <address>a4</address>
   </div>
   <address>a3</address>
  </div>
  <address>a2</address>
 </div>
 <address>a1</address>
</div>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "b1" and make "b1" red)</a>
     </p>
    </div>
    <address>b4</address>
   </div>
   <address>b3</address>
  </div>
  <address>b2</address>
 </div>
 <address>b1</address>
</div>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "c1" and make "c1" red)</a>
     </p>
    </div>
    <address>c4</address>
   </div>
   <address>c3</address>
  </div>
  <address>c2</address>
 </div>
 <address>c1</address>
</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.xyz').click(function() {

alert( $(this).parent().parent().parent().parent().parent().parent().html() );

// $(this).parent().parent().parent().parent().parent().parent().('address').last().css('color','red');

});

/*]]>*/
</script>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 4
2 Solutions
 
David S.Commented:
Try this:
$(this).closest('.d1').find('address').last().css('color','red');

Open in new window

0
 
leakim971PluritechnicianCommented:
For example :

var last = $(this).parents(".d1").children(":last");
last.css('color','red');

Open in new window


page :
<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
a {display: block; text-decoration: underline; color: blue; cursor: pointer;}
address {color: #bbb;}
</style>


</head>
<body>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "a1" and make "a1" red)</a>
     </p>
    </div>
    <address>a4</address>
   </div>
   <address>a3</address>
  </div>
  <address>a2</address>
 </div>
 <address>a1</address>
</div>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "b1" and make "b1" red)</a>
     </p>
    </div>
    <address>b4</address>
   </div>
   <address>b3</address>
  </div>
  <address>b2</address>
 </div>
 <address>b1</address>
</div>

<div class="d1">
 <div class="d2">
  <div class="d3">
   <div class="d4">
    <div class="d5">
     <p>
      <a class="xyz">Click Here (Should alert "c1" and make "c1" red)</a>
     </p>
    </div>
    <address>c4</address>
   </div>
   <address>c3</address>
  </div>
  <address>c2</address>
 </div>
 <address>c1</address>
</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.xyz').click(function() {

var last = $(this).parents(".d1").children(":last");
last.css('color','red');

alert( last.html() );

// $(this).parent().parent().parent().parent().parent().parent().('address').last().css('color','red');

});

/*]]>*/
</script>

</body>
</html>

Open in new window

0
 
hankknightAuthor Commented:
Thanks, but that does not help me find items of 4 ancestors back, it relies on a class to tell the depth.  How can this be done without the "d1" class?
<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
a {display: block; text-decoration: underline; color: blue; cursor: pointer;}
address {color: #bbb;}
</style>

</head>
<body>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "a1" and make "a1" red)</a>
     </p>
    </div>
    <address>a4</address>
   </div>
   <address>a3</address>
  </div>
  <address>a2</address>
 </div>
 <address>a1</address>
</div>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "b1" and make "b1" red)</a>
     </p>
    </div>
    <address>b4</address>
   </div>
   <address>b3</address>
  </div>
  <address>b2</address>
 </div>
 <address>b1</address>
</div>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "c1" and make "c1" red)</a>
     </p>
    </div>
    <address>c4</address>
   </div>
   <address>c3</address>
  </div>
  <address>c2</address>
 </div>
 <address>c1</address>
</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.xyz').click(function() {

alert( $(this).parent().parent().parent().parent().parent().parent().html() );

// $(this).parent().parent().parent().parent().parent().parent().('address').last().css('color','red');

});

/*]]>*/
</script>

</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
leakim971PluritechnicianCommented:
replace .d1 by div :

var last = $(this).parents("div").children(":last");
last.css('color','red');

Open in new window

but it will fail if all the parent div are inside a main div


<div>

<div class="d1">
...
</div>

<div class="d1">
...
</div>


<div class="d1">
...
</div>

</div>

Open in new window

0
 
leakim971PluritechnicianCommented:
you can also use the parent "position" POV the children (and zero based) :


var last = $(this).parents("div:eq(4)").children(":last");
last.css('color','red');

Open in new window


<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
a {display: block; text-decoration: underline; color: blue; cursor: pointer;}
address {color: #bbb;}
</style>

</head>
<body>

<div>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "a1" and make "a1" red)</a>
     </p>
    </div>
    <address>a4</address>
   </div>
   <address>a3</address>
  </div>
  <address>a2</address>
 </div>
 <address>a1</address>
</div>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "b1" and make "b1" red)</a>
     </p>
    </div>
    <address>b4</address>
   </div>
   <address>b3</address>
  </div>
  <address>b2</address>
 </div>
 <address>b1</address>
</div>

<div>
 <div>
  <div>
   <div>
    <div>
     <p>
      <a class="xyz">Click Here (Should alert "c1" and make "c1" red)</a>
     </p>
    </div>
    <address>c4</address>
   </div>
   <address>c3</address>
  </div>
  <address>c2</address>
 </div>
 <address>c1</address>
</div>

</div>

<script type="text/javascript">
/*<![CDATA[*/

$('.xyz').click(function() {

var last = $(this).parents("div:eq(4)").children(":last");
last.css('color','red');

alert( last.html() );

// $(this).parent().parent().parent().parent().parent().parent().('address').last().css('color','red');

});

/*]]>*/
</script>

</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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