jQuery - 获取链接，应用于其他元素并隐藏原始答案

【问题标题】：jQuery - Get link, apply to other element and hide originaljQuery - 获取链接，应用于其他元素并隐藏原始
【发布时间】：2014-03-19 20:58:40
【问题描述】：

我有下面的代码。事实上，我有几个迭代（多个 DIV 类为 wpdm-pro:

<div class='wpdm-pro'>
    <div class="metro-block span4 wpdm-metro mm-block-03">
        <div class="caption">
            <h4 class="media-heading" style="padding: 0px;margin:0px">TITLE</h4>
            <br/>
            <div class="btn-group">
              <a class='wpdm-download-link wpdm-download-locked btn btn-success' rel='noindex nofollow' href='http://123.com'>Download</a>
            </div>
        </div>
    </div>
</div>

我的问题是如何获取 URL，用它应用/包装标题，然后隐藏链接/包含 div？所以它会产生类似下面的东西（逻辑上 - 不是物理上）

<div class='wpdm-pro'>
    <div class="metro-block span4 wpdm-metro mm-block-03">
        <div class="caption">
            <a class='wpdm-download-link wpdm-download-locked btn btn-success' rel='noindex nofollow' href='http://123.com'><h4 class="media-heading" style="padding: 0px;margin:0px">TITLE</h4></a>
            <br/>
        </div>
    </div>
</div>

如果有办法删除 <br/> 标记并将其添加到链接之前，那将是锦上添花。

这是我尝试过的

<script type="text/javascript">
        $("document").ready(function () {
            $('.wpdm-download-link').each(function () {
                var theLink = $(this).attr('href');
                $(this).parentsUntil("div.caption h4").wrap("<a href='" + theLink + "'></div>");

            });
        });
    </script>

【问题讨论】：

脚本在哪里？
没有脚本 - 我已经尝试了几件事，但没有任何结果并且感到沮丧，所以从头开始。我尝试使用stackoverflow.com/questions/10224616/… 作为基础，但进展不快

标签： jquery css href

【解决方案1】：

这个sn-p：

$(".wpdm-pro").each(function(e,i) {
    var link = $(this).find('a');
    var title = $(this).find('h4');
    var newLink = link.html(title).clone();
    var caption = $(this).find('.caption');
    caption.children().not('br').remove();
    caption.prepend(newLink);
});

-- 定位链接和标题，将标题添加到链接和克隆链接。从.caption 中删除除<br> 之外的任何内容，将克隆的链接作为第一项插入.caption --

产生：

<div class="wpdm-pro">
    <div class="metro-block span4 wpdm-metro mm-block-03">
        <div class="caption">
           <a class="wpdm-download-link wpdm-download-locked btn btn-success" rel="noindex nofollow" href="http://123.com">
             <h4 class="media-heading" style="padding: 0px;margin:0px">TITLE</h4>
           </a>
           <br>
        </div>
    </div>
</div>

【讨论】：

非常感谢 - 如果我需要进一步修改它，肯定会给我一些工作。谢谢！