KevinOrin KevinOrin - 7 months ago 17
Javascript Question

Find first link and wrap entire div in its href

I would like to use Javascript to find the first link in a div (the learn more link) and wrap the entire div with that href dynamically. How can I revise this code so it does this?: jsfiddle.net/mpeoufjc
HTML

<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>


JS

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

Answer

Clone the element and remove the text content then wrap by it

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


Or by creating new a tag

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

Comments