asked on

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

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

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

hankknight

ASKER

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

leakim971

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

Thanks for the points!