Manoj Singh Manoj Singh - 4 months ago 10
HTML Question

getting href value of from <a> tag

I have below html:

<div class="threeimages" id="txtCss">
<a>
<img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
</a>
<div class="text" id="txtLink">
<h2>
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
</h2>
<p>Land of the sunshine!</p>
</div>
</div>


Now if you see there is href in div ID "txtLink" i.e. Australia

I want this at the runtime of page the same href values get copied into above tag of div ID "txtCss", I mean when my page gets displayed my html will be as below:

<div class="threeimages" id="txtCss">
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">
<img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
</a>
<div class="text" id="txtLink">
<h2>
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
</h2>
<p>Land of the sunshine!</p>
</div>
</div>


please suggest some code for above problem

Answer

Update
An answer without jquery here: http://stackoverflow.com/a/887348/11333
Back in 2009 it was perfectly acceptable to use jquery though :)

Create a js file with something like this:

$(document).ready(function() {
    $('.threeimages').each(function(){
    $(this).DupeHref();
    });
});

jQuery.fn.DupeHref =  function(){       
    var target = $(this).find(".text h2 a").attr("href");
    $(this).find("a").attr("href", target);
}

Reference both the jquery and this javascript file in your html. Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>         
    </head>
    <body>
        <div class="threeimages">  
            <a>   
                <img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
            </a>        
            <div class="text">            
                <h2>
                    <a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
                </h2>            
                <p>Land of the sunshine!</p>        
            </div>
        </div>
        <div class="threeimages">  
                     <a>   
                <img alt="Belgium" src="/Images/Services%20button_tcm7-9689.gif"/>
            </a>        
            <div class="text">            
                <h2>
                        <a href="/partnerzone/downloadarea/school-information/belgium/index.aspx">Belgium</a>
                </h2>            
                <p>Land of beer and food!</p>        
            </div>
        </div>
        <script src="./content/js/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="./content/js/dupetargets.js" type="text/javascript"></script>
    </body>
</html>
Comments