从<a>标签中获取href值

Question

从<a>标签中获取href值

10

我有以下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>

现在，如果你看到在div ID“txtLink”中有一个href，即Australia

我希望在页面运行时，相同的href值被复制到ID为“txtCss”的上面的标签中。我的意思是，当我的页面显示时，我的HTML将如下所示：

<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>

请提供一些解决上述问题的代码

- Manoj Singh

请确保在发布代码时，将其设置为代码块，方法是在每行前面放置4个空格或突出显示代码并单击“代码”按钮，该按钮上有1和0。 - UnkwnTech

我猜测这是JavaScript。 - SilentGhost

你们使用什么类型的编程语言？PHP、ASP.NET、Python、纯HTML...？ - Erik

1

如果我能得到纯HTML格式，那就太好了。 - Manoj Singh

4个回答

11

更新
这里提供了一个不使用jQuery的答案：https://dev59.com/wXNA5IYBdhLWcg3wn_bD#887348
然而，在2009年，使用jQuery是完全可以接受的 :)

创建一个像下面这样的js文件：

$(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);
}

在您的html中同时引用jquery和这个javascript文件。类似于这样：

<!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>

- Boris Callens

1

给我一秒钟，我会为你写一些东西。 - Boris Callens

1

以上问题有一点我忘了提，那就是有三个div id为"txtCss"以及三个div ID为"txtLink"，如果我使用你的代码，它会显示"$"的错误，说Error: $未定义。源文件：http://cmsstag/js/manoj.js 行：1 - Manoj Singh

2

$ 来自于 jQuery。确保你已经导入了 jQuery 库。不能有多个具有相同 id 的节点。你必须给它们分配唯一的 id 或者删除 id 并使用类。可以修改脚本以接受 threeimages 类型的节点，并仅在该节点中工作。 - Boris Callens

嗨Boris，你能否为我编写一个使用类而不是ID的示例代码？另外，我需要添加什么来消除错误“$未定义”？ - Manoj Singh

首先：我更新了HTML和JS以使用类。现在只需给节点添加一个类“threeimages”，并将其结构与您提供的示例相同，即可复制链接。您获取jquery插件库的位置并不重要，只要您在HTML底部引用的URL引用相同的路径即可。 - Boris Callens

显示剩余2条评论

2

这是一段简单易懂的代码：

 <html>
  <head>
   <script language="javascript">  
  function simpleChangeURL(){
        var anchors = document.getElementsByTagName('a');
        if(anchors != null & anchors.length > 0){
            anchors[0].href = anchors[1].href;  
        }   
    }

    function simpleChangeByAustraliaURL()
    {
        var anchors = document.getElementsByTagName('a');
        var images = document.getElementsByTagName('img');
        var imageNeeded;
        var anchorNeeded;
        if(images != null){
            for( var i = 0; i < images.length ; i++){
                if (images[i].alt == 'Australia') imageNeeded = images[i];
            }
        }
        if(anchors != null){
            for( var j = 0; j < anchors.length ; j++){
                if (anchors[j].firstChild.data == 'Australia') anchorNeeded = anchors[j];
            }
        }
        if(imageNeeded != null && anchorNeeded!= null){
    var imageAnchor = imageNeeded.parentNode;
    imageAnchor.href = anchorNeeded;

}

    }


    </script>
    </head>

    <body>
    <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>
    <script> simpleChangeByAustraliaURL();</script>
    </body>
    </html>

- harisgx

1

你可以使用：

var txtLink = document.getElementById('txtLink');
var a = txtLink.getElementsByTagName('a');
if (a != null && a.length > 0) {
    var setLink = txtLink.parentNode.getElementsByTagName('a');
    if (setLink != null && setLink.length > 0) {
        setLink[0].href = a[0].href;
    }
}

我认为这应该可以运行。

- José Leal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tolgahan Albayrak · Accepted Answer

这是最短的答案，没有使用任何库，只做你想要的事情。

var tc = document.getElementById("txtCss");
var ary = tc ? tc.getElementsByTagName("a") : [];
if(ary.length >= 2)
    ary[0].href = ary[1].href;