Search code examples
javascripthtmlhref

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


Solution

  • Update
    An answer without jquery here: https://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>