Javascript jQuery通过div循环并显示文本

我的结构如下。使用jQuery，我需要获取每个链接并在其下方显示href。我可以使用一些子选择器为每个类编写代码，但我只想编写一些可以为所有具有“col”类的div编写的代码，并允许将来添加这些代码

<div class="col">
    <a href="http://google.com">Google</a>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
</div>

以上应该变成

<div class="col">
    <a href="http://google.com">Google</a>
    <span>http://google.com</span>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
    <span>http://yahoo.com</span>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
    <span>http://facebook.com</span>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
    <span>http://twitter.com</span>
</div>

http://google.com
http://yahoo.com
http://facebook.com
http://twitter.com

---

感谢您的帮助

这应该可以。你可以使用每一个。阅读有关选择器的更多信息

$(document).ready(function(){
   $("div.col").each(function(){
      var hreftext = $(this).find("a").attr("href"); 
      $(this).append("<span>" + hreftext + "</span>");
   });

$（文档）.ready（函数（）{
$（“div.col”）。每个（函数（）{
var hreftext=$（this.find（“a”）.attr（“href”）；
$（this.append（“+hreftext+”）；
});

}))；

---

​

像这样的方法会奏效：

$('div.col').each(function() {
    var $a = $(this).find('a:first'),
        href = $a.attr('href');
    $('<span>').text(href).insertAfter($a);
});

$（'div.col'）。每个（函数（）{
var$a=$（this.find（'a:first'），
href=$a.attr（'href'）；
$（''）.text（href）.insertAfter（$a）；
});

这让人觉得你根本没有尝试编写代码。你真的应该能够自己做到这一点

$('.col a').each(function() {
    var $this = $(this);
    $("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});

$（'.col a'）。每个（函数（）{
var$this=$（this）；
$（“+$this.attr（'href'）+”）.insertAfter（$this）；
});

$（'.col>a'）。在（function（）{
返回$（''，{text:this.href}）；
});
$（“.col”）。每个（函数（）{
var v=$（this.find（“a”）；
$（“”，{text:v.attr（'href'）}）；
});

这可以通过一个基本的jQuery“append（）”来完成


$（'div.col'）。每个（函数（）{
var href=$（this.children（'a:first'）.attr（'href'）；
$（this.append（“”+href+“”）；
});
是的，我同意每种解决方案。但最好是缓存选择器，否则每次jQuery都必须深入DOM。如果它是一个大的列表可能会影响性能

var col = $('.col a');
col.each(function(){
  var val = $(this).text();
  $(this).append("<span>"+val);
})​

var col=$（'.col a'）；
col.each（函数（）{
var val=$（this.text（）；
$（this.append（“+val”）；
})​


更新

我在解释这个问题时犯了一个错误。更新代码和链接

 var col = $('.col a');
   col.each(function(){
   var val = $(this).attr('href');
   $(this).after("<span>"+val);
 })​

var col=$（'.col a'）；
col.each（函数（）{
var val=$（this.attr（'href'）；
$（此）。在（“+val”）之后；
})​


谢谢@am not i am
我甚至不知道从哪里开始..如果我将.col a'href存储到一个变量中，它将被每个变量覆盖..在一个简化的解决方案中没有做过类似的事情，我喜欢。“否则每次jQuery都必须深入DOM…”这是不对的。只有当您要重用
.col a
选择时，才会出现这种情况。如果只使用一次，那么jQuery将只执行一次DOM选择。哦，对不起。。那句话是个错误。请阅读—“但如果您计划在其他地方使用选择器，最好将其缓存起来”。谢谢-@amnotiamI没有投你反对票，但是你的回答与问题的要求不符。我不知道为什么你的被录取了。很有趣！！masedesign显示应该输出的内容，而我的代码仅此而已。为什么人们不说出原因就拒绝投票。这与积分无关。但这是一个帮助、分享和学习代码的地方。如果投反对票，请说明原因，以便我们改进或纠正错误。您的代码不会这样做。如果您测试它，您会发现输出是完全不同的。
$(".col").each(function(){
 var v= $(this).find("a");       
 $("<span/>",{text:v.attr('href')}).insertAfter(v);
 });

$('div.col').each(function(){
        var href = $(this).children('a:first').attr('href');
        $(this).append('<span>' + href + '</span>');
    });

var col = $('.col a');
col.each(function(){
  var val = $(this).text();
  $(this).append("<span>"+val);
})​

 var col = $('.col a');
   col.each(function(){
   var val = $(this).attr('href');
   $(this).after("<span>"+val);
 })​