Question

我正在尝试创建我的第一个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>

非常感谢你。

Answer 1

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

Answer 2

你可以使用after（）的函数

来完成它

$('.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/

Answer 3

$("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/

更新 - 我没注意到您希望第二个链接读取“预览”

按类查找所有元素并使用不同的值克隆它们

3 个答案: