如何找到第一个链接并将整个 div 包装在其 href 中？答案

【问题标题】：How to find first link and wrap entire div in its href?如何找到第一个链接并将整个 div 包装在其 href 中？
【发布时间】：2019-04-22 20:46:36
【问题描述】：

我想使用 JavaScript 找到 div 中的第一个链接（了解更多链接），并使用该 href 动态包装整个 div。

我怎样才能修改这段代码，让它这样做？

$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap("<a href=''></a>", function() {
  a.href = $('a:first', this).attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
  <div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
    <a name="499"></a>
    <div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
      <div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
        <div id="dnn_ctr499_HtmlModule_lblContent">
          <h1>Analytic Solutions</h1>
          <p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
          </p>
          <h5><a href="/analytics/analytic-solutions/">Learn More</a></h5>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您需要在问题中添加相关代码 - 不要指望我们走出 SO 才能看到它。
请附上MCVE。
从什么时候开始，JS fiddle外部链接就一直用在SO上？我添加了代码@Andy
他们有，但总是伴随着代码 - 如果 jsfiddle 不可用，你的问题毫无价值。

标签： javascript jquery href

【解决方案1】：

克隆元素并删除文本内容，然后用它换行

$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
  return $('a:first', this).clone().text('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
  <div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
    <a name="499"></a>
    <div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
      <div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
        <div id="dnn_ctr499_HtmlModule_lblContent">
          <h1>Analytic Solutions</h1>
          <p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
          </p>
          <h5><a href="/analytics/analytic-solutions/">Learn More</a></h5>
        </div>
      </div>
    </div>
  </div>
</div>

或者通过创建新标签

$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
  return $("<a/>", {
    href: $('a:first', this).attr('href')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
  <div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
    <a name="499"></a>
    <div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
      <div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
        <div id="dnn_ctr499_HtmlModule_lblContent">
          <h1>Analytic Solutions</h1>
          <p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
          </p>
          <h5><a href="/analytics/analytic-solutions/">Learn More</a></h5>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

完美运行。如果 div 也有类 .RadAjaxPanel (div.RadAjaxPanel.textPane .DNNModuleContent.ModDNNHTMLC)，我可以使用 JS 删除 href 吗？原因是在 DotNetNuke 管理员中，您需要单击该框进行编辑，然后单击它会转到该 URL。不过，管理视图将该类添加到 div 中。如果我需要提出一个新问题，我们深表歉意。
对于相同的 .ModDNNHTMLC div，但前提是它的父级具有 .RadAjaxPanel。所以：“div.RadAjaxPanel.textPane .DNNModuleContent.ModDNNHTMLC”-@PranavCBalan
添加 if 条件并检查父级是否具有以下格式 if(this).parent().hasClass('RadAjaxPanel')){.......}
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() { return $('a:first', this).clone().text(''); 如果(this).parent().hasClass('RadAjaxPanel')) { $(this).removeAttr("href"); } });
@KevinOrin 不是那样...... $('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() { return $('a:first', this).clone().text('').attr('href',function(i,v){return $(this).parent().hasClass('RadAjaxPanel')?'':v;}); });