如何使用jquery移动多个不同的href来包装父元素和另外两个元素

时间:2013-10-17 17:38:14

标签: javascript jquery html dom-manipulation

我有里面有3个元素的文章列表。一个div,一个h3和一个p。 div中是一个图像,h3是href,文本是p。每篇文章的内容都不同。

我需要从h3中取出href并环绕div,h3和p。它们没有唯一标识符。唯一的类在初始文章和div上都是相同的。

我希望我可以将href的内容作为变量,删除该href,将链接保留为文本,然后用包含3个元素的变量重写href。

任何帮助都会受到赞赏,我希望我已经完全解释了它。标记如下。

<article class="summary">
    <div class="article-image">
        <img alt="" src="https://funeralzone.co.uk/assets/uploads/images/Funeral%20Costs(1).jpg" style="width: 255px; height: 169px;">
    </div>
    <h3>
        <a href="funeral-organiser/how-to-guides/a-guide-to-funeral-costs">A Guide to Funeral Costs</a>
    </h3>
    <p>How much does the average funeral cost? Where can you get help?</p>
</article>

2 个答案:

答案 0 :(得分:3)

这里你去:) http://jsfiddle.net/k9ksn/

$('.summary').each(function () {
    var href = $(this).find('a').attr('href');
    var anchorInner = $(this).find('a').text();
    $(this).find('h3').html(anchorInner);
    $(this).wrapInner('<a href="'+href+'"></a>');
});

答案 1 :(得分:0)

如果我理解,你试图将整个article项包装在hrefh3超链接的链接中,并用普通链接替换此链接文字(span)。

尝试这种方式:

$(function () {
    $("div.article-image").each(function () {
        var link = $(this).next("h3").find("a");
        var linkHref = $(link).attr("href");
        var linkText = $(link).html();        
        var wrapper = $("<a />", {
            href: linkHref
        });
        var linkAsText = $("<span />").html(linkText);

        $(this).parent().append($(wrapper));

        $(wrapper).append($(this).parent().children());

        $(link).replaceWith($(linkAsText));
    });
});

演示:http://jsfiddle.net/JpArk/2/