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

LVL 16
hankknightAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
David S.Connect With a Mentor 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
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
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
 
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:
Thanks for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.