通过div和显示文本jQuery循环

Question

我有以下结构如下。使用jQuery我需要获取每个链接并在其下面显示href。我可以使用一些子选择编写代码为每个但我只是想写的东西，它会为所有的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> 

任何帮助表示赞赏！

Answer 1

这意味你没有尝试过在所有写代码的。你应该真的能够自己做到这一点。

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

Answer 2

这应该这样做。你可以使用每个。阅读更多关于选择器。

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

}）;

Answer 3

$('div.col').each(function(){ 
    alert($(this).find("a").attr("href")); 
    //figure out the rest yourself 
}); 

Answer 4

像这样的工作：

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

Answer 5

$('.col > a').after(function() { 
    return $('<span>', {text:this.href}); 
}); 

Answer 6

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

DEMO

Answer 7

这可以用一个基本的jQuery的 '追加（）' 来完成

JsFiddle Example

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

Answer 8

是的，我同意每个解决方案。但是如果你缓存你的选择器会更好。 否则每次jQuery必须潜入DOM。 如果它的大名单可能会影响性能。

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

http://jsfiddle.net/cXkqc/2/

更新

有从我的一部分，解释问题的错误。更新代码&链接。

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

http://jsfiddle.net/cXkqc/3/

感谢@am不是我什么