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

find a child element inside an element without tracing

easier way of finding an element inside another element.
say:

<div id="test">
     <div id="desc1" class="description1">
            <div class="name"></div>
            <div class="addressInfo">
                    <div class="address"></div>
                    <div class="city"></city>
           </div>
     </div>
     <div id="desc2" class="description2">
            <div class="name"></div>
            <div class="addressInfo">
                    <div class="address"></div>
                    <div class="city"></city>
           </div>
     </div>
</div>

say in my function i have var desc = $('desc1') or desc = $('desc2')
i passed this element to a function:
setDescription = function(desc) {
      //set address here how? based on desc?
     //this has to be dynamic based on desc value
}

i want  set the address value of either 1 or 2, since i know desc (desc1 or desc2)

how to do that with selector? i want do it one by one , set desc1 address then  desc2 address.

thanks

0
johndenny
Asked:
johndenny
1 Solution
 
SandyAgoCommented:
$('#desc1').find('.addresinfo');
0
 
SandyAgoCommented:
similarly you can simply ask for

$('#desc2').find('.addressinfo');

so putting it together:

setDescription = function(desc) {
      //set address here how? based on desc?
      //this has to be dynamic based on desc value

      if (desc =="your required value for desc1")  {
            $('#desc1').find('.addressinfo');
      }
      else if (desc == "your required val for desc2")  {
            $('#desc2').find('.addressinfo');
      }

}


else
0
 
SandyAgoCommented:
oops, you also need use .html(desc) on the end of the statement to set the value:

      $('#desc1').find('.addressinfo').html(desc);
0
2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

 
leakim971PluritechnicianCommented:
What about : $("#" + desc)

example to set innerHTML of "name" :


setDescription = function(desc) {
   $("#" + desc).children("name").text("A NAME");
}

or 

setDescription = function(desc) {
   $("name", "#" + desc).text("A NAME");
}

Open in new window

0
 
kadabaCommented:
Use selectors
$("#" + desc + " > div.addressInfo > div.address").html();


Its much easier to go  through parent child relationship this way.

<!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>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		setAddress("desc1","Address 1");
		setAddress("desc2","Address 2");
	});
	
	function setAddress(desc,address)
	{
		$("#" + desc + " > div.addressInfo > div.address").html(address);
	}
</script>
</head>
<body>
<div id="test">
     <div id="desc1" class="description1">
            <div class="name">
			</div>
            <div class="addressInfo">
				<div class="address">
				</div>
				<div class="city">
				</div>
           </div>
     </div>
     <div id="desc2" class="description2">
            <div class="name">
			</div>
            <div class="addressInfo">
                    <div class="address">
					</div>
                    <div class="city">
					</div>
           </div>
     </div>
</div>
</body>
</html>

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
since 'desc' is the context, you can use it as the context...
function setAddress(desc, address, city)
    $(".address", desc).text(address);
    $(".city", desc).text(city);
}

// Usage : setAddress($("#desc1"), "10th street", "London");

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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