Question

我在下面有以下结构。使用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>

感谢任何帮助！

Answer 1

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

Answer 2

这让你没有尝试编写代码。你应该真的能够自己做这件事。

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

Answer 3

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

Answer 4

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

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

}）;

Answer 5

这样的事情会起作用：

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

Answer 6

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

DEMO

Answer 7

这可以通过基本的jQuery'adpend（）'

来完成

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不是我

jQuery循环通过div和显示文本

8 个答案: