We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

jQuery: Find element of ancestor by type

hankknight
hankknight asked
on
Medium Priority
751 Views
Last Modified: 2012-05-11
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

Comment
Watch Question

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
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

Author

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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
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

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Thanks for the points!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.