按類別查找所有元素並使用不同的值克隆它們

我試圖創建我的第一個Chrome擴展。基本上我想在當前加載的文檔中搜索類名「child」的所有鏈接。我需要檢索每個鏈接的href值。那麼我想將它克隆到另一個名爲「child_two」的類中。在新克隆的元素上，href將被替換爲已修改的元素。按類別查找所有元素並使用不同的值克隆它們

這是目標文件。

<div class="parent"> 
    <a href="http://www.example1.com" class="child">name1</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example2.com" class="child">name2</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example3.com" class="child">name3</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example4.com" class="child">name4</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example5.com" class="child">name5</a> 
</div>

我想要結果是這樣的。

<div class="parent"> 
    <a href="http://www.example1.com" class="child">name1</a> 
    <a href="preview.php?link=http://www.example1.com" class="child_two">preview</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example2.com" class="child">name2</a> 
    <a href="preview.php?link=http://www.example2.com" class="child_two">preview</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example3.com" class="child">name3</a> 
    <a href="preview.php?link=http://www.example3.com" class="child_two">preview</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example4.com" class="child">name4</a> 
    <a href="preview.php?link=http://www.example4.com" class="child_two">preview</a> 
</div> 
<div class="parent"> 
    <a href="http://www.example5.com" class="child">name5</a> 
    <a href="preview.php?link=http://www.example5.com" class="child_two">preview</a> 
</div>

非常感謝。

來源

2012-12-21 Jenny

$("a.child").each(function (index, elem) { 
    $(elem).clone() 
     .attr("href", "preview.php?link=" + $(elem).attr("href")).attr("class", "child_two").text("preview").appendTo($(elem).parent()); 
});

來源

2012-12-21 22:24:44 Walk

嗨，感謝您的答案，但我試過你的代碼，它沒有工作。 http://jsfiddle.net/9BHg5/ – Jenny

更正的問題，我也注意到它不包括該jsfiddle頁面上的jQuery框架，檢查出來。 – Walk

你可以以後用做（）的函數

$('.parent a.child').after(function() { 
    var $el = $(this); 
    return $el.clone().attr({ 
     'href': 'preview.php?link=' + $el.attr('href'), 
     'class': 'child_two' 
    }).text('preview'); 
});

http://jsfiddle.net/3MFEu/

來源

2012-12-21 22:32:35

$("a.child").each(function(){ 
    var newLink = $(this).clone(); 
    $(newLink).attr("href", "preview.php?link=" + $(this).attr("href")); 
    $(newLink).attr("class", "child_two"); 
    $(newLink).text("Preview"); 
    $(newLink).insertAfter(this); 
});

http://jsfiddle.net/bkU4r/2/

更新 - 我沒有注意到你想要的第二個鏈接閱讀「預覽」

來源

2012-12-21 22:34:56 RandomWebGuy

非常感謝你。有用！你拯救我的一天。 – Jenny

按類別查找所有元素並使用不同的值克隆它們

回答

相關問題